How do I change the colour of a WPF Checkbox tick?

Question

I would like to change the colour of the tick in my WPF CheckBox from black to white. I have tried to do this in the CheckBoxdeclaration as such:

<CheckBox Background="black" Foreground="White" BorderBrush="#262626"/>

The background and border successfully change, but not the tick itself.

Answer 1

You could copy the entire checkbox style from the MSDN server but because its very confusing to work with in the beginning of any WPF carreer, I compiled the (in my opinion) neccessary bits into one style thats a little easier to understand:

<Style TargetType="{x:Type CheckBox}">
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="Black"/>
    <!--                           your color here -->
    <Setter Property="Foreground" Value="HotPink"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Width="15" Height="15">
                        <Grid>
                            <Grid Background="{TemplateBinding Foreground}" Margin="1" Visibility="Collapsed" Name="nullBlock"/>
                            <Path Stretch="Uniform" Width="15" Height="10" Fill="{TemplateBinding Foreground}" Name="eliCheck" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Visibility="Collapsed"/>
                        </Grid>
                    </Border>
                    <TextBlock Margin="5,0,0,0"  VerticalAlignment="Center" Foreground="White" Text="{TemplateBinding Content}"></TextBlock>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="LightGray" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#FF9C9E9F" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="LightGray" />
                        <Setter Property="Foreground" Value="Gray" />
                        <Setter Property="BorderBrush" Value="Gray"/>
                        <Setter TargetName="eliCheck" Property="Opacity" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="eliCheck" Property="Visibility" Value="Visible"></Setter>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="{x:Null}">
                        <Setter TargetName="nullBlock" Property="Visibility" Value="Visible"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Just copy this style into the Window.Resources or any other place you find fitting. Alternativly just paste it directly into the checkboxes style property.

Answer 2

The CheckBox control has various visual states with different colors for background, border and option mark glyph. You can refer to the documentation for the required parts and visual states.

If you want to edit the colors, you have to change the default style and control template. You can extract it using Blend or Visual Studio. Below is the default template. What you need to do is copy these resources to a resource dictionary in scope, e.g. the application resources and adapt the SolidColorBurshes.

<SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>

<Style x:Key="FocusVisual">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate>
            <Rectangle Margin="2"
                       SnapsToDevicePixels="true"
                       Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                       StrokeDashArray="1 2"
                       StrokeThickness="1" />
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>
<Style x:Key="OptionMarkFocusVisual">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate>
            <Rectangle Margin="14,0,0,0"
                       SnapsToDevicePixels="true"
                       Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                       StrokeDashArray="1 2"
                       StrokeThickness="1" />
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>
<Style x:Key="CheckBoxStyle"
       TargetType="{x:Type CheckBox}">
   <Setter Property="FocusVisualStyle"
           Value="{StaticResource FocusVisual}" />
   <Setter Property="Background"
           Value="{StaticResource OptionMark.Static.Background}" />
   <Setter Property="BorderBrush"
           Value="{StaticResource OptionMark.Static.Border}" />
   <Setter Property="Foreground"
           Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
   <Setter Property="BorderThickness"
           Value="1" />
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type CheckBox}">
            <Grid x:Name="templateRoot"
                  Background="Transparent"
                  SnapsToDevicePixels="True">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <Border x:Name="checkBoxBorder"
                       Margin="1"
                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                       Background="{TemplateBinding Background}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                  <Grid x:Name="markGrid">
                     <Path x:Name="optionMark"
                           Margin="1"
                           Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z "
                           Fill="{StaticResource OptionMark.Static.Glyph}"
                           Opacity="0"
                           Stretch="None" />
                     <Rectangle x:Name="indeterminateMark"
                                Margin="2"
                                Fill="{StaticResource OptionMark.Static.Glyph}"
                                Opacity="0" />
                  </Grid>
               </Border>
               <ContentPresenter x:Name="contentPresenter"
                                 Grid.Column="1"
                                 Margin="{TemplateBinding Padding}"
                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                 Focusable="False"
                                 RecognizesAccessKey="True"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="HasContent"
                        Value="true">
                  <Setter Property="FocusVisualStyle"
                          Value="{StaticResource OptionMarkFocusVisual}" />
                  <Setter Property="Padding"
                          Value="4,-1,0,0" />
               </Trigger>
               <Trigger Property="IsMouseOver"
                        Value="true">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.MouseOver.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.MouseOver.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.MouseOver.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.MouseOver.Glyph}" />
               </Trigger>
               <Trigger Property="IsEnabled"
                        Value="false">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.Disabled.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.Disabled.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Disabled.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Disabled.Glyph}" />
               </Trigger>
               <Trigger Property="IsPressed"
                        Value="true">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.Pressed.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.Pressed.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Pressed.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Pressed.Glyph}" />
               </Trigger>
               <Trigger Property="IsChecked"
                        Value="true">
                  <Setter TargetName="optionMark"
                          Property="Opacity"
                          Value="1" />
                  <Setter TargetName="indeterminateMark"
                          Property="Opacity"
                          Value="0" />
               </Trigger>
               <Trigger Property="IsChecked"
                        Value="{x:Null}">
                  <Setter TargetName="optionMark"
                          Property="Opacity"
                          Value="0" />
                  <Setter TargetName="indeterminateMark"
                          Property="Opacity"
                          Value="1" />
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

Since there are different colors for the Static, MouseOver, Pressed and Disabled states, you might have to derive a small color palette from your background, border and foreground colors.

In order to use the adapted check box style, you can reference it explicitly by key:

<CheckBox Style="{StaticResource CheckBoxStyle}" />

You can also define an implicit style like below after the other resources, so the style will automatically be applied to all CheckBoxes in scope of the containing resource dictionary.

<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CheckBoxStyle}"/>

In this case you do not reference the style explicitly anymore.

<CheckBox />