WPF 控件设计艺术[按钮篇一]

三、按钮篇

（一）纯文本按钮-TextOnlyButton

• 创建一个Button按钮，设置宽高
• 右键设计窗口中的按钮，找到编辑模板的编辑副本，并点击它。如下图所示。

• 此时会弹出一个对话框，提示我们选择创建资源名称和定义位置，如下图所示。
  
  

• 我们可以不用管，但为了方便，我们设置一下名称TextOnlyButton，然后点击确定。
  

• 此时，会在我们MainWindow中的Resources中创建一些资源信息，如下图所示。

• 我们可以简单将上面的资源文件划分为三类，如下图所示，分别是：焦点样式、颜色资源以及纯文本按钮样式定义。

• 在开始之前，我们先确定下，我们文本按钮的样式。首先，我们参考Windows Settings中的蓝色文本，如下图所示。

• 让我们开始纯文本按钮样式设计吧

  • 定义颜色画刷，添加自己需要的画刷定义

     		<SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF208EEA"/>
          <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FF262829"/>
          <SolidColorBrush x:Key="Button.Pressed.Foreground" Color="#FF5C6061"/>
          <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
  

  • 设置一些默认样式

          <Style x:Key="TextOnlyButton" TargetType="{x:Type Button}">
              <Setter Property="Background" Value="Transparent"/>
              <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
              <Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
              <Setter Property="BorderThickness" Value="0"/>
              <Setter Property="HorizontalContentAlignment" Value="Center"/>
              <Setter Property="VerticalContentAlignment" Value="Center"/>
              <Setter Property="Cursor" Value="Hand"/>
              <Setter Property="Padding" Value="5"/>
          </Style>
  

  • 设置模板Template和触发器Triggers

              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type Button}">
                              <ContentPresenter x:Name="contentPresenter" 
                                            Focusable="False" 
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Margin="{TemplateBinding Padding}" 
                                            RecognizesAccessKey="True" 
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsDefaulted" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                              </Trigger>
                              <Trigger Property="IsMouseOver" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/>
                              </Trigger>
                              <Trigger Property="IsPressed" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Pressed.Foreground}"/>
                              </Trigger>
                              <Trigger Property="IsEnabled" Value="false">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                              </Trigger>
                          </ControlTemplate.Triggers>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
  

  • 上面为了简化模板控件的使用，去掉了Border元素。下面贴上完整的样式代码定义。

  	   <Style x:Key="FocusVisual">
              <Setter Property="Control.Template">
                  <Setter.Value>
                      <ControlTemplate>
                          <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
          <SolidColorBrush x:Key="Button.Static.Foreground" Color="#FF208EEA"/>
          <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="#FF262829"/>
          <SolidColorBrush x:Key="Button.Pressed.Foreground" Color="#FF5C6061"/>
          <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
          <Style x:Key="TextOnlyButton" TargetType="{x:Type Button}">
              <Setter Property="Background" Value="Transparent"/>
              <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
              <Setter Property="Foreground" Value="{StaticResource Button.Static.Foreground}"/>
              <Setter Property="BorderThickness" Value="0"/>
              <Setter Property="HorizontalContentAlignment" Value="Center"/>
              <Setter Property="VerticalContentAlignment" Value="Center"/>
              <Setter Property="Cursor" Value="Hand"/>
              <Setter Property="Padding" Value="5"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type Button}">
                              <ContentPresenter x:Name="contentPresenter" 
                                            Focusable="False" 
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Margin="{TemplateBinding Padding}" 
                                            RecognizesAccessKey="True" 
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsDefaulted" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                              </Trigger>
                              <Trigger Property="IsMouseOver" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.MouseOver.Foreground}"/>
                              </Trigger>
                              <Trigger Property="IsPressed" Value="true">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Pressed.Foreground}"/>
                              </Trigger>
                              <Trigger Property="IsEnabled" Value="false">
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                              </Trigger>
                          </ControlTemplate.Triggers>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
  

  • 使用样式与效果

  <Grid>
      <StackPanel >
          <Button Style="{DynamicResource TextOnlyButton}" HorizontalAlignment="Center" Content="夜间模式设置"/>
          <Button Style="{DynamicResource TextOnlyButton}" Padding="0 5" HorizontalAlignment="Center" Content="Windows HD Color 设置"/>
          <Button Style="{DynamicResource TextOnlyButton}" Padding="5 0" HorizontalAlignment="Center" Content="高级缩放设置"/>
          <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" Content="获取帮助"/>
          <Button Style="{DynamicResource TextOnlyButton}" Padding="10 0" HorizontalAlignment="Center" IsEnabled="False"  Content="提供反馈"/>
  
          <Button Style="{DynamicResource TextOnlyButton}" FontSize="20" HorizontalAlignment="Center" Content="连接到无线显示器"/>
          <Button Style="{DynamicResource TextOnlyButton}" FontSize="14" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
          <Button Style="{DynamicResource TextOnlyButton}" FontSize="13" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
          <Button Style="{DynamicResource TextOnlyButton}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
          <Button Style="{DynamicResource TextOnlyButton}" FocusVisualStyle="{x:Null}" FontSize="12" HorizontalAlignment="Center" Content="了解更多关于 Windows HD Color 的信息"/>
      </StackPanel>
  </Grid>
  

• 最后需要说明下，如果我们不想我们的按钮控件在有焦点时，按住ALT键出现以下虚线框，我们可以使用*FocusVisualStyle="{x:Null}"*进行设置（也可以在样式中默认定义，目前实例中我们给他设定了一个虚线边框），也可以自定义成自己需要的样式，只需要重新设计样式中的FocusVisual资源就好了。

---

积跬步以至千里:) (:一阵没来由的风
哔哩哔哩同步视频 或者搜索用户：一阵没来由的风