WPF设置Button的Style

最新推荐文章于 2024-10-07 13:20:12 发布
最新推荐文章于 2024-10-07 13:20:12 发布
阅读量1.3w 收藏 33
点赞数 6
分类专栏： WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014453443/article/details/89703612
版权

扣扣技术交流群：460189483

一、前言

程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。

二、固定样式的按钮

固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。

2.1 普通按钮-扁平化风格

先看效果：

来自苏守坤的CSDN

 

定义Button的样式，详见代码：

<Style x:Key="BtnInfoStyle" TargetType="Button">
   <Setter Property="Width" Value="70"/>
   <Setter Property="Height" Value="25"/>
   <Setter Property="Foreground" Value="White"/>
   <Setter Property="BorderThickness" Value="0"/>
   <Setter Property="Background" Value="#43a9c7"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
       <TextBlock Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="border" Property="Background" Value="#2a89a4"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
</Style>

引用方法：

<Grid Background="White">
  <StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Top">
   <Button Style="{StaticResource BtnInfoStyle}" Content="信息" Margin="5 0"/>
</Grid>

上述代码实现了Button按钮的扁平化样式，如果你想调整颜色风格，通过修改Background的值可实现默认颜色，鼠标经过颜色以及鼠标按下颜色。

2.2 图标按钮

先看效果：

来自苏守坤的CSDN

Button样式的代码和扁平化Button差不多，只是把TextBlock控件替换成了Image控件，另外需要设置Button默认的背景色为透明。废话不多说看代码：

<Style x:Key="BtnImageStyle1" TargetType="Button">
   <Setter Property="Cursor" Value="Hand"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
       <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Images/button1.png" Stretch="None"/>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
       <Trigger Property="IsPressed" Value="True">
        <Setter TargetName="Img" Property="Source" Value="/Images/button1.png"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

这里的button1.png需要自己准备图片资源，IsMouseOver和IsPressed的图片资源可自己替换，替换之后能有更丰富的效果呈现。

2.3 图标文字混合按钮

效果：

来自苏守坤的CSDN

实现代码：

<Style x:Key="BtnImgTxtStyle1" TargetType="Button">
  <Setter Property="Foreground" Value="#555"/>
  <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="Button">
      <Border>
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Image Source="Images/adshut.png" Stretch="None"/>
        <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </StackPanel>
      </Border>
      <ControlTemplate.Triggers>
       <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="#333333" TargetName="Txt"/>
       </Trigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

2.4 文字按钮和2.3中的图标文字按钮样式差不多，只需要把Image控件去掉就行。

三、复用性高的按钮

要想实现复用性高的按钮，就必须新建自定义控件。下面这个实例通过自定义控件实现上述所有效果，并且可以随意更改风格。

首先在项目中右键-添加-新建项-自定义控件。

新建自定义控件之后，添加依赖属性。代码如下：

public class ButtonEx : Button
 {
  static ButtonEx()
  {
   DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));
  }
 
 
  public ButtonType ButtonType
  {
   get { return (ButtonType)GetValue(ButtonTypeProperty); }
   set { SetValue(ButtonTypeProperty, value); }
  }
 
  public static readonly DependencyProperty ButtonTypeProperty =
   DependencyProperty.Register("ButtonType", typeof(ButtonType), typeof(ButtonEx), new PropertyMetadata(ButtonType.Normal));
 
 
  public ImageSource Icon
  {
   get { return (ImageSource)GetValue(IconProperty); }
   set { SetValue(IconProperty, value); }
  }
 
  public static readonly DependencyProperty IconProperty =
   DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ButtonEx), new PropertyMetadata(null));
 
 
  public CornerRadius CornerRadius
  {
   get { return (CornerRadius)GetValue(CornerRadiusProperty); }
   set { SetValue(CornerRadiusProperty, value); }
  }
 
  public static readonly DependencyProperty CornerRadiusProperty =
   DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ButtonEx), new PropertyMetadata(new CornerRadius(0)));
 
 
  public Brush MouseOverForeground
  {
   get { return (Brush)GetValue(MouseOverForegroundProperty); }
   set { SetValue(MouseOverForegroundProperty, value); }
  }
 
  public static readonly DependencyProperty MouseOverForegroundProperty =
   DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 
 
  public Brush MousePressedForeground
  {
   get { return (Brush)GetValue(MousePressedForegroundProperty); }
   set { SetValue(MousePressedForegroundProperty, value); }
  }
 
  public static readonly DependencyProperty MousePressedForegroundProperty =
   DependencyProperty.Register("MousePressedForeground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 
 
  public Brush MouseOverBorderbrush
  {
   get { return (Brush)GetValue(MouseOverBorderbrushProperty); }
   set { SetValue(MouseOverBorderbrushProperty, value); }
  }
 
  public static readonly DependencyProperty MouseOverBorderbrushProperty =
   DependencyProperty.Register("MouseOverBorderbrush", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 
 
  public Brush MouseOverBackground
  {
   get { return (Brush)GetValue(MouseOverBackgroundProperty); }
   set { SetValue(MouseOverBackgroundProperty, value); }
  }
 
  public static readonly DependencyProperty MouseOverBackgroundProperty =
   DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 
 
  public Brush MousePressedBackground
  {
   get { return (Brush)GetValue(MousePressedBackgroundProperty); }
   set { SetValue(MousePressedBackgroundProperty, value); }
  }
 
  public static readonly DependencyProperty MousePressedBackgroundProperty =
   DependencyProperty.Register("MousePressedBackground", typeof(Brush), typeof(ButtonEx), new PropertyMetadata());
 }
 
 public enum ButtonType
 {
  Normal,
  Icon,
  Text,
  IconText
 }

为不同类型按钮设置样式，代码如下：



<Style TargetType="{x:Type local:ButtonEx}">
  <Style.Triggers>
   <Trigger Property="ButtonType" Value="Normal">
    <Setter Property="Background" Value="#43a9c7"/>
    <Setter Property="MouseOverBackground" Value="#2f96b4"/>
    <Setter Property="MousePressedBackground" Value="#2a89a4"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="MouseOverForeground" Value="White"/>
    <Setter Property="MousePressedForeground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border x:Name="border" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True">
        <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter TargetName="border" Property="Background" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="txt" Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="border" Property="BorderBrush" Value="{Binding MouseOverBorderbrush,RelativeSource={RelativeSource TemplatedParent}}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter TargetName="border" Property="Background" Value="{Binding MousePressedBackground,RelativeSource={RelativeSource TemplatedParent}}"/>
         <Setter TargetName="txt" Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}"/>
          
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="Icon">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
        <Image x:Name="Img" VerticalAlignment="Center" HorizontalAlignment="Center" Source="{TemplateBinding Icon}" Stretch="None"/>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Opacity" Value="0.8"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Opacity" Value="0.9"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="Text">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground" Value="#002c99"/>
    <Setter Property="MouseOverForeground" Value="#FF2c99"/>
    <Setter Property="MousePressedForeground" Value="#002c99"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="txt"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
   <Trigger Property="ButtonType" Value="IconText">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Foreground" Value="#555"/>
    <Setter Property="MouseOverForeground" Value="#555"/>
    <Setter Property="MousePressedForeground" Value="#555"/>
    <Setter Property="Template">
     <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ButtonEx}">
       <Border>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
         <Image Source="{TemplateBinding Icon}" Stretch="None"/>
         <TextBlock x:Name="Txt" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </StackPanel>
       </Border>
       <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Foreground" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
         <Setter Property="Foreground" Value="{Binding MousePressedForeground,RelativeSource={RelativeSource TemplatedParent}}" TargetName="Txt"/>
        </Trigger>
       </ControlTemplate.Triggers>
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Trigger>
  </Style.Triggers> 
 </Style>

然后就可以引用该控件了：

<Grid>
  <WrapPanel>
   <local:ButtonEx Content="信息" Width="75" Height="25" Margin="10" ButtonType="Normal"/>
   <local:ButtonEx Icon="/Images/button1.png" Margin="10" ButtonType="Icon"/>
   <local:ButtonEx Content="文字按钮" Margin="10" ButtonType="Text"/>
   <local:ButtonEx Content="图文按钮" Icon="/Images/adshut.png" Margin="10" ButtonType="IconText"/>
  </WrapPanel>
 </Grid>

效果如下：

至此已经完成Button控件的扩展功能，如果想要添加动画或者设置图标的位置和边距等，可以自己另外添加依赖属性来扩展。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家的支持。

苏守坤
关注
专栏目录
【愚公系列】2023年10月 WPF控件专题 Button控件详解
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF Button Style 设定WPF BUTTON的 Style
tech_vina的专栏
08-26 1323
//设定
wpf button style IsMouseOver
david9779的博客
09-18 876
<Style x:Key="workButtonStyle" TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="False"> ...
C# WPF打造美观自定义按钮样式教程
最新发布
weixin_36431814的博客
10-07 1643
本文还有配套的精品资源，点击获取 简介：本教程介绍了如何在C# WPF中创建自定义按钮样式以增强用户界面的美观性和交互性。内容包括了解WPF的样式和模板系统，定义按钮的视觉属性和行为，以及如何通过XAML实现渐变背景、图像背景及不同状态下的样式变化。教程逐步引导开发者完成一个漂亮按钮样式的创建，并应用到按钮控件上，从而满足各种设计需求。 1. WPF样式和模板系统概念...
VC++ MFC 按钮的全部样式Style
weixin_34185560的博客
07-31 389
Button Styles BS_3STATE 与复选框一样本样式按钮可被单击变暗。变暗状态通常用于指示本样式的按键正处于禁用状态。   BS_AUTO3STATE   与三状态的复选框一样当用户选中它本按钮样式状态外观会改变。   BS_AUTOCHECKBOX   与复选框一样，除了在用户点控件后会出现一个选中标志，当用户在下一次点选时，该标志会消失。   BS_AUTORADI...
WPF之Button控件应用
Lassewang的成长历程
11-08 1万+
测试环境: Windows xp + Microsoft Visual Studio 2010 + Microsoft Expression Blend4 + .Net4.0 具体应用: 1. 创建透明的Button   2. 创建带图片的按钮 3. 鼠标移动变色的按钮     1) 首先设置
WPF按钮style之BlueButton
WuzhiBin0926的博客
05-20 347
<Style x:Key="BlueButton" TargetType="{x:Type Button}" > <Style.Resources> <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint="0.5,1" Start...
WPFButton样式
10-09
本资源“WPFButton样式”提供了6种不同的按钮样式，帮助开发者实现界面的美化。 1. **基础样式**： WPF 的基础按钮样式是最简单、最直接的，通常包含默认的背景色、边框和文本。在XAML中，可以通过`<Button>`标签...
wpf的button样式
02-09
下面将详细解析如何设置一个具有内外发光效果，并且在鼠标移动、点击、离开时会产生不同效果的WPF Button。 #### 一、基本样式定义 在XAML代码中，我们首先定义了一个`Style`，其`TargetType`为`Button`类型，并...
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮...Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
wpf 实现按钮style
12-03
wpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮stylewpf 实现按钮style
WPF Button 样式
weixin_33753003的博客
01-08 1038
WPF CheckBox 自定义样式 给Button设置ToolTip &lt;Style TargetType="{x:Type Button}" x:Key="DefaultButton"&gt; &lt;Setter Property="Foreground" Value="White"/&gt; &lt;Set
自制WPF的Button的Style，以及一些变化方案
weixin_30872733的博客
03-12 168
在园子里潜水了半年多了，终于写了第一篇随笔，希望不是太丢人现眼.... 然后，斗胆发在园子的首页上，要是大家拍砖过于猛烈....我就立刻撤下来..... 自制的WPF中Button的Style 最近做的一个项目，主要是关注用户体验，所以视图层用到了WPF来增加用户使用时候的新鲜感，自然传统的控件样式是不能令人满意的，所以就自己做了一个Button的Style.... 这个Style...
WPF自定义模板--Button
代码改变世界
07-02 740
WPF自定义模板--Button
WPF 自定义各类按钮样式
热门推荐
韬光养晦
03-15 1万+
WPF 自定义按钮样式 Xaml代码： <Window x:Class="WPF0315b.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF Button按钮Style渐变样式
qq_40131199的博客
10-09 1411
WPF中Button 按钮Style样式
Button和ButtnStyle
weixin_44730555的博客
04-11 203
Button import QtQuick 2.2 import QtQuick.Window 2.2 import QtQuick.Controls 1.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Rectangle { width:...
WPF Tips: Button style一例
辛亚平的专栏
08-06 2664
应用示例: <Button Grid.Column="2" Style="{StaticResource TransparentButton}" Visibility="{Binding Path=ShowRemoveButton, Converter={StaticResource VisibilityConverter}, Mode=OneWay}" Command="{
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值