Change button style when disabled by command's canexecute method

Jalza 761 Reputation points
2021-09-17T08:27:38.25+00:00

I'm developing an app that basically has black and white style. I have a button with a command binding (it has "canexecute" method to enable and disable the button). This is the XAML of the button:

<Button Margin="0,60,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Padding="20,0" FontSize="Small"
        Text="Accept" Command="{Binding MyCommand}"
        BackgroundColor="{AppThemeBinding Light={StaticResource LightTextColor}, Dark={StaticResource DarkTextColor}}"
        TextColor="{AppThemeBinding Light={StaticResource DarkTextColor}, Dark={StaticResource LightTextColor}}"/>

Using Light theme, when the button is enabled (canexecute result = true), it's background is black and text color is white. When it is disabled (canexecute result = false), it's background continues being black, but text color changes to black, so I have completely black rectangle.

I tried with this:

<Button Margin="0,60,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Padding="20,0" FontSize="Small"
        Text="Accept" Command="{Binding MyCommand}"
        BackgroundColor="{AppThemeBinding Light={StaticResource LightTextColor}, Dark={StaticResource DarkTextColor}}"
        TextColor="{AppThemeBinding Light={StaticResource DarkTextColor}, Dark={StaticResource LightTextColor}}">
    <Button.Triggers>
        <Trigger TargetType="Button" Property="IsEnabled" Value="False">
            <Setter Property="TextColor" Value="#808080"/>
        </Trigger>
    </Button.Triggers>
</Button>

But it doesn't changes nothing.

After I have tried this:

<Button Margin="0,60,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Padding="20,0" FontSize="Small"
        Text="Accept" Command="{Binding MyCommand}"
        BackgroundColor="{AppThemeBinding Light={StaticResource LightTextColor}, Dark={StaticResource DarkTextColor}}"
        TextColor="{AppThemeBinding Light={StaticResource DarkTextColor}, Dark={StaticResource LightTextColor}}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Property="Style">
                        <Setter.Value>
                            <Style TargetType="Button">
                                <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource DisabledTextColor}, Dark={StaticResource DisabledTextColor}}" />
                            </Style>
                        </Setter.Value>
                    </Setter>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Button>

In this case, the text continues being white when the button is disabled, so I don't have any visual change to know if the button is enabled or not.

I would like to know if it is possible to change the style of the button when it is disabled, keeping in mind that this depends on the command and not on the IsEnabled property. The main goal is changing text color to gray when the button is disabled.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,312 questions
0 comments No comments
{count} votes

Accepted answer
  1. Jalza 761 Reputation points
    2021-09-17T09:45:42.793+00:00

    I solved the problem adding Normal VisualState to VisualStateGroup:

            <Button Margin="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Padding="20,0" FontSize="Small"
                    Text="Accept" Command="{Binding MyCommand}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            ...
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            ...
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Button>
    

0 additional answers

Sort by: Most helpful