How to change checkbox's background for UWP?

Question

I can't change checkbox' background by using following code, but it works for Windows Store app (Windows 8.1). I want to know how to make it works for UWP?

this.checkBox.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);
this.checkBox.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);

Answer 1

For changing the Foreground and Background color of the checkbox, you need to update its template. You can do this by - Right-Click on your checkbox from the visual designer, then click on Edit Template > Edit a copy. This will create the default template for the CheckBox. (You can check out the whole template here)

This template has all the visual states for the checkbox. You will need to override the visual state that you need. For Example you do something like this to the "UncheckedNormal" state.

<VisualState x:Name="UncheckedNormal">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
                                           Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="Your Fill Color here for only check part" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle"
                                           Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="Your foreground color here" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Background">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="Your background color here" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
</VisualState>

This can also be written in C# but it is way too complex and editing styles in XAML is the recommended way of styling.

Hope this helps. Please feel free to add any questions you might have.