BeRo
BeRo

Reputation: 137

Disabled text color for buttons not properly working in .NET MAUI

I am working on a new .NET Maui App and I have defined a button Style that looks like this:

    <LinearGradientBrush x:Key="GreenButtonBrush"
                         EndPoint="0,1">
        <GradientStop Color="#64ca64"
                      Offset="0.0" />
        <GradientStop Color="#359b35"
                      Offset="1.0" />
    </LinearGradientBrush>

    <Color x:Key="Local100">#ffff00</Color>
    <Color x:Key="Local500">#ff0000</Color>

    <Style TargetType="Button" x:Key="GreenButton">
        <Setter Property="Background" Value="{StaticResource Key=GreenButtonBrush}" />
        <Setter Property="HeightRequest" Value="40" />
        <Setter Property="CornerRadius" Value="5" />
        <Setter Property="TextColor" Value="{StaticResource Key=Local100}" />
        <Setter Property="HorizontalOptions" Value="Fill" />
        <Style.Triggers>
            <Trigger TargetType="Button" Property="IsEnabled" Value="False">
                <Setter Property="TextColor" Value="{StaticResource Key=Local500}" />
            </Trigger>
        </Style.Triggers>
    </Style>

The green gradient background looks good and the default text color (yellow for testing purposes) is also used. When I change the text color for the disabled state in XAML while the App is running, it is properly applied.

However, if I save my changes and restart the App, the text color for the disabled state is black.

Does anyone have an idea why my disabled button text color is not properly working? I know that I am in the IsEnabled = false state, because if I change the button's state, the color gets properly updated to the yellow color.

I am testing my work on Android 10, 11, and 13 devices.

Update 03/12/2024

I tried to combine the control with all styles into one element. Unfortunately, I have the same behavior.

<Button Grid.Column="2"
        Background="{StaticResource Key=GreenButtonBrush}"
        BindingContext="{Binding Path=StartOverButton}"
        HeightRequest="40"
        CornerRadius="5"
        Text="{Binding Path=Caption}"
        TextColor="{StaticResource Key=Gray100}"
        HorizontalOptions="Fill"
        TextTransform="Uppercase"
        FontAttributes="Bold"
        Command="{Binding Path=ClickCommand}"
        IsEnabled="{Binding Path=IsEnabled}">
    <Button.Triggers>
        <Trigger TargetType="Button" Property="IsEnabled" Value="False">
            <Setter Property="TextColor" Value="Red" />
        </Trigger>
    </Button.Triggers>
</Button>

Upvotes: 0

Views: 1447

Answers (1)

BeRo
BeRo

Reputation: 137

I found the solution to my problem and I wanted to share it in case someone runs into the same problem. Shoutout to FreakyAli for supporting my bug search!

I created the project for the new App in Visual Studio 2022 and it created a file Styles.xaml that contains a range of different default styles.

The default style for buttons (listed below) contains setters for disabled buttons that override the text color with theme colors. These colors win over my color definitions although I am explicitly referencing my custom button style. Since I have custom styles for all my buttons in my App, I removed the default style from Styles.xaml and now all my buttons look and work as expected.

<Style TargetType="Button">
    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource PrimaryDarkText}}" />
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
    <Setter Property="FontFamily" Value="OpenSansRegular"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="BorderWidth" Value="0"/>
    <Setter Property="CornerRadius" Value="8"/>
    <Setter Property="Padding" Value="14,10"/>
    <Setter Property="MinimumHeightRequest" Value="44"/>
    <Setter Property="MinimumWidthRequest" Value="44"/>
    <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>
</Style>

Upvotes: 3

Related Questions