How to use VisualStateManager to style a button?

[MartyIX]

I attempted to assign styles to a button here: https://github.com/MartyIX/WinUiDemos/tree/feature/2024-07-14-PointerOver-n-focus (MartyIX/WinUiDemos@2cb3748) like this:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUiDemos.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUiDemos"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="MyButton" Click="myButton_Click" Content="Click Me">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Target="Background" Value="White" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Target="Background" Value="Yellow" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Target="Background" Value="Red" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Target="Background" Value="Gray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Target="Background" Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unfocused" />
                    <VisualState x:Name="PointerFocused" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </StackPanel>
</Window>

but it does not work. Basically, I tried to do it the same way as one does it in .NET MAUI. What am I doing wrong?

[castorix]

You can use a Control template
I had tested with the WPF sample for a rounded Button How to create a template for a control (WPF.NET)
The thread where I posted the test : https://learn.microsoft.com/en-us/answers/questions/1308843/cannot-assign-visualstategroup-into-property-visua

[MartyIX]

Thank you @castorix! It was still non-trivial for me to put together a working sample. So I decided to write a complete answer here for others to save some time.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUiDemos.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUiDemos"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">

        <StackPanel.Resources>
            <Style x:Key="CustomButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <!-- Button Background -->
                                <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                </Border>
                                <!-- Visual States -->
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="LightGray" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Yellow" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Red" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="LightGray" Duration="0"/>
                                                <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="CustomButtonStyle2" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter x:Name="ContentPresenter">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenter.Background" Value="Green" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenter.Background" Value="Yellow" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenter.Background" Value="Red" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="ContentPresenter.Background" Value="LightGray" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <TextBlock Text="Button 1"/>
        <Button Style="{StaticResource CustomButtonStyle}" Content="Custom Button 1" Width="200" Height="50" Margin="0,0,0,50"/>

        <TextBlock Text="Button 2"/>
        <Button Style="{StaticResource CustomButtonStyle2}" Content="Custom Button 2" Width="200" Height="50"/>

    </StackPanel>
</Window>

Demo:

I still do not understand details but it appears it works so it's a first step.

Resources:

• How to use `VisualStateManager` to style a button? #9816 (comment)
• https://nicksnettravels.builttoroam.com/styling-controls-for-windows-apps/