WPF有关控件和模板样式设计的微软官方文档

说明

如果你正在使用WPF开发应用程序，相信这篇博客会对你有用。希望你能认真的阅读

正文

此文主要以Button为例进行介绍此文档的组成部分。

Button Parts

Button控件没有任何命名的部件

`Button` 状态

这里列出了Button控件的视觉状态列表 | VisualState Name | VisualStateGroup Name | 描述 | | ---- | ---- | ---- | | Normal | CommonStates | 默认状态 | | MouseOver | CommonStates | 鼠标指针定位到此空间上的状态 | | Pressed | CommonStates | 控件被按下 | | Disabled | CommonStates | 控件不可用 | | Focused | FocusStates | 控件获得焦点 | | Unfocused | FocusStates | 控件未获得焦点 | | Valid | ValidationStates | The control uses the Validation class and the Validation.HasError attached property is false. | InvalidFocused | ValidationStates | The Validation.HasError attached property is true and the control has focus. | InvalidUnfocused | ValidationStates | The Validation.HasError attached property is true and the control does not have focus.

`Button` 控件模板示例

<!-- 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>

上面示例中用到的一些资源。

<!--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>

此链接为Button的样式和模板的页面，如果想要看其他控件的样式和模板设置，可以从此页面的左侧菜单中进行选择相关控件的样式和模板内容。 https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/button-styles-and-templates?view=netframeworkdesktop-4.8

来源：oschina

链接：https://my.oschina.net/sesametech/blog/4748937

标签

validation