On mouseEnter button style in UWP c#

Question

I am beginner in UWP c# programming. So I have a menu with some button that I wanna change those style. I change default style.But I can't change onMouseEnter styles. I found codes like this after I googled :

<Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="BorderBrush" Value="Orange" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>

But it seems Style.Triggers doesn't support in UWP. Would you help me please?

Answer 1

But it seems Style.Triggers doesn't support in UWP.

Yes you are right. In UWP, we need to use the built-in VisualStateManager .

I don't know how did you implement your menu, but if you want to change the background of Button when it get mouse-over, pressed or some other states, you can modify the default template style of Buttons. Modify the VisualState which is named PointerOver like this:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
    </Storyboard>
</VisualState>

Then you can apply this template using StaticResource and the key of this style for example like this:

<Button Content="Button 1" Style="{StaticResource ButtonStyle}" />