Change ToggleButton checked state background color UWP
<p>I want to change the <code>ToggleButton</code> <code>Background</code> color when <code>IsChecked</code> is true. I tried changing the <code>VisualState</code> <code>Checked</code> to</p>

<pre><code>&lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
      Storyboard.TargetProperty="Background"&gt;
              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Green" /&gt;
</code></pre>

<p>But this made the <code>Normal</code> state background fully transparent. I would like to bind the <code>Checked</code> <code>Background</code> color in <code>XAML</code>. How do I do this?</p>

<pre><code>&lt;!-- Default style for Windows.UI.Xaml.Controls.Primitives.ToggleButton --&gt;
&lt;Style TargetType="ToggleButton"&gt;
&lt;Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
&lt;Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/&gt;
&lt;Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" /&gt;
&lt;Setter Property="BorderThickness" Value="{ThemeResource ToggleButtonBorderThemeThickness}" /&gt;
&lt;Setter Property="Padding" Value="8,4,8,4" /&gt;
&lt;Setter Property="HorizontalAlignment" Value="Left" /&gt;
&lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
&lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /&gt;
&lt;Setter Property="FontWeight" Value="Normal" /&gt;
&lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /&gt;
&lt;Setter Property="UseSystemFocusVisuals" Value="True" /&gt;
&lt;Setter Property="Template"&gt;
  &lt;Setter.Value&gt;
    &lt;ControlTemplate TargetType="ToggleButton"&gt;
      &lt;Grid x:Name="RootGrid" Background="{TemplateBinding Background}"&gt;
        &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup x:Name="CommonStates"&gt;
            &lt;VisualState x:Name="Normal"&gt;
              &lt;Storyboard&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="PointerOver"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="Pressed"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="Disabled"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="Checked"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="CheckedPointerOver"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="CheckedPressed"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;

                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="CheckedDisabled"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="Indeterminate"&gt;
              &lt;Storyboard&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="IndeterminatePointerOver"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="IndeterminatePressed"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
            &lt;VisualState x:Name="IndeterminateDisabled"&gt;
              &lt;Storyboard&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
                &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                   Storyboard.TargetProperty="BorderBrush"&gt;
                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" /&gt;
                &lt;/ObjectAnimationUsingKeyFrames&gt;
              &lt;/Storyboard&gt;
            &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
        &lt;/VisualStateManager.VisualStateGroups&gt;
        &lt;ContentPresenter x:Name="ContentPresenter"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}"
                          Content="{TemplateBinding Content}"
                          ContentTransitions="{TemplateBinding ContentTransitions}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          Padding="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          AutomationProperties.AccessibilityView="Raw"/&gt;
      &lt;/Grid&gt;
    &lt;/ControlTemplate&gt;
  &lt;/Setter.Value&gt;
&lt;/Setter&gt;
&lt;/Style&gt;
</code></pre>

<p><strong>Update</strong></p>

<p>I manage to change the Checked background color based on @DarkTemplar suggestion. Now for the binding part, I am create a <code>Custom Control</code> but my <code>Dependency Property</code> does not get applied.</p>

<pre><code>public sealed class MyToggleButton : ToggleButton
{
    public MyToggleButton()
    {
        this.DefaultStyleKey = typeof(MyToggleButton);
    }

    public Brush CheckedBackground
    {
        get { return (Brush)GetValue(CheckedBackgroundProperty); }
        set { SetValue(CheckedBackgroundProperty, value); }
    }

    public static readonly DependencyProperty CheckedBackgroundProperty =
        DependencyProperty.Register("CheckedBackground", typeof(Brush), typeof(MyToggleButton), new PropertyMetadata(Application.Current.Resources["ToggleButtonBackgroundChecked"]));
</code></pre>

<p>In my XAML I have</p>

<pre><code>&lt;cc:MyToggleButton x:Name="Adjustments" Content="Adjustments" CheckedBackground="Red" /&gt;
</code></pre>

<p>Then in my <code>Style</code></p>

<pre><code>  &lt;VisualState x:Name="Checked"&gt;
        &lt;Storyboard&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                    &lt;DiscreteObjectKeyFrame.Value&gt;
                        &lt;SolidColorBrush Color="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/&gt;
                    &lt;/DiscreteObjectKeyFrame.Value&gt;
                &lt;/DiscreteObjectKeyFrame&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}"/&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/&gt;
        &lt;/Storyboard&gt;
    &lt;/VisualState&gt;
    &lt;VisualState x:Name="CheckedPointerOver"&gt;
        &lt;Storyboard&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                    &lt;DiscreteObjectKeyFrame.Value&gt;
                        &lt;SolidColorBrush Color="{Binding Path=CheckedBackground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/&gt;
                    &lt;/DiscreteObjectKeyFrame.Value&gt;
                &lt;/DiscreteObjectKeyFrame&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt;
                &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/&gt;
            &lt;/ObjectAnimationUsingKeyFrames&gt;
            &lt;PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/&gt;
        &lt;/Storyboard&gt;
</code></pre>