Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Cris
50
Styling mouse over behaviors
posted

Hi,

I have a small menu that does not contain XamWebMenuItems but Buttons.

<igMenu:XamWebMenu>
     <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
     <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
     <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
</igMenu:XamWebMenu>

The button has a style with the mouse over behaviors, I want to remove the style from the XamWebMenu.

How do I do that?

  • 7922
    Verified Answer
    posted

    Hi

     

    To do that you should edit the control template of menu item. When you edit the control template you have many options to remove the mouse over behavior, but may be the easiest way is to remove actions applied in MouseOver and  Highlighted visual states.  Below is a snippet of this.

     

      <VisualState x:Name="MouseOver">

        <!--<Storyboard x:Name="MouseOverStoryboard" >

            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedIndicator" Storyboard.TargetProperty="Visibility">

                <DiscreteObjectKeyFrame KeyTime="0">

                   <DiscreteObjectKeyFrame.Value>

                       <Visibility>Visible</Visibility>

                   </DiscreteObjectKeyFrame.Value>

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

        </Storyboard>-->

      </VisualState>

      <VisualState x:Name="Highlighted">

        <!--<Storyboard >

            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightedIndicator" Storyboard.TargetProperty="Visibility">

                <DiscreteObjectKeyFrame KeyTime="0">

                    <DiscreteObjectKeyFrame.Value>

                        <Visibility>Visible</Visibility>

                    </DiscreteObjectKeyFrame.Value>

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

        </Storyboard>-->

      </VisualState>

     

    And finaly you should aplly this new control template by MenuItem style:

     

     <ig:XamMenu ItemContainerStyle="{StaticResource MenuItemStyle}">

                <Button Content="Button" />

                <Button Content="Button"/>

                <Button Content="Button" />

            </ig:XamMenu>

     

    Only one note in our new release 10.2 XamWebMenuItem and XamWebMenu are renamed, as  the ‘Web’ prefix is removed. So the code snippets are with new names, but the approach describe here works and in old releases.

     

    I have attached the full xaml page with the new control template in this post

    MainPage.zip