How to customize .NET MAUI RadioButton using visual state?

This section demonstrates how to use visual state to customize the appearance of the .NET MAUI RadioButton. Visual states allow you to specify distinct styles for a RadioButton in different states, such as when it is checked or unchecked.

Step 1: Define Styles

In the ContentPage.Resources section of your XAML, define the CheckedStyle and UncheckedStyle with the desired properties for the checked and unchecked states.

XAML

<ContentPage.Resources>        
   <Style x:Key="CheckedStyle" TargetType="buttons:SfRadioButton">
        <Setter Property="TextColor" Value="#6750A4" />
        <Setter Property="CheckedColor" Value="#6750A4" />                         
    </Style>
   <Style x:Key="UncheckedStyle" TargetType="buttons:SfRadioButton">
         <Setter Property="TextColor" Value="#787579" />           
         <Setter Property="UncheckedColor" Value="#787579" />           
   </Style>
</ContentPage.Resources>

Step 2 : Define visual state
Add your RadioButton controls to a StackLayout. For each RadioButton, define the VisualStateManager and apply the appropriate styles. Here, two RadioButton controls are added to the RadioGroup, each with visual states for Checked and Unchecked, and the corresponding styles are applied.

XAML

  <StackLayout>
    <buttons:SfRadioGroup VerticalOptions="Center" HorizontalOptions="Center">
        <buttons:SfRadioButton Text="RadioButton">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource CheckedStyle}" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource UncheckedStyle}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </buttons:SfRadioButton>

        <buttons:SfRadioButton Text="RadioButton">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource CheckedStyle}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter Property="Style" Value="{StaticResource UncheckedStyle}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </buttons:SfRadioButton>
    </buttons:SfRadioGroup>        
</StackLayout>

Output

Conclusion

I hope you enjoyed learning how to customize .NET MAUI RadioButton using visual state.

You can refer to our .NET MAUI RadioButton feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI RadioButton 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 RadioButton and other .NET MAUI components.

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