How to Style a WPF Checkbox in a Simple Way

In this post, we will look at how to style a WPF Checkbox control in a simple way.

Creating a Custom Style for Checkbox

To create a custom style for Checkbox, we need to define a Style element in XAML with a key that we can use to apply the style to our Checkbox control. Here is an example:

<Style x:Key="CustomCheckBoxStyle" TargetType="{x:Type CheckBox}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <Grid Width="16" Height="16">
                            <Border x:Name="Border" Width="16" Height="16" BorderThickness="1" CornerRadius="2" Background="#1C1C1C" BorderBrush="#1C1C1C"/>
                            <Path x:Name="CheckMark" Width="8" Height="8" Stretch="Fill" Stroke="White" StrokeThickness="2" Data="M 0 4 L 4 8 L 8 0"/>
                        </Grid>
                    </BulletDecorator.Bullet>
                    <ContentPresenter Margin="4,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" RecognizesAccessKey="True"/>
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In this example, we have defined a custom style for Checkbox with a key of “CustomCheckBoxStyle”. The style sets the Foreground and VerticalContentAlignment properties of the Checkbox, and also provides a custom ControlTemplate that defines the appearance of the Checkbox.

The ControlTemplate includes a BulletDecorator element that wraps a Grid and a Path element. The Grid defines the Checkbox’s background color and border, while the Path defines the check mark icon.

Applying the Custom Style to Checkbox

To apply the CustomCheckBoxStyle to our Checkbox control, we can simply assign the Style property of the Checkbox to the key of our custom style, like this:

<CheckBox Content="Checkbox" Style="{StaticResource CustomCheckBoxStyle}"/>

This code will style the Checkbox control using our custom style.