How to style stroke color for MAUI RadioButton

Hello,

Since “StrokeColor” property is only for Android native RadioButton, you mean Android platform, right?

As described in the official RaidoButton doc: BorderColor, of type Color, which defines the border stroke color, you could try BorderColor. However, there is a known issue reporting at GitHub- RadioButton border doesn't work on Android · Issue #15795 · dotnet/maui (github.com), you could not consume this property, please follow the progress at GitHub.

As a solution, you could redefine RadioButton appearance with a ControlTemplate, please refer to the following code:

  (The background color, Fill, Stroke properties respond to system theme changes. For more details, please refer to Respond to system theme changes - .NET MAUI | Microsoft Learn)

 <ContentPage.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate">
            <Border Stroke="{AppThemeBinding Light=#F3F2F1, Dark=Cyan}"
                    StrokeThickness="2"
                    StrokeShape="RoundRectangle 10"
                    BackgroundColor="{AppThemeBinding Light=#F3F2F1, Dark=Cyan}"
                    HeightRequest="90"
                    WidthRequest="90"
                    HorizontalOptions="Start"
                    VerticalOptions="Start">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Property="Stroke"
                                            Value="{AppThemeBinding Light=Green, Dark=Red}" />
                                    <Setter TargetName="ContentCheck"
                                            Property="Opacity"
                                            Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="{AppThemeBinding Light=#F3F2F1, Dark=Cyan}"/>
                                    <Setter Property="Stroke"
                                            Value="{AppThemeBinding Light=#F3F2F1, Dark=Cyan}" />
                                    <Setter TargetName="ContentCheck"
                                            Property="Opacity"
                                            Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid Margin="4"
                      WidthRequest="90">
                    <Grid Margin="0,0,4,0"
                          WidthRequest="18"
                          HeightRequest="18"
                          HorizontalOptions="End"
                          VerticalOptions="Start">
                        <Ellipse
                            Stroke="{AppThemeBinding Light=Green, Dark=Red}"
                                 Fill="{AppThemeBinding Light=Yellow, Dark=Purple}"
                                 WidthRequest="16"
                                 HeightRequest="16"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                        <Ellipse IsVisible="True"
                            x:Name="ContentCheck"
                                 Fill="{AppThemeBinding Light=Green, Dark=Red}"
                                 WidthRequest="8"
                                 HeightRequest="8"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                    </Grid>
                    <ContentPresenter />
                </Grid>
            </Border>
        </ControlTemplate>
        <Style TargetType="RadioButton">
            <Setter Property="ControlTemplate"
                    Value="{StaticResource RadioButtonTemplate}" />
        </Style>
    </ContentPage.Resources>

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.