C# - Changing color of checkmark in checkbox

Question

I have a C# application with a tick checkmark when user select the checkbox. The default color is black and not set by anyone. I would like to know the best approach to use to change the color of the checkmark, say to red instead of black.

I can't seem to find which part of the code is responsible for the color change. Tried finding resources online but it requires writing over hundred of lines of XAML just to set the color.

Any suggestion please.

EDIT:

<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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid x:Name="markGrid">
                                    <Path x:Name="optionMark" 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}" Margin="1" Opacity="0" Stretch="None"/>
                                    <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </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="false">
                                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                                <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="true">

                                <Setter Property="Opacity" TargetName="optionMark" Value="1" />
                                <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}" >
                                <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                                <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>

Unfortunately, you have to rewrite the xaml style, you can not change just one thing. That is the biggest problem with xaml styles. You could use the xaml code they used to create the default look, tho. — rokkerboci, Dec 28 '17 at 09:29
I am sure there is a base property somewhere which controls the template of the checkmark for the entire application? — Cookie Monster, Dec 28 '17 at 09:30
The tick itself is done using a FontIcon, with Foreground set to {ThemeResource SystemControlHighlightAltChromeWhiteBrush}. Unfortunatly, you can either rewrite to style, (which is not that hard, since the default style is online), or try to find this FontIcon element, and change its Foreground property. — rokkerboci, Dec 28 '17 at 09:34
Would you happen to know where is that element stored in? By default, I can't locate the checkmark — Cookie Monster, Dec 28 '17 at 09:37

William Liew · Accepted Answer · 2017-12-29T05:45:47.793

I understand that you want to avoid writing over hundered of lines of XAML just to set the color, but from Visual Studio 2012 onwards, there's a feature where you can edit a copy of the control template. In Design mode, right click on the checkbox control, select Edit Template > Edit A Copy...

Then you can set where to define the template at, so you could either reuse it or just use it for one checkbox.

These are the colors you need to manipulate if you're on Windows 8 or above since the template varies base on Windows version. (The generated template has the following code)

<CheckBox.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
    <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}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <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.Disabled.Background" Color="#FFE6E6E6"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
    <SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
    <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.Static.Glyph" Color="#FF212121"/>
    <Style x:Key="CheckBoxStyleCustom" 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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="markGrid">
                                <Path x:Name="optionMark" 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}" Margin="1" Opacity="0" Stretch="None"/>
                                <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
                            </Grid>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </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 Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</CheckBox.Resources>

Edit: The ones that you have to modify to change the Check symbol colors are:

<SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>

I am confused with your answer. It only creates a new template along with trigger but has no solidcolorbrush in it — Cookie Monster, Dec 28 '17 at 09:46
@CookieMonster This is the xaml code that you need, now just change this line in the 's value to Red — rokkerboci, Dec 28 '17 at 09:49
Sorry, I've edited the answer to specify which SolidColorBrush to change. The OptionMark.Static.Glyph is the actual CheckMark symbol. — William Liew, Dec 28 '17 at 09:50
You can check my edited post, i posted that code that i have — Cookie Monster, Dec 28 '17 at 09:50
@Rokker Do you mean change it at Trigger property = HasContent there? — Cookie Monster, Dec 28 '17 at 09:52
I am using VS2015 so the entire template is very different from what you suggest — Cookie Monster, Dec 28 '17 at 09:53
@CookieMonster The full Template contains the style too, I've edited my answer to include the whole copy of it. — William Liew, Dec 28 '17 at 09:57
But why does it include other triggers such as Mouse Over? I don't need those trigger. — Cookie Monster, Dec 28 '17 at 09:58
@CookieMonster I understand that you don't need it but the only way to do what you asked is to edit the CheckBox template, at least microsoft provided and easy way to generate the code so that we can edit it without writing from scratch. — William Liew, Dec 28 '17 at 10:00
and why do I only need to change that 3 option mark that you mentioned?? — Cookie Monster, Dec 28 '17 at 10:03
@CookieMonster As long as you declare it in the or , it should only affect the current window / usercontrol. — William Liew, Dec 28 '17 at 10:03
@CookieMonster As for the 3 Option Mark, the OptionMark.MouseOver.Glyph will affect the color of the CheckMark if your mouse is on it. OptionMark.Disabled.Glyph will affect the color of the CheckMark if your checkbox IsEnabled=false. OptionMark.Static.Glyph will affect the color of the CheckMark if your mouse is not on it. — William Liew, Dec 28 '17 at 10:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162084/discussion-between-cookie-monster-and-william-liew). — Cookie Monster, Dec 28 '17 at 10:07
I can't see EditTemplate option on right click of checkbox control in visual studio 2015. please suggest me how to do it. thanks — gajju_15, Feb 11 '19 at 06:35

score 1 · Answer 2 · answered Aug 12 '20 at 14:06

For anyone who needs a simple CheckBox Template

<Style x:Key="CheckBoxStyle" TargetType="CheckBox">
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Foreground" Value="Transparent"/>
    
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border BorderBrush="White" BorderThickness="1">
                    <Grid Width="15" Height="15" >
                        <Rectangle Fill="{TemplateBinding Background}"/>
                        <TextBlock Foreground="{TemplateBinding Foreground}" Margin="0 0 0 1" VerticalAlignment="Center" HorizontalAlignment="Center" Text="√"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Foreground" Value="White"/>
        </Trigger>

        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

C# - Changing color of checkmark in checkbox

2 Answers2