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

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>