title: Change ToggleButton checked state background color UWP
body: <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>