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

三、按钮篇

(二)带背景按钮-BackdropButton

  1. 按照前面的步骤,创建一个按钮的样式模板,如下图所示。
    在这里插入图片描述
    在这里插入图片描述

  2. 找到我们要设计的带有背景效果按钮。
    在这里插入图片描述

  3. 在窗体中新建一个按钮,然后按照之前的方式创建模板
    在这里插入图片描述

  4. 添加颜色资源、设置模板、设置触发器,代码如下。

   <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>
  1. 效果
    在这里插入图片描述

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页