Have you ever feelt that the WPF/SL checkboxes looks dull and a bit "clumsy"? If you have this post will show you how you can restyle it.
The original
In my case I needed to show a list of items where each had several checkboxes. When I tried with the default template I found that is was to square and intrusive in a list like that. See the picture below and judge by yourself.
The result
Here is how it looks after I altered the template. The code to achive it will come further down.
NOTE: I noticed that the unchecked checkboxes are very difficult to see on one of my screens. They are there though.
The template
One of the great things with WPF and Silverlight is that function and display are decoupled so you can change the look of the controls to just about anything without altering the function. The default display of the template below is the unchecked state but with a trigger bound to IsChecked the template alters the Color, Opacity and StrokeWidth of the path if the CheckBox is checked.
<Style x:Key="DiscreteCheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Border>
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
<Border>
<Border.Background>
<VisualBrush Opacity="1.0" Stretch="None">
<VisualBrush.Visual>
<Path Name="path" Opacity="0.1" Data="M 0 5 L 3 10 10 0" Stroke="#FF3838BA" StrokeThickness="1.5"
StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" />
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="path" Property="Opacity" Value="1.0" />
<Setter TargetName="path" Property="Stroke" Value="#FF70A16F" />
<Setter TargetName="path" Property="StrokeThickness" Value="2.5" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource{x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>