How to customize .NET MAUI RadioButton using visual state?

This section demonstrates how to use visual state to customize the .NET MAUI RadioButton. You can use visual states in a RadioButton control to alter the control’s appearance. You can 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, you can 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
Define the StackLayout, add your RadioButton controls. For each RadioButton, define the VisualStateManager and set the appropriate styles. In this, two RadioButton controls are added to the RadioGroup. Each RadioButton has visual states defined for the Checked and Unchecked states, 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. You can 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 clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!