How to customize the .NET MAUI Button using its visual states?

In a .NET MAUI Button control, you can dynamically change the style of a button based on its visual state. Visual states allow you to define different appearances for buttons in various states such as normal, disabled, hovered, or pressed. This guide explains how to modify a button’s style using visual states and a resource dictionary.

Step 1: Define Button Styles in a Resource Dictionary
In your control, create a resource dictionary containing styles for your Button. These styles will be applied based on the button’s visual state. Here is an example of a resource dictionary in XAML:

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseButtonStyle" TargetType="buttons:SfButton">
                <Setter Property="FontSize" Value="15" />
                <Setter Property="FontAttributes" Value="Italic" />                            
            </Style>

            <Style x:Key="normalButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
                <Setter Property="TextColor" Value="Red" />
                <Setter Property="Background" Value="Cyan" />
            </Style>

            <Style x:Key="disabledButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
                <Setter Property="TextColor" Value="Yellow" />
                <Setter Property="Background" Value="LightBlue" />
            </Style>

            <Style x:Key="pressedButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
                <Setter Property="TextColor" Value="Green" />
                <Setter Property="Background" Value="Yellow" />
            </Style>

            <Style x:Key="mouseOverButtonStyle" BaseResourceKey="baseButtonStyle" TargetType="buttons:SfButton">
                <Setter Property="TextColor" Value="White" />
                <Setter Property="Background" Value="Green" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

Step 2: Apply Visual States to a Button
Apply the defined visual states to a button within a VisualStateManager in your XAML layout. This allows you to specify which style to use for each button state.

    <StackLayout >
        <buttons:SfButton Text="Button">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource disabledButtonStyle}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource normalButtonStyle}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Hovered">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource mouseOverButtonStyle}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource pressedButtonStyle}" />
                        </VisualState.Setters>
                    </VisualState>

                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </buttons:SfButton>
    </StackLayout>

Output

Normal State

Hover State

Pressed State

Disabled State

Conclusion
I hope you enjoyed learning how to change the .NET MAUI button style using its visual states.

Refer to our .NET MAUI Button feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Button documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Button and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!

</contentpage.resources>