THEME FOR RADIOBUTTON

Question

THEME FOR RADIOBUTTON

Giorgio Sfiligoi 636

Consider the following snippet for MAUI 10:

            <VerticalStackLayout RadioButtonGroup.GroupName="group"
                                 RadioButtonGroup.SelectedValue="{Binding Selected}">
                 <RadioButton Content="RadioButton 1" Value="1"/>
                 <RadioButton Content="RadioButton 2" Value="2"/>
                 <RadioButton Content="RadioButton 3" Value="3"/>
            </VerticalStackLayout>

With the Light theme the circles representing the buttons are black.

When I change the theme from Light to Dark the two non selected buttons remain black, hence invisible.

Similarly, if I start with the Dark theme the circles are white and remain white, hence invisible, when I switch to Light.

If I change the theme in another page and then navigate to this one, the radiobutton displays as expected.

Incidentally, the selected button is always blue, both for Light and Dark themes: this is OK for the Light theme but ugly for the Dark - I could not find a property that would allow me to change this color.

Currently the style of the radiobutton is the default one, created by the wizard when I created the project.

Can anybody help?

0 comments

Answer accepted by question author

1 additional answer

Your answer

Answer 1

Use theming and AppThemeBinding (or the SetAppTheme extensions) so the RadioButton visuals react when the system theme changes, instead of staying with the colors they had when first rendered.

There are two parts to solve:

Unselected circles staying black/white when theme changes
Define light/dark colors in resources and bind them via AppThemeBinding, or use SetAppThemeColor in code. For example, if using a custom ControlTemplate for RadioButton:

   <ContentPage.Resources>
       <Color x:Key="RadioStrokeLight">Black</Color>
       <Color x:Key="RadioStrokeDark">White</Color>
   
       <Style TargetType="RadioButton">
           <Setter Property="ControlTemplate">
               <Setter.Value>
                   <ControlTemplate>
                       <Border>
                           <Grid>
                               <Ellipse
                                   Stroke="{AppThemeBinding Light={StaticResource RadioStrokeLight},
                                                              Dark={StaticResource RadioStrokeDark}}"
                                   StrokeThickness="2" />
                               <!-- inner dot, etc. -->
                           </Grid>
                       </Border>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
   </ContentPage.Resources>

AppThemeBinding ensures the stroke color updates immediately when the system theme switches, instead of remaining the original black/white. This is the same mechanism used for labels and images that change with the theme:

   <Label TextColor="{AppThemeBinding Light=Green, Dark=Red}" />

If the template is created in C#, use SetAppThemeColor on the Ellipse.Stroke (or equivalent property) so it responds to theme changes.

Selected indicator always blue and not suitable for dark theme
Redefine the RadioButton appearance with a ControlTemplate and theme-aware visual states. For example, in the template’s VisualStateManager for the Checked state, bind the fill/stroke of the inner circle to theme-specific resources using AppThemeBinding or SetAppThemeColor. That way the selected color can be, for example, blue in light theme and a lighter accent in dark theme. .NET MAUI RadioButton is a TemplatedView, so a custom ControlTemplate can fully control the visual structure and colors, and the template can use theme-aware resources.

If the default wizard-generated style is not theme-aware, replace it with a ControlTemplate-based style that uses AppThemeBinding or SetAppThemeColor for all colors that must change between light and dark.

References:

Answer 2

Hi @Giorgio Sfiligoi ,

Thanks for reaching out.

This behavior is expected with the default control, and the stable way around it is to either accept the limitation or take control of the visuals yourself.

If you want customer control, you can take a look at this code snippet:

<ContentPage.Resources>
    <Style TargetType="RadioButton">
        <Setter Property="ControlTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <HorizontalStackLayout Spacing="10" VerticalOptions="Center">

                        <!-- Radio circle -->
                        <Grid WidthRequest="20" HeightRequest="20" VerticalOptions="Center">
                            <!-- Outer ring: theme-aware so it's always visible -->
                            <Ellipse Stroke="{AppThemeBinding Light=#49454F, Dark=#CAC4D0}"
                                        StrokeThickness="2"
                                        Fill="Transparent" />
                            <!-- Inner dot: only shown when this button is selected -->
                            <Ellipse Fill="{AppThemeBinding Light=#6750A4, Dark=#D0BCFF}"
                                        Margin="5"
                                        IsVisible="{TemplateBinding IsChecked}" />
                        </Grid>

                        <!-- Label next to the circle -->
                        <ContentPresenter VerticalOptions="Center" />

                    </HorizontalStackLayout>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ContentPage.Resources>

And the output should look like this:

Hope this helps! If the information I provided was useful to you, I would greatly appreciate it if you could follow the instructions here so others with the same problem can benefit as well.

Share via

THEME FOR RADIOBUTTON

1 additional answer

Your answer