15、wpf之button样式小记

已于 2022-06-22 16:07:44 修改
阅读量1.2k 收藏 3
点赞数
分类专栏： WPF 文章标签： wpf button 模板
于 2022-06-22 16:04:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roujian0985/article/details/125257144
版权

前言：Button算是开发中用到的比较多的控件了，最开始使用原生的样式，长方形的样子，然后设置下Button的Content属性。随着学习的深入，需要去设置下Button的背景色，再往后就需要改下Button的模板来满足更高的需求设计。

一、简介

可以看到，Button继承至ContentControl控件， Button有个Content属性而这个Content可以是多种控件形式，查看Button的模板可以看到，用来承载这个内容的是一个ContentPresenter控件。

通过官网可以看到这个ContentPresenter类的继承关系 

二、Background

简单的如下

<Button Background="AliceBlue"/>

可以看到，这个Background属性类型是Brush，因此我们可以通过应用不同的Brush来改变Button的Background，从而使Background更加丰富。

官网中对Brush的注解，Brush有多个继承者，都可以用

2.1  LinearGradientBrush

<Button Width="60" Height="60">
    <Button.Background>
        <LinearGradientBrush EndPoint="0.851,0.838" StartPoint="0.115,0.169">
            <GradientStop Color="#FFA21212" Offset="0"/>
            <GradientStop Color="#FFF8C906" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>

2.2 RadialGradientBrush

<Button Width="60" Height="60">
    <Button.Background>
        <RadialGradientBrush>
            <GradientStop Color="#FFA21212" Offset="1"/>
            <GradientStop Color="#FFF8C906" Offset="0"/>
        </RadialGradientBrush>
    </Button.Background>
</Button>

2.3 ImageBrush 

            <Button Width="60" Height="60">
                <Button.Background>
                    <ImageBrush ImageSource="/项目.png"/>
                </Button.Background>
            </Button>

2.4 DrawingBrush 

            <Button Width="60" Height="60">
                <Button.Background>
                    <DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
                        <DrawingBrush.Drawing>
                            <GeometryDrawing Brush="Red">
                                <GeometryDrawing.Geometry>
                                    <GeometryGroup>
                                        <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
                                        <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
                                    </GeometryGroup>
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="10">
                                        <Pen.Brush>
                                            <LinearGradientBrush>
                                                <GradientStop Offset="0.0" Color="Black" />
                                                <GradientStop Offset="1.0" Color="Gray" />
                                            </LinearGradientBrush>
                                        </Pen.Brush>
                                    </Pen>
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Button.Background>
            </Button>

2.5 VisualBrush

            <Button Width="60" Height="60">
                <Button.Background>
                    <VisualBrush>
                        <VisualBrush.Visual>
                            <StackPanel Background="White">
                                <Rectangle Width="25" Height="25" Fill="Orange" Margin="6" />
                                <TextBlock FontSize="10pt" Margin="2">BrawDraw</TextBlock>
                                <Button Margin="10">Button</Button>
                            </StackPanel>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Button.Background>
            </Button>

二、Content

2.1 字符串

<!--Create a Button with a string as its content.-->
<Button Content="1111111111" Height="60" Width="60"/>
<Button>This is string content of a Button</Button>

2.2  DateTime object

<!--Create a Button with a DateTime object as its content.-->
<Button xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <sys:DateTime>2004/3/4 13:6:55</sys:DateTime>
</Button>

2.3 UIElement

<!--Create a Button with a single UIElement as its content.-->
<Button>
  <Rectangle Height="40" Width="40" Fill="Blue"/>
</Button>

2.4 panel

<!--Create a Button with a panel that contains multiple objects 
as its content.-->
<Button>
  <StackPanel>
    <Ellipse Height="40" Width="40" Fill="Blue"/>
    <TextBlock TextAlignment="Center">Button</TextBlock>
  </StackPanel>
</Button>

2.5 说明

Because the Content property is of type Object, there are no restrictions on what you can put in a ContentControl. The Content is displayed by a ContentPresenter, which is in the ControlTemplate of the ContentControl. Every ContentControl type in WPF has a ContentPresenter in its default ControlTemplate. 

由于Content属性的类型是Object，因此对可以放入的内容ContentControl没有限制。该Content属性通过ContentPresenter显示，而这个ContentPresenter存在于ContentControl的ControlTemplate属性中。WPF中的每一个ContentControl类型控件都有一个ContentPresenter属性，默认存在ControlTemplate中。

三、外观

The ContentPresenter uses the following logic to display the Content (ContentPresenter就是用来显示Content的,下面是显示逻辑):

3.1 原生样式

        <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background1}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border1}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 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.Background1}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border1}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background1}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border1}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background1}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border1}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground1}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

有关外观的设计就在ControlTemplate属性上，这个原生的没做什么改变，如果设置Content为string，就会像上面最后一条一样，Content调用ToString去转换并创建个TextBlock去承载这个转换后的string。

3.2 UIElement

使用image作为Content的元素，上面第四条所说的。

<Button Height="60" Width="60">
    <Image Source="/项目.png"/>
</Button>

3.2 修改ControlTemplate

原生的样式，边框很明显，这时就需要修改下ControlTemplate了

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <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="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Image Source="/Resource/send.png" Margin="0 10 0 0"/>
                            <Border x:Name="border"  BorderThickness="1" SnapsToDevicePixels="true" Grid.Row="1">
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                        <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}"/>
                            </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>

 我们把ControlTemplate摘出来看看，原样式中使用一个Border包裹一个ContentPrensenter。

修改后使用了Grid作为ContentPresenter的父容器。其实这里分了两层，一层高度是0，其实就一层。

这里还有个问题，就是鼠标移动上去后，会有个背景，不好看

这个背景是在 ControlTemplate.Triggers中设置的，设置的属性是IsMouseOver。想去掉这个背景，暴力点的做法直接注释掉那段代码。

3.3 升级

鼠标移上去会放大这个Content，笔者代码中Content设置为Image类型的。

        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate  TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Storyboard1">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1.25"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Storyboard2">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Grid.RenderTransform>
                            <Label Name="lbl" Content="{TemplateBinding Content}" Background="Transparent" Height="{TemplateBinding Height}"
                           Width="{TemplateBinding Width}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!--<Setter Property="Background" TargetName="lbl" Value="red"/>-->
                                <Trigger.ExitActions>
                                    <BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
                                </Trigger.ExitActions>
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                                </Trigger.EnterActions>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="lbl" Value="#000000FF"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

加了个动画，然后在 IsMouseOver事件中进行操作。

四、引用文献

4.1 Button 类 (System.Windows.Controls) | Microsoft Docs

4.2 ContentPresenter 类 (System.Windows.Controls) | Microsoft Docs

4.3 Brush 类 (System.Windows.Media) | Microsoft Docs

4.4 简述WPF中的画刷(Brush)_Andrewniu的博客-CSDN博客_brush wpf

4.5 ContentControl.Content 属性 (System.Windows.Controls) | Microsoft Docs

komla168
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wpf的button样式
02-09
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
【WPF应用19】WPF中的Button控件详解
最新发布
qq_35320456的博客
03-28 1356
WPF中的Button控件详解
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
WPF combobox button 漂亮样式
12-30
WPF combobox button 漂亮样式 自己开发用还是比较合适的，有助于界面美化
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。本文章记录了不同样式类型的按钮实现方法。下面话不多说了，来一起看看详细的介绍吧。 二、固定样式的按钮 固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。 2.1 普通按钮-扁平化风格 先看效果： 定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
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控件详解
^@^lemon tea^@^
07-15 5428
WPF 控件专题 Button控件详解
WPF 自定义Button样式
zls365365的博客
03-22 1336
前面几篇文章，实现了窗口样式的修改，下面开始往这个窗口里面添加各种控件，当然，所有控件都会使用自定义样式，代码也会在下方详细地列出。窗口模板的git地址：https://github.co...
WPF 入门教程Button使用
liaohaiyin的专栏
09-24 4226
没有Button控件的界面框架是不完整的。所以，WPF当然也有自己的按钮控件。就像WPF其它的控件一样，按钮控件的使用非常灵活，几乎可以让你实现任何东西。就让我们从以下几个简单例子开始吧： 简单的按钮 像其他的WPF控件一样，您可以用Button标记定义按钮控件。如果你在标记定义中间加入文字，文字的内容就是按钮的文字内容。 <Button>Hello, world!</Button> 很简单吧？当然，上面这个例子里的按钮并没有任何实际的逻辑在里面。不过，如果你把鼠标移上
WPF 控件专题 Button样式模板
^@^lemon tea^@^
07-16 1737
WPF 控件专题 Button样式模板
WPF中button按钮同时点击多次触发click解决方法
01-02
解决WPF中button按钮同时点击多次触发click的方法，供大家参考，具体内容如下 DateTime lastClick = DateTime.Now; object obj = new object(); int i = 0; private void Button_Click(object sender, ...
WPF-后台设置控件Background
小东灬灬的博客
02-17 1万+
方法一：buttonName.Background = Brushes.Red;方法二： buttonName.Background = new SolidColorBrush((Color)ColorConverter.ConverFromString("#FF3D3D3D"));方法三： buttonName.Background = new SolidColorBrush...
WPF自定义Button样式(按钮长度随Content长度自适应)
weixin_33923148的博客
12-31 1256
代码如下： 1 &lt;Style x:Key="ButtonStyle" TargetType="Button"&gt; 2 &lt;Setter Property="Template"&gt; 3 &lt;Setter.Value&gt; 4 &lt;ControlTemplate Targe
WPF自定义控件与样式-自定义按钮（Button）(转)
weixin_40029679的博客
09-21 3743
Button样式的代码和扁平化Button差不多样式，如果你想调整颜色风格，通过修改Background的值可实现默认颜色，鼠标经过颜色以及鼠标按下颜色。程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合按钮。固定样式的按钮一般在临时使用时或程序的样式比较固定时才会使用，按钮整体样式不需要做大的改动。新建自定义控件之后，添加依赖属性。
【愚公系列】2023年10月 WPF控件专题 Button控件详解
热门推荐
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF的按钮样式
weixin_43497445的博客
06-09 1170
1-设置圆角第一种。
WPF Button的样式模板
06-30 731
wpf样式模板的继承
wpf path button
12-09
WPF中的Path Button是一种使用Path元素作为按钮样式的控件。Path元素用于定义形状或图标，可以通过指定各种图形的路径数据来创建自定义的按钮样式。 一个Path Button通常由一个Button控件和一个Path元素组成。Button控件负责处理与按钮相关的事件和行为，而Path元素则负责定义按钮的形状和图标。 通过使用Path Button，我们可以创建具有各种形状和图标的自定义按钮。可以通过设置Path元素的Fill属性来填充按钮的背景颜色，通过设置Path元素的Stroke属性来定义按钮的边框颜色。还可以使用Path元素的Data属性来定义按钮的形状，通过使用路径数据来描述具体的形状或图标。 Path Button还可以与其他WPF控件和特效进行组合使用，以实现更复杂的效果。例如，可以将Path Button与触发器结合使用，实现在鼠标悬停或按下时改变按钮样式的效果。还可以将Path Button与动画效果结合使用，实现按钮在不同状态下的平滑过渡。 总结来说，WPF中的Path Button是一种使用Path元素来创建自定义形状和图标的按钮样式的控件。它提供了很大的灵活性，可用于创建各种各样的按钮样式，并可以与其他WPF控件和特效进行组合使用，实现更复杂的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值