title: Simple rounded button in UWP - pressed color
body: <p><a href="https://i.stack.imgur.com/2wJsg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2wJsg.png" alt="pressed"></a>
  <a href="https://i.stack.imgur.com/eBDVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBDVE.png" alt="normal"></a>
  I'm struggling to create a button with rounded corner where I don't have to create a new style of button for each color I want to use.
  I want to do something like this:</p>
  
  <pre><code>&lt;Grid Background="Wheat"&gt;
      &lt;Button  Content="Test" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300"
               Style="{StaticResource RoundedButtonStyle}" Background="Blue"/&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>but the background of the parent grid always effects the color of the pressed button.
  I modified the default button template just to add the corner radius.</p>
  
  <p>How can I create a style that uses the background color of the button and lightens it when pressed (and not use the parent background)?</p>
  
  <pre><code>&lt;Style TargetType="Button" x:Key="RoundedButtonStyle"&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 ButtonBorderThemeThickness}" /&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="Button"&gt;
                      &lt;Grid x:Name="RootGrid" Background="{TemplateBinding Background}" CornerRadius="10"&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="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;/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"
                                            CornerRadius="10"/&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  
      &lt;Style x:Key="CircleButton" TargetType="Button"&gt;
          &lt;Setter Property="Background"&gt;
              &lt;Setter.Value&gt;
                  &lt;LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"&gt;
                      &lt;GradientStop Offset="0" Color="Blue"/&gt;
                      &lt;GradientStop Offset="1" Color="BlueViolet"/&gt;
                  &lt;/LinearGradientBrush&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Grid&gt;
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                  &lt;VisualState x:Name="Disabled"/&gt;
                                  &lt;VisualState x:Name="Normal"/&gt;
                                  &lt;VisualState x:Name="MouseOver"/&gt;
                                  &lt;VisualState x:Name="Pressed"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Inner" Storyboard.TargetProperty="(ScaleTransform.ScaleY)"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="1"/&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outer" Storyboard.TargetProperty="(ScaleTransform.ScaleY)"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="-1"/&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualState&gt;
                              &lt;/VisualStateGroup&gt;
                              &lt;VisualStateGroup x:Name="FocusStates"&gt;
                                  &lt;VisualState x:Name="Focused"/&gt;
                                  &lt;VisualState x:Name="Unfocused"/&gt;
                              &lt;/VisualStateGroup&gt;
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;Ellipse Margin="4" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5"&gt;
                              &lt;Ellipse.RenderTransform&gt;
                                  &lt;ScaleTransform ScaleY="1" x:Name="Outer"/&gt;
                              &lt;/Ellipse.RenderTransform&gt;
                          &lt;/Ellipse&gt;
                          &lt;Ellipse Margin="20" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5"&gt;
                              &lt;Ellipse.RenderTransform&gt;
                                  &lt;ScaleTransform ScaleY="-1" x:Name="Inner"/&gt;
                              &lt;/Ellipse.RenderTransform&gt;
                          &lt;/Ellipse&gt;
                          &lt;ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>