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?
0
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.
1
Liqun Shen-MSFT has posted the best solution for this problem. An alternate solution, and, this relies on the fact that you’ve given your ControlTemplate resource an x:Key, is you can assign it directly to your RadioButton,
<RadioButton ControlTemplate="{StaticResource RadioButtonTemplate}" ...
1