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

最新推荐文章于 2024-09-24 16:34:40 发布
最新推荐文章于 2024-09-24 16:34:40 发布
阅读量4k 收藏 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
关注
专栏目录
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" ...
自定义Button样式
weixin_34392906的博客
03-02 276
网上实现自定义Button样式的方法有多种，有的自己重写CustomButton类，继承TextView，你可以查看Button.java(http://code.google.com/p/droiddraw/source/browse/trunk/DroidDraw/src/org/droiddraw/widget/Button.java?r=141)及相应的文章，这样做个...
WPF 控件模板的基本概念
最新发布
qq_44206824的博客
09-24 322
假设我们想要创建一个带有圆角边框的按钮，并且当鼠标悬停在按钮上时背景颜色会发生变化。在App.xaml</Border></Trigger>Border元素用于创建按钮的外观，包括背景色、边框和圆角。用于显示按钮的内容（如文本或图标）。Triggers用于定义当鼠标悬停在按钮上时，背景颜色变为浅蓝色。
WPF自定义Button控件
11-05
实现Vista风格的一些控件，里边包含几种类型，详情可下载
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。 二、固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
WPF自定义模板--Button
代码改变世界
07-02 711
WPF自定义模板--Button
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
C#自定义控件---自定义水晶按钮控件完整源码2019
02-27
总的来说，通过学习"C#自定义控件---自定义水晶按钮控件完整源码2019"，开发者可以掌握自定义控件的设计原理和实践技巧，提高Windows Forms或WPF应用程序的界面质量和用户体验。同时，对控件的深入理解和实践也能为...
C#自定义控件---自定义水晶按钮控件完整源码【201903】
03-12
5. **样式和模板**：自定义控件还可以利用样式（Style）和模板（Template）来进一步定义其外观和布局。在WPF环境中，这可以通过XAML来实现，但在Windows Forms中，可能需要手动绘制和布局元素。 6. **性能优化**：...
WPF自定义控件（按钮文本框组合框等等）
08-27
在Windows Presentation Foundation (WPF) 中，自定义控件是一种扩展和定制用户界面元素的方式，以便更好地满足应用程序的独特需求。WPF提供了丰富的内置控件，但有时这些控件可能无法完全满足我们的设计或功能需求...
wpf 自定义Button按钮
weixin_34040079的博客
06-19 371
创建ButtonEx类 public class ButtonEx : Button { static ButtonEx() { DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof...
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
WPF自定义图片按钮[ImageButtonWPF]
02-09
WPF自定义图片按钮[ImageButtonWPF] 更多资源： http://cleopard.download.csdn.net
wpf的button样式
02-09
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
WPF 自定义IconButton
weixin_34290352的博客
09-04 534
自定义一个按钮控件 按钮控件很简单，我们在项目中有时把样式封装起来，添加依赖属性，也是为了统一。 这里举例，单纯的图标控件怎么设置 1、UserControl界面样式 <UserControl x:Class="WpfApplication12.IconButton" xmlns="http://schemas.m...
WPF Button 样式
weixin_33753003的博客
01-08 1036
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控件
weixin_46404873的博客
01-20 443
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 Button自定义样式
qq_34539740的博客
02-23 1822
我们制作一个鼠标经过改变背景色的Button。 点解解决方案，为WPF窗体程序添加一个Wpf自定义控件库CustomBtnLibrary。 首先我们定义的一个类我们叫它cButton，用依赖属性注册一个MouseOverBackground. public class cButton : Button { public static readonly Dependency
WPF自定义控件：扁平化风格普通按钮与样式实现
本文将深入探讨WPF（Windows Presentation Foundation）中自定义控件和样式的应用，以创建个性化的按钮（Button）。首先，我们了解到在程序开发中，常见的按钮类型包括普通按钮、图标按钮、文字按钮和图片文字混合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值