WPF自定义控件与样式-自定义按钮（Button）

一、前言

程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。

二、固定样式的按钮

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

2.1 普通按钮-扁平化风格

先看效果：

定义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 图标按钮

先看效果：

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 图标文字混合按钮

效果：

实现代码：

 <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()));

        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控件的扩展功能，如果想要添加动画或者设置图标的位置和边距等，可以自己另外添加依赖属性来扩展。

所有代码已经上传到github：https://github.com/caomfan/WpfDemo.git

WPF自定义控件与样式-自定义按钮（Button）的更多相关文章

WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...
【转】WPF自定义控件与样式(2)-自定义按钮FButton
一．前言.效果图申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等还是先看看效果图吧: 定义Button按钮名称叫FButton,主要是集成了 ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
【转】WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定 ...
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...
WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...
WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Pro ...

随机推荐

link 标签
link标签主要是引用外部文件 rel属性规定当前文档与被链接文档之间的关系 alternate,author,help,icon,licence,next,pingback,prefetch,p ...
Topshelf 一个简化Windows服务开发的宿主服务框架
Topshelf是基于.net框架开发的宿主服务框架.该框架简化了服务的创建,开发人员只需要使用 Topshelf编写一个控制台程序,就能安装为Windows服务.之所以这样原因非常简单:调试一个控 ...
gradle build docker image
前言:其实gradle-docker插件干的事和我们手动制作镜像是一样的,只不过它封装了一些步骤而已. eg:如果我们要将项目打包成镜像,首先我们要写Dockerfile,这是制作镜像的不可或缺的第一 ...
简述TCP的三次握手过程
一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图: 图1 TCP报文格式上图中有几个字段需要重点介绍下: ...
Y2K问题
关于第五章团队和流程 2.6 特工团队中所提到的Y2K问题,第一次接触到这个名词去百度了,它的意思是这样的:year 2K problem,又称千年虫问题.主要原因是早期的软件大多以两位数字来记录年 ...
python全栈开发-Day7 字符编码总结
python全栈开发-Day7 字符编码总结一.字符编码总结 1.什么是字符编码人类的字符--------->翻译--------->数字翻译的过程遵循的标准即字符编码(就是一个字符 ...
shiro授权
一.shiro-permission.ini shiro-permission.ini里面的内容相当于在数据库 #用户 [users] #用户zhang的密码是123,此用户具有role1和role2 ...
Java中为什么long能自动转换成float类型
刷题时候看到一个float和long相互转换的问题,float向long转换的时候不会报错,一个4个字节一个8个字节,通过baidu找到了答案. 下面转载自http://blog.csdn.net/s ...
spring Boot+spring Cloud实现微服务详细教程第二篇
上一篇文章已经说明了一下,关于spring boot创建maven项目的简单步骤,相信很多熟悉Maven+Eclipse作为开发常用工具的朋友们都一目了然,这篇文章主要讲解一下,构建spring bo ...
笔记：Spring Cloud Feign 其他配置
请求压缩 Spring Cloud Feign 支持对请求与响应进行GZIP压缩,以减少通信过程中的性能损耗,我们只需要通过下面二个参数设置,就能开启请求与响应的压缩功能,yml配置格式如下: fei ...