Unable to get XAML VisualState code to work

Question

I'm learning MAUI and XAML on MS Learn. Unable to get sample code to work. When I click the button and hold down the mouse button, the scale goes from 1.0 to 0.8. When I release the mouse button the scale should return to 1.0 but doesn't. Below is the XAML code and the C# code from the code-behind file:

XAML Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ButtonVisualStatePageXAML"
             Title="Button Visual State">
    
    <!-- Original code from ms-learn website does not work -->
    <VerticalStackLayout>
        <Label Text="Button Visual State Using XAML"
               FontSize="40"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Button Text="Click me!"
                HorizontalOptions="Center">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="PointerOver" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </VerticalStackLayout>

    <!-- A.I. first suggestion did not work -->
    <!--<VerticalStackLayout>
        <Label Text="Button Visual State Using XAML"
               FontSize="40"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Button Text="Click me!"
                HorizontalOptions="Center">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </VerticalStackLayout>-->

    <!-- A.I. second suggestion did not work -->
    <!--<VerticalStackLayout>
        <Label Text="Button Visual State Using XAML"
               FontSize="40"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

        <Button Text="Click me!"
                HorizontalOptions="Center">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                            Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                            Value="0.8" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </VerticalStackLayout>-->
</ContentPage>

C# Code-behind:

namespace ControlGallery.Views.XAML;

public partial class ButtonVisualStatePageXAML : ContentPage
{
    public ButtonVisualStatePageXAML()
    {
        InitializeComponent();
    }
}

I'm using Visual Studio 2022 Community edition. This error occurs in both Windows and Android.

I asked A.I. but both suggestions did not work. I restarted Visual Studio, cleaned and rebuilt the solution. I searched StackOverflow with MAUI VisualState. 19 articles appeared. Some referred to Xamarin and were ignored. Anyway no article addressed my issue. VisualState code fails on both Windows and Android. Not building for Apple.

Answer 1

It should work as expected according to the Button visual states. To fix it, please delete or comment out the default Style setters for the <Style TargetType="Button"> in Resources\Styles\Styles.xaml:

<!--<Setter Property="VisualStateManager.VisualStateGroups">
    <VisualStateGroupList>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
                    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PointerOver" />
        </VisualStateGroup>
    </VisualStateGroupList>
</Setter>-->