Restyle wpf checkboxes

Published on den 18 August 2010

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.

WPF cb orig

The result

Here is how it looks after I altered the template. The code to achive it will come further down.

WPF cb restyled

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>

Then feel free to it or if you have any comments or questions mention @MikaelEliasson on Twitter.

CTO and co-founder at Bokio with a background as an elite athlete. Still doing a lot of sports but more for fun.

#development, #web, #orienteering, #running, #cycling, #boardgames, #personaldevelopment