[Bug] Checked CheckBox does not update VisualState properly

[nicktiberi]

Description

Using a CheckBox with Normal and Disabled VisualState, when the CheckBox is checked and IsEnabled is False, the CheckBox does not update to use the Normal VisualState when IsEnabled is updated to True.

If the CheckBox is unchecked, the VisualState transitions as expected (the color of the checkbox updates as as IsEnabled is toggled on and off.

Steps to Reproduce

1. Create a CheckBox with Normal and Disabled VisualState, and set a different Color on each state.
2. Check the CheckBox and set the IsEnabled property to False. The Color should correspond to the value set for the Disabled state.
3. Set the IsEnabled property to True. The Color of the CheckBox will not update unless you uncheck and recheck the CheckBox.

Expected Behavior

If the CheckBox is checked and IsEnabled is changed from False to True, the CheckBox should use the Normal VisualState instead of the Disabled VisualState.

Actual Behavior

If the CheckBox is checked and IsEnabled is changed from False to True, the CheckBox still uses the Disabled VisualState.

Basic Information

• Version with issue: Xamarin.Forms 4.4
• IDE: Visual Studio Mac
• Platform Target Frameworks:
  • iOS
  • Android

Video Demo

https://www.youtube.com/watch?v=36iF9-S6wmM&feature=youtu.be

Reproduction Link

I've attached a small example project demonstrating the issue. The relevant files are TestPage.xaml and TestViewModel.cs.

Test Project Download

XAML

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="test.Views.TestPage"
             xmlns:vm="clr-namespace:test.ViewModels">
    <ContentPage.BindingContext>
        <vm:TestViewModel />
    </ContentPage.BindingContext>
    <StackLayout>
        <Label Text="{Binding CheckboxEnabledText}" />
        <Switch IsToggled="{Binding IsCheckboxEnabled}" />

        <CheckBox IsEnabled="{Binding IsCheckboxEnabled}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Color" Value="Green" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Focused" />

                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Color" Value="Gray" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </CheckBox>
    </StackLayout>
</ContentPage>

ViewModel

using System.Windows.Input;

namespace test.ViewModels
{
    public class TestViewModel : BaseViewModel
    {
        private bool isCheckboxEnabled;
        public bool IsCheckboxEnabled
        {
            get => isCheckboxEnabled;

            set
            {
                isCheckboxEnabled = value;
                OnPropertyChanged(nameof(IsCheckboxEnabled));
                OnPropertyChanged(nameof(CheckboxEnabledText));
            }
        }

        public string CheckboxEnabledText
        {
            get
            {
                if (IsCheckboxEnabled)
                {
                    return "checkbox enabled (green)";
                }
                else
                {
                    return "checkbox disabled (gray)";
                }
            }
        }

        public ICommand OpenWebCommand { get; }
    }
}
``

[nicktiberi]

Looks like maybe it is because of this code?

Xamarin.Forms/Xamarin.Forms.Core/CheckBox.cs

Lines 38 to 39 in 87d720c

	if (IsEnabled && IsChecked)
	VisualStateManager.GoToState(this, IsCheckedVisualState);

If I'm understanding this code correctly, if the checkbox is checked and enabled, it goes to an IsChecked state instead of Normal state. Is that intentional? If so, how do I register my code to detect the change to IsChecked state?

[mjmostachetti]

@nicktiberi https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/checkbox#checkbox-visual-states
You can register "IsChecked" as another state in "CommonStates" VisualStateGroup.
<VisualState x:Name="IsChecked"> <VisualState.Setters> <Setter Property="Color" Value="Orange" /> </VisualState.Setters> </VisualState>