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

最新推荐文章于 2024-08-16 18:04:50 发布

一阵没来由的风

最新推荐文章于 2024-08-16 18:04:50 发布

阅读量1.1k

点赞数 1

分类专栏： WPF 控件设计艺术文章标签： WPF 背景按钮按钮设计模板样式

本文链接：https://blog.csdn.net/youyomei/article/details/112389241

版权

WPF 控件设计艺术专栏收录该内容

7 篇文章 88 订阅

订阅专栏

三、按钮篇

（二）带背景按钮-BackdropButton

按照前面的步骤，创建一个按钮的样式模板，如下图所示。
找到我们要设计的带有背景效果按钮。
在窗体中新建一个按钮，然后按照之前的方式创建模板
添加颜色资源、设置模板、设置触发器，代码如下。

   <SolidColorBrush x:Key="Button.Static.Background" Color="#FFC3C3C3"/>
          <SolidColorBrush x:Key="Button.Static.Border" Color="#FFC3C3C3"/>
          <SolidColorBrush x:Key="Button.Static.Foreground" Color="Black"/>
          <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFC3C3C3"/>
          <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF6C6C6C"/>
          <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FF6C6C6C"/>
          <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF6C6C6C"/>
          <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFC3C3C3"/>
          <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFC3C3C3"/>
          <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
          <Style x:Key="BackDropButton" TargetType="{x:Type Button}">
              <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
              <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
              <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
              <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
              <Setter Property="BorderThickness" Value="2"/>
              <Setter Property="HorizontalContentAlignment" Value="Center"/>
              <Setter Property="VerticalContentAlignment" Value="Center"/>
              <Setter Property="FontWeight" Value="Regular"/>
              <Setter Property="FontSize" Value="13"/>
              <Setter Property="Padding" Value="5"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type Button}">
                          <Border x:Name="border" Background="{TemplateBinding Background}" 
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  BorderBrush="{TemplateBinding BorderBrush}" 
                                  SnapsToDevicePixels="true">
                              <ContentPresenter x:Name="contentPresenter" 
                                                Focusable="False"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Margin="{TemplateBinding Padding}"
                                                RecognizesAccessKey="True" 
                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                          </Border>
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsDefaulted" Value="true">
                                  <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                              </Trigger>
                              <Trigger Property="IsMouseOver" Value="true">
                                  <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                              </Trigger>
                              <Trigger Property="IsPressed" Value="true">
                                  <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                                  <Setter Property="TextElement.FontWeight" TargetName="contentPresenter" Value="Bold"/>
                              </Trigger>
                              <Trigger Property="IsEnabled" Value="false">
                                  <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                  <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                  <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                              </Trigger>
                          </ControlTemplate.Triggers>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>