15、wpf之button样式小记

已于 2022-06-22 16:07:44 修改
阅读量1.4k 收藏 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
关注
专栏目录
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" ...
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
wpf 纯样式写按钮
03-09 206
1 <!--自定义按钮样式--> 2 <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint="0.5,1" StartPoint="0.5,0"> 3 <GradientStop Color="#FF377FED" Offset="...
WPF 控件模板的基本概念
最新发布
qq_44206824的博客
09-24 322
假设我们想要创建一个带有圆角边框的按钮，并且当鼠标悬停在按钮上时背景颜色会发生变化。在App.xaml</Border></Trigger>Border元素用于创建按钮的外观，包括背景色、边框和圆角。用于显示按钮的内容（如文本或图标）。Triggers用于定义当鼠标悬停在按钮上时，背景颜色变为浅蓝色。
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样式
02-09
设置button的样式，内外发光，移动、点击、离开时产生不同的效果
WPFbutton样式
weixin_30765475的博客
08-19 128
有四款button不同的风格 <Window x:Class="SjglzxRj.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ...
WPF自定义模板--Button
代码改变世界
07-02 711
WPF自定义模板--Button
WPF自定义控件和样式之自定义按钮（Button）
12-31
一、前言 程序界面上的按钮多种多样，常用的就这几种：普通按钮、图标按钮、文字按钮、图片文字混合...定义Button的样式，详见代码： <Style x:Key=BtnInfoStyle TargetType=Button> <Setter Property=
WPF combobox button 漂亮样式
12-30
本篇文章将详细探讨如何为WPF ComboBox创建漂亮的按钮样式，以提升用户界面的美观度。 首先，我们需要了解WPF的样式和模板系统。在WPF中，我们可以使用Style和ControlTemplate来定制控件的外观和行为。Style用于...
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自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
漂亮的WPF按钮样式，水晶效果
08-16
是用样式实现更改WPF默认按钮外观，效果很棒。
WPF定制按钮样式工程 可同时显示Path图标及Content文字的按钮样式
06-20
重新定制了WPF中按钮Button的样式，可以同时设置Path及Content，使按钮同时显示图标和文字，有平行排列及上下排列两种样式。
wpf button控件模板
寒风1999
07-01 252
1.从button的style说起 　　button有很多属性，我们在xaml中定义一个按钮时可以指定button的content、background、height、width等等。这些都是button的属性，而style也不例外也是button的一个属性，只是在给style属性赋值时不能简单的像height=“100”一样简单的设定一个字符串。先看一个简单的例子 我们定义了一个style对...
WPF的按钮样式
weixin_43497445的博客
06-09 1379
1-设置圆角第一种。
WPF自定义漂亮的按钮样式
微软新技术
05-02 5222
首先打开 Microsoft Visual Studio 2008 ，新建一个WPF项目，在上面随便放几个按钮：然后给各个按钮设置不同的背景颜色：设置好之后就是这样啦：然后我们就开始在 App.xaml 文件中定义按钮样式了：定义的样式代码如下：以下为引用的内容：    xmlns="http://schemas.microsoft.com/wi
WPF Button的样式模板
06-30 802
wpf样式模板的继承
[WPF] 自定义按钮样式
weixin_34348111的博客
05-02 140
有了WPF，一切都将变得简单..样式代码比较多，请看附件! /Files/lovebread/ButtonStyle.rarControlTemplate 指定控件的可视结构和可视行为。可以通过为控件指定新 ControlTemplate 自定义该控件的外观。创建 ControlTemplate 后，可以在不更改现有控件的功能的情况下更改其外观。例如，您可以将应用程序中的按钮设置为圆形，而不...
wpf path button
12-09
WPF中的Path Button是一种使用Path元素作为按钮样式的控件。Path元素用于定义形状或图标，可以通过指定各种图形的路径数据来创建自定义的按钮样式。 一个Path Button通常由一个Button控件和一个Path元素组成。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值