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

最新推荐文章于 2024-05-23 19:04:56 发布
最新推荐文章于 2024-05-23 19:04:56 发布
阅读量3.8k 收藏 27
点赞数 7
分类专栏： 关于程序 文章标签： wpf ui
原文链接：https://www.cnblogs.com/xiaomingg/p/8699125.html
版权

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

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

转至：https://www.cnblogs.com/xiaomingg/p/8699125.html

kingwebo'sZone
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF：自定义控件之Button-自定义样式，共用样式
06-26 1万+
WPF 中 最好的特性就是我们自己可以自定义控件样式，小到一个Button按钮，大到DataGrid或者TreeView控件。不过要想知道如何定义样式，需要我们了解控件的特性，结构。也就是控件由什么构成的。WPF中的控件基本分为 内容控件与条目控件。内容控件可以理解成用于承载内容的控件。WPF 的内容对象 为Object类型的，可以是一个string类型的字符串或者是一个Image，甚至可以是另一
WPF自定义Button控件实现圆角
小周爱学习的博客
03-28 7579
Button实现圆角很简单只需Button ContentTemplate修改样式模板就可以实现了。但是这样无法达到复用，比如另一个按钮设计的不需要圆角样式又用的同一套怎么办？当然可以在把样式复制下然后改一个样式名字修改下样式就可以了。但是这样两份样式几乎一样，只不过一个圆角一个不是。可以通过自定义Button控件给Button新增一个依赖属性完成这个功能。首先定义一个类继承Button控件,然后...
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。 二、固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
【前端系列】20种 Button 样式
爱生活爱学习。
04-30 2126
在前端开发中，按钮（Button）是网页交互中常见的元素之一，其样式的设计直接影响着用户体验和界面美观度。本文将介绍20种不同的 Button 样式，旨在帮助前端开发者丰富按钮设计思路，提高用户界面的吸引力和可用性。
wpf自定义按钮样式
最新发布
cjh16606260986的博客
05-23 370
来定义当鼠标悬停和按钮被按下时的视觉变化。你可以根据需要自定义。修改border元素的背景色为LightBlue。修改border元素的背景色为DarkBlue。在WPF中，自定义按钮样式可以通过创建一个。首先，在你的WPF项目资源字典中定义按钮的。这个例子中的按钮模板包括一个。来定义按钮的外观，以及。
WPF:自定义按钮模板
weixin_44899642的博客
10-25 1179
自定义封装的按钮属性可写在<Button.Template>中Background="{TemplateBinding Background}"中的TemplateBinding代表使用按钮本身所使用的背景颜色 不在样式内修改背景颜色<Button Width="300" Height="100" Content="自定义按钮" Background="Bisque" FontSize="23" Foreground="Orchid">
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控件,包含图片文字，图片，文字三种形态。
yhl520o的博客
08-14 1309
WPF自定义Button控件,包含了三种形态，纯文字Button，纯图片Button，以及图片文字都有的Button.
15、wpf之button样式小记
roujian0985的博客
06-22 1283
Button算是开发中用到的比较多的控件了，最开始使用原生的样式，长方形的样子，然后设置下Button的Content属性。随着学习的深入，需要去设置下Button的背景色，再往后就需要改下Button的模板来满足更高的需求设计......
WPF的按钮样式
weixin_43497445的博客
06-09 1245
1-设置圆角第一种。
WPF 控件专题 Button样式模板
^@^lemon tea^@^
07-16 1798
WPF 控件专题 Button样式模板
WPF自定义Button控件
11-05
实现Vista风格的一些控件，里边包含几种类型，详情可下载
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
wpf的button样式
02-09
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
WPF自定义控件（按钮文本框组合框等等）
08-27
在Windows Presentation Foundation (WPF) 中，自定义控件是一种扩展和定制用户界面元素的方式，以便更好地满足应用程序的独特需求。WPF提供了丰富的内置控件，但有时这些控件可能无法完全满足我们的设计或功能需求...
C#自定义控件---自定义水晶按钮控件完整源码2019
02-27
总的来说，通过学习"C#自定义控件---自定义水晶按钮控件完整源码2019"，开发者可以掌握自定义控件的设计原理和实践技巧，提高Windows Forms或WPF应用程序的界面质量和用户体验。同时，对控件的深入理解和实践也能为...
WPF如何自定义TabControl控件样式示例详解
08-27
WPF自定义TabControl控件样式示例详解 在 WPF 应用程序中，TabControl控件是非常常用的控件之一。...通过使用UniformGrid和自定义控件样式，我们可以轻松地实现TabControl标题的居中、平均分布和关闭等功能。
WPF 自定义Button样式
zls365365的博客
03-22 1354
前面几篇文章，实现了窗口样式的修改，下面开始往这个窗口里面添加各种控件，当然，所有控件都会使用自定义样式，代码也会在下方详细地列出。窗口模板的git地址：https://github.co...
WPF学习（二）：自定义Button控件
weixin_46404873的博客
01-20 398
WPF学习（二）：自定义Button控件 将主窗口设置为纯透明： Background="{x:Null}" WindowStyle="None" AllowsTransparency="True" 自定义圆Button： xaml文件中： <Window.Resources> <ControlTemplate TargetType="Button" x:Key="OneBt"> <Border x:Name="OneBorder" Corn
wpf自定义控件demo
12-08
WPF自定义控件是一种通过自定义代码和样式来创建全新控件的技术。下面是一个关于WPF自定义控件的简单Demo。 首先，我们可以选择创建一个常见的自定义控件，例如一个圆形按钮。我们可以使用C#代码创建一个继承自...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值