Disabled VisualState not working in VisualStateManager of Button

[usausa]

Description

A sample source for switching the Disabled state of a button is shown below. When a button is clicked to switch states, VisualStateManager is not updated to the content of the VisualState of Disabled for the button that exists in Style.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ButtonState.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:buttonState="clr-namespace:ButtonState">

    <ContentPage.Resources>
        <ResourceDictionary>

            <Style x:Key="WithVsmButton" TargetType="Button">
                <Setter Property="FontSize" Value="24" />
                <Setter Property="BackgroundColor" Value="{StaticResource Blue100Accent}" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Gray200}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

            <Style x:Key="WithoutVsmButton" TargetType="Button">
                <Setter Property="FontSize" Value="24" />
            </Style>

        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.BindingContext>
        <buttonState:MainPageViewModel />
    </ContentPage.BindingContext>

    <VerticalStackLayout
        Padding="30,0"
        Spacing="25"
        VerticalOptions="Center">

        <Button
            Command="{Binding OnCommand}"
            Style="{StaticResource WithVsmButton}"
            Text="ON with VSM" />
        <Button
            Command="{Binding OffCommand}"
            Style="{StaticResource WithVsmButton}"
            Text="OFF with VSM" />

        <Button
            Command="{Binding OnCommand}"
            Style="{StaticResource WithoutVsmButton}"
            Text="ON without VSM" />
        <Button
            Command="{Binding OffCommand}"
            Style="{StaticResource WithoutVsmButton}"
            Text="OFF without VSM" />

    </VerticalStackLayout>

</ContentPage>

public class MainPageViewModel
{
    private bool flag;

    public Command OnCommand { get; }
    public Command OffCommand { get; }

    public MainPageViewModel()
    {
        OnCommand = new Command(() => Update(true), () => !flag);
        OffCommand = new Command(() => Update(false), () => flag);
    }

    private void Update(bool value)
    {
        flag = value;
        OnCommand.ChangeCanExecute();
        OffCommand.ChangeCanExecute();
    }
}

Image

• Initial image

• When a button is pressed to switch states in Android/Release mode (Actual image)

• When a button is pressed to switch states in Android/Debug mode (Expected image)

Conditions for reproducing the problem

• The problem occurs in Release mode of Android
• The problem does not occur in Debug mode on Android
• The problem does not occur in Release mode on Windows
• The appearance is the same, but the clickable has been changed

Steps to Reproduce

1. Create a File > New .NET MAUI App
2. Rewrite MainPage.xaml with the contents of Description
3. Add MainPageViewModel with the contents of Description
4. Empty the contents of Styles.xaml

Link to public reproduction project repository

https://github.com/usausa/Issue-MAUI-ButtonState

Version with bug

7.0.49

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android (all)

Did you find any workaround?

No response

Relevant log output

No response

[AndreasReitberger]

Seems to be relevant to my issue. I figured out, it depends if you set the VisualStyleGroups in a Style with a key or not. https://github.com/dotnet/maui/issues/16569

[StephaneDelcroix]

not a dupe of #16569, sorry

[mattleibow]

@StephaneDelcroix did this happen with the .NET 8 or main, or just in .NET 7?

We do have this issue as well that was fixed recently: https://github.com/dotnet/maui/issues/11662 This was fixed in .NET 8: https://github.com/dotnet/maui/pull/13836

There are 2 workarounds for .NET 7:

1. Use Background instead of the older BackgroundColor

2. Remap the BackgroundColor to Background mapper:

.ConfigureMauiHandlers(_ => 
{
    LabelHandler.Mapper.AppendToMapping(
        nameof(View.BackgroundColor),
        (handler, View) => handler.UpdateValue(nameof(IView.Background)));
    ButtonHandler.Mapper.AppendToMapping(
        nameof(View.BackgroundColor),
        (handler, View) => handler.UpdateValue(nameof(IView.Background)));
})

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0 with below project:

This issue repro on Release mode of Android 13.0-API33 .NET 7, does not repro on Release mode on Windows. This issue does not repro on Release mode of Android 13.0-API33 .NET 8, and Release mode on Windows.

Release mode of Android .NET 8: