Checkbox content color can't be set in UWP

Question

I'm trying to change the color of a checkbox content. I want the color t change, if the box is checked, but I cannot even change it in the XAML.

<CheckBox x:Name="Checkbox" Foreground="White" Content="I agree" HorizontalAlignment="Left" Margin="50,480,0,0" VerticalAlignment="Top" Height="46" Width="938" FontFamily="Arial" Checked="Checkbox_Checked" Background="#FF009FE3" />

But the content color keeps showing in black. Where is my mistake? Sounds like a simple thing, but I couldn't find any solution out there. I'm new to UWP, what doesn't make it easier as well.

Answer 1

I was looking for an answer to this problem as well, but creating a copy of the template is kind of a pain, especially if you want to bind colors to the checkbox. Overriding just the colors is much easier in my opinion.

Here was the code I came up with:

<CheckBox Margin="12,0,0,0" IsChecked="{Binding Visible}" Content="{Binding Name}">
                            <CheckBox.Resources>
                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundFillChecked" Color="{Binding Color}"/>
                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundStrokeChecked" Color="{Binding Color}"/>

                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundFillCheckedPointerOver" Color="{Binding LighterColor}"/>
                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundStrokeCheckedPointerOver" Color="{Binding LighterColor}"/>

                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundFillCheckedPressed" Color="{Binding LighterColor}"/>
                                <SolidColorBrush x:Name="CheckBoxCheckBackgroundStrokeCheckedPressed" Color="{Binding LighterColor}"/>
                            </CheckBox.Resources>
                        </CheckBox>

All the colors that can be overridden are in this document, but the ones I used were the only ones I needed to change the checkbox color. https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.checkbox?view=winrt-22621

Answer 2

If you want to change the Foreground and Background color of the checkbox, you need to update its style. In the default style, it set different Foreground and Background in different states(e.g. unchecked or checked, etc). You need to override the visual state that you need. For example, you can change the Foreground and Background in the "UncheckedNormal" state.

<VisualState x:Name="UncheckedNormal">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
        </ObjectAnimationUsingKeyFrames>
        ......
    </Storyboard>
</VisualState>

When the box is checked, you want to change the color, you only need to do the similar behavior in the "CheckedNormal" state.

<VisualState x:Name="CheckedNormal">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
        </ObjectAnimationUsingKeyFrames>
        ......
    </Storyboard>
</VisualState>


//Apply
<CheckBox x:Name="Checkbox" 
                  Foreground="Blue" 
                  Style="{StaticResource CheckBoxStyle1}"
                  Content="I aggere"
                  HorizontalAlignment="Left" Margin="50,480,0,0" VerticalAlignment="Top" Height="46" Width="938" 
                  FontFamily="Arial"  
                  Checked="Checkbox_Checked" 
                  Background="#FF009FE3" />

You can get the complete style by Right-Click your CheckBox from the visual designer, then click Edit Template -> Edit a copy. This will create the default template for the CheckBox. The complete changed style you can refer here.

In addition, if you just want to change the foreground of the text, you can simply create a textBlock in checkbox and directly set its foreground.

<CheckBox x:Name="Checkbox" 
                  HorizontalAlignment="Left" Margin="50,480,0,0" VerticalAlignment="Top" Height="46" Width="938" 
                  FontFamily="Arial"  
                  Checked="Checkbox_Checked">
    <TextBlock Foreground="Yellow">hello</TextBlock>
</CheckBox>