Skip to content

Instantly share code, notes, and snippets.

@HeikkiDev

HeikkiDev/CustomRadioButtonIcon.xaml

Last active March 24, 2021 15:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HeikkiDev/b5934a88fd50af796bdf18b32f095846 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HeikkiDev/b5934a88fd50af796bdf18b32f095846 to your computer and use it in GitHub Desktop.
Download ZIP
Use of custom shape for RadioButton selected/unselected icon
Raw
CustomRadioButtonIcon.xaml
<ContentPage.Resources>
<ControlTemplate x:Key="RadioButtonTemplate">
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="Center"
Padding="5"
Margin="5">
<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>
<Grid Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid WidthRequest="25"
HeightRequest="25"
HorizontalOptions="Start"
VerticalOptions="Center">
<Ellipse Stroke="#0092E6"
StrokeThickness="4"
Fill="Transparent"
WidthRequest="22"
HeightRequest="22"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Ellipse x:Name="check"
Fill="#0092E6"
Stroke="Transparent"
WidthRequest="16"
HeightRequest="16"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
<ContentPresenter Grid.Column="1" />
</Grid>
</StackLayout>
</ControlTemplate>
<Style TargetType="RadioButton">
<Setter Property="ControlTemplate"
Value="{StaticResource RadioButtonTemplate}" />
</Style>
</ContentPage.Resources>
<RadioButton Content="Your text here, will be displayed on ContentPresenter"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment