Pimp up your RadioButton Sample

In Windows Presentation Foundation, RadioButton controls don't have to be boring small circles, you can get them to be pretty much whatever you want, cool, isn't it?



The following is a basic sample about how to customize a RadioButton control appearance, you can get the source & bits from here.

XAML code:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xml:lang="en-US"
x:Class="RadioButtonSample.Window1"
x:Name="Window"
Title="Window"
Width="320" Height="200"
Background="White">

<Window.Resources>
<Style TargetType="{x:Type RadioButton}" >
<Setter Property="Background" Value="Blue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="48" Height="48">
<Rectangle Fill="#3FCCCCCC" RadiusX="10" RadiusY="10" Margin="0.5,0.5,0.5,0.5"/>
<Ellipse
Margin="10,10,10,10"
Fill="#C0C0C0" Width="Auto" Height="Auto" />
<Ellipse x:Name="CheckMark"
Margin="20,10,20,10"
Fill="Green" Width="Auto" Height="Auto" />
<Ellipse x:Name="CheckMark2"
Margin="10,20,10,20"
Fill="Green" Width="Auto" Height="Auto" />
<ContentPresenter/>
</Grid>
</BulletDecorator.Bullet>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="CheckMark2" Property="Visibility" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


</Window.Resources>

<Grid x:Name="MainGrid" Background="white" HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Select one country" Grid.ColumnSpan="3" />
<RadioButton Content="USA" Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
<RadioButton Content="France" Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
<RadioButton Content="Brazil" Grid.Row="1" Grid.Column="2"
HorizontalAlignment="Left"
VerticalAlignment="Center" GroupName="CountriesGroup"/>
</Grid>
</Window>


Executed should look like this: