ContentTemplate is not applied for RadioButton

Question

I have this code in my XAML file that supposedly should style the RadioButtons of the Page, which pretty much is an approach I have found here on StackOverflow:

<ContentPage.Resources>
    <ControlTemplate x:Key="RadioButtonTemplate">
        <Border BackgroundColor="Transparent" Stroke="Transparent">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid
                    Grid.Column="0"
                    HeightRequest="20"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="20">
                    <Ellipse
                        x:Name="border_circle"
                        Fill="Transparent"
                        HeightRequest="18"
                        HorizontalOptions="Center"
                        Stroke="{AppThemeBinding Light='#dddddd',
                                                 Dark='#999999'}"
                        StrokeThickness="2"
                        VerticalOptions="Center"
                        WidthRequest="18" />
                    <Ellipse
                        x:Name="check"
                        Fill="{AppThemeBinding Light='#dddddd',
                                               Dark='#999999'}"
                        HeightRequest="10"
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        WidthRequest="10" />
                </Grid>
                <ContentPresenter
                    Grid.Column="1"
                    Margin="10,0,0,0"
                    HorizontalOptions="Start"
                    VerticalOptions="Center" />
            </Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CheckedStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter TargetName="check" Property="Opacity" Value="1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter TargetName="check" Property="Opacity" Value="0" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </VisualStateManager.VisualStateGroups>
        </Border>
    </ControlTemplate>

    <Style x:Key="RadioButtonStyle" TargetType="RadioButton">
        <Setter Property="ControlTemplate" Value="{StaticResource RadioButtonTemplate}" />
    </Style>
</ContentPage.Resources>

The problem is that the style is not applied. RadioButtons maintain their original color. Am I missing something?

Answer 1

The reason why the style is not totally applied is because you set the Style explicitly,

<Style x:Key="RadioButtonStyle"

According to the doc

An explicit Style object is defined by specifying a TargetType and an x:Key value, and by setting the target element's Style property to the x:Key reference.

So when you consume the Style for the RadioButton in XAML, you should also set

<RadioButton ... Style="{StaticResource RadioButtonStyle}">

Or you may set an implicit Style in ControlTemplate (by removing x:Key="RadioButtonStyle" ).

For more info, please refer to Style apps using XAML, Redefine RadioButton appearance.