"Pressed" Visual State not changing back to "Normal" until you click away on Windows

Description

I started a new MAUI app to see how to change a button’s visual state when it has been pressed. I found that the code I used for this works on macOS but not on Windows.

Firstly, I added colours to the Colors.xaml file

<Color x:Key="PrimaryBackgroundColour">#337ab7</Color>
<Color x:Key="PrimaryBorderColour">#2e6da4</Color>
<Color x:Key="PrimaryBackgroundActiveColour">#204d74</Color>
<Color x:Key="PrimaryBorderActiveColour">#122b40</Color>

I then added a new style to the Styles.xaml file which adds the Visual States

<Style x:Key="PrimaryButton"  
        TargetType="Button">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryBackgroundColour}, Dark={StaticResource White}}" />
                        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource PrimaryBorderColour}, Dark={StaticResource White}}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryBackgroundActiveColour}, Dark={StaticResource White}}" />
                        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource PrimaryBorderActiveColour}, Dark={StaticResource White}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

I then changed by Button to have this new style:

<Button 
    Text="Login"
    WidthRequest="300"
    HorizontalOptions="Center"
    Style="{StaticResource PrimaryButton}" />

When I ran the app on Windows I found that the button’s Visual State when pressed did change correctly, but it didn’t revert back to the Normal state until I clicked away (for example, clicking in to one of the Entry controls):

When I run the same code on macOS it works as expected:

Steps to Reproduce

I create a new Maui app.

I added colours to the Colors.xaml file

<Color x:Key="PrimaryBackgroundColour">#337ab7</Color>
<Color x:Key="PrimaryBorderColour">#2e6da4</Color>
<Color x:Key="PrimaryBackgroundActiveColour">#204d74</Color>
<Color x:Key="PrimaryBorderActiveColour">#122b40</Color>

I then added a new style to the Styles.xaml file which adds the Visual States

<Style x:Key="PrimaryButton"  
        TargetType="Button">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryBackgroundColour}, Dark={StaticResource White}}" />
                        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource PrimaryBorderColour}, Dark={StaticResource White}}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryBackgroundActiveColour}, Dark={StaticResource White}}" />
                        <Setter Property="BorderColor" Value="{AppThemeBinding Light={StaticResource PrimaryBorderActiveColour}, Dark={StaticResource White}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

I then changed by Button to have this new style:

<Button 
    Text="Login"
    WidthRequest="300"
    HorizontalOptions="Center"
    Style="{StaticResource PrimaryButton}" />

Version with bug

6.0 Release Candidate 3

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows SDK 10.0.19041.0

Did you find any workaround?

No response

Relevant log output

No response

[blanc99]

Able to reproduce as well. Thanks to jsuarezruiz, the workaround I put in is to add the ‘Focused’ visual state and set the colors to be the same as those of ‘Normal’ (as I do not need to highlight a focused button.)

[DarkNoir]

Same issue on Windows 11 : 10.0.22000.0

More Info: Work Around, add event to reset. C# :

 private void Button_Pressed(object sender, EventArgs e)
{
    Button b = (Button)sender;
    Dispatcher.DispatchDelayed(TimeSpan.FromMilliseconds(400), () =>
    {
        VisualStateManager.GoToState(b, "Normal");
    });
}