Change button style when disabled by command's canexecute method

Question

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.

Answer 1

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>