Visual States in .NET MAUI Button (SfButton)

The visual of the Button can be customized using VisualStates. The SfButton control contains the following five visual states:

• Normal
• Hovered
• Pressed
• Checked
• Disabled

NOTE

The visual states Checked and Unchecked are only updated when enabling the IsCheckable property in the SfButton.

XAML

<buttons:SfButton x:Name="button"
                    Text="SfButton" 
                    HeightRequest = "50"
                    WidthRequest="200"
                    TextColor="White"
                    IsEnabled = "True"
                    IsCheckable = "True"
                    IsChecked = "True">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Background" Value="Orange"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Checked">
                <VisualState.Setters>
                    <Setter Property="Background" Value="Green"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Hovered">
                <VisualState.Setters>
                    <Setter Property="Background" Value="DeepSkyBlue"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Background" Value="MediumVioletRed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Property="Background" Value="#BFC3C7"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</buttons:SfButton>

C#

SfButton button = new SfButton
    {
        Text = "SfButton",
        HeightRequest = 50,
        WidthRequest = 200,
        TextColor = Colors.White,
        IsEnabled = true,
        IsCheckable = true,
        IsChecked = true,
    };

    VisualStateGroupList visualStateGroupList = new VisualStateGroupList();

    VisualStateGroup commonStateGroup = new VisualStateGroup();
    VisualState normalState = new VisualState
    {
        Name = "Normal"
    };
    normalState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Colors.Orange });

    VisualState checkedState = new VisualState
    {
        Name = "Checked"
    };
    checkedState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Colors.Green });

    VisualState hoveredState = new VisualState
    {
        Name = "Hovered"
    };
    hoveredState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Colors.DeepSkyBlue });

    VisualState pressedState = new VisualState
    {
        Name = "Pressed"
    };
    pressedState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Colors.MediumVioletRed });

    VisualState disabledState = new VisualState
    {
        Name = "Disabled"
    };
    disabledState.Setters.Add(new Setter { Property = SfButton.BackgroundProperty, Value = Color.FromRgba("#BFC3C7") });

    commonStateGroup.States.Add(normalState);
    commonStateGroup.States.Add(checkedState);
    commonStateGroup.States.Add(hoveredState);
    commonStateGroup.States.Add(pressedState);
    commonStateGroup.States.Add(disabledState);
    visualStateGroupList.Add(commonStateGroup);

    VisualStateManager.SetVisualStateGroups(button, visualStateGroupList);

    this.Content = button;