Windows apps
Collapse the table of content
Expand the table of content
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Button Styles and Templates

 

This topic describes the styles and templates for the Button control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

The Button control does not have any named parts.

The following table lists the visual states for the Button control.

VisualState NameVisualStateGroup NameDescription
NormalCommonStatesThe default state.
MouseOverCommonStatesThe mouse pointer is positioned over the control.
PressedCommonStatesThe control is pressed.
DisabledCommonStatesThe control is disabled.
FocusedFocusStatesThe control has focus.
UnfocusedFocusStatesThe control does not have focus.
ValidValidationStatesThe control uses the Validation class and the Validation.HasError attached property is false.
InvalidFocusedValidationStatesThe Validation.HasError attached property is true has the control has focus.
InvalidUnfocusedValidationStatesThe Validation.HasError attached property is true has the control does not have focus.

The following example shows how to define a ControlTemplate for the Button control.

  <!-- FocusVisual -->

  <Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Border>
            <Rectangle Margin="2"
                       StrokeThickness="1"
                       Stroke="#60000000"
                       StrokeDashArray="1 2" />
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Button -->
  <Style TargetType="Button">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource ButtonFocusVisual}" />
    <Setter Property="MinHeight"
            Value="23" />
    <Setter Property="MinWidth"
            Value="75" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Border TextBlock.Foreground="{TemplateBinding Foreground}"
                  x:Name="Border"
                  CornerRadius="2"
                  BorderThickness="1">
            <Border.BorderBrush>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource BorderLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource BorderDarkColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>

            </Border.BorderBrush>
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource ControlLightColor}"
                              Offset="0" />
                <GradientStop Color="{DynamicResource ControlMediumColor}"
                              Offset="1" />
              </LinearGradientBrush>
            </Border.Background>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.5" />
                  <VisualTransition GeneratedDuration="0"
                                    To="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlPressedColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource PressedBorderDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource PressedBorderLightColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledControlDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames
                        Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledForegroundColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                  Storyboard.TargetName="Border">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource DisabledBorderDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter Margin="2"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              RecognizesAccessKey="True" />
          </Border>
          <ControlTemplate.Triggers>
            <Trigger Property="IsDefault"
                     Value="true">

              <Setter TargetName="Border"
                      Property="BorderBrush">
                <Setter.Value>
                  <LinearGradientBrush StartPoint="0,0"
                                       EndPoint="0,1">
                    <GradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="{DynamicResource DefaultBorderBrushLightBrush}"
                                      Offset="0.0" />
                        <GradientStop Color="{DynamicResource DefaultBorderBrushDarkColor}"
                                      Offset="1.0" />
                      </GradientStopCollection>
                    </GradientBrush.GradientStops>
                  </LinearGradientBrush>

                </Setter.Value>
              </Setter>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

The preceding example uses one or more of the following resources.

  <!--Control colors.-->
  <Color x:Key="WindowColor">#FFE8EDF9</Color>
  <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
  <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

  <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
  <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
  <Color x:Key="DisabledForegroundColor">#FF888888</Color>

  <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
  <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

  <Color x:Key="ControlLightColor">White</Color>
  <Color x:Key="ControlMediumColor">#FF7381F9</Color>
  <Color x:Key="ControlDarkColor">#FF211AA9</Color>

  <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
  <Color x:Key="ControlPressedColor">#FF211AA9</Color>


  <Color x:Key="GlyphColor">#FF444444</Color>
  <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

  <!--Border colors-->
  <Color x:Key="BorderLightColor">#FFCCCCCC</Color>
  <Color x:Key="BorderMediumColor">#FF888888</Color>
  <Color x:Key="BorderDarkColor">#FF444444</Color>

  <Color x:Key="PressedBorderLightColor">#FF888888</Color>
  <Color x:Key="PressedBorderDarkColor">#FF444444</Color>

  <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
  <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

  <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

  <!--Control-specific resources.-->
  <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
  <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
  <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

  <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

  <LinearGradientBrush x:Key="MenuPopupBrush"
                       EndPoint="0.5,1"
                       StartPoint="0.5,0">
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="0" />
    <GradientStop Color="{DynamicResource ControlMediumColor}"
                  Offset="0.5" />
    <GradientStop Color="{DynamicResource ControlLightColor}"
                  Offset="1" />
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                       StartPoint="0,0"
                       EndPoint="1,0">
    <LinearGradientBrush.GradientStops>
      <GradientStopCollection>
        <GradientStop Color="#000000FF"
                      Offset="0" />
        <GradientStop Color="#600000FF"
                      Offset="0.4" />
        <GradientStop Color="#600000FF"
                      Offset="0.6" />
        <GradientStop Color="#000000FF"
                      Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

For the complete sample, see Styling with ControlTemplates Sample.

Style
ControlTemplate
Control Styles and Templates
Control Customization
Styling and Templating
Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Show:
© 2017 Microsoft