WPF学习笔记（20）Button与控件模板

一、 Button默认控件模板详解

WPF 中的大多数控件都有默认的控件模板。
这些模板定义了控件的默认外观和行为，包括控件的布局、背景、前景、边框、内容等。

官方文档：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/button-styles-and-templates
在工具箱拖入Button控件，鼠标右键→编辑模板→编辑副本

下面为Button控件默认模板的内容



可以更改模板来定制按钮的一些显示，比如改变鼠标悬浮和按钮移上去之后的背景色：

二、自定义按钮模板

官方文档：https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/how-to-create-apply-template



示例代码定义圆形按钮与运行效果如下：

<Window.Resources> <!--自定义示例--><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Ellipse x:Name="ell" Fill="{TemplateBinding Background}"Stroke="Purple"StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent},Path=BorderThickness.Top}"/><ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ell" Property="Fill" Value="#FFB0E60D"/><Setter TargetName="ell" Property="Stroke" Value="Yellow"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="ell" Property="Fill" Value="Cyan"/><Setter TargetName="ell" Property="Stroke" Value="Gold"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
<Window.Resources>    <Grid><Button x:Name="button1" Content="圆形按钮"  Foreground="Yellow" FontSize="20" Width="200" Height="200" BorderBrush="Blue" BorderThickness="20" Background="Black" Margin="186,17,414,218"/><Button x:Name="button2" Content="椭圆按钮" Width="200" Height="100" Background="Cyan" Margin="186,295,414,40"/></Grid>

官方案例：

    <Window.Resources><ControlTemplate x:Key="BeautUI" TargetType="Button"><Grid><Ellipse x:Name="ell"><Ellipse.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Offset="0" Color="blue"/><GradientStop Offset="1" Color="LightBlue"/></LinearGradientBrush></Ellipse.Fill></Ellipse><Ellipse Margin="20"><Ellipse.Fill><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Offset="0" Color="White"/><GradientStop Offset="1" Color="Transparent"/></LinearGradientBrush></Ellipse.Fill></Ellipse><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter TargetName="ell" Property="Fill" Value="Red"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter TargetName="ell" Property="Fill" Value="Orange"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><Grid><Button x:Name="button3" Content="漂亮按钮" Template="{StaticResource BeautUI}" Width="200" Height="200" Background="Cyan" Margin="462,117,138,118"/></Grid>

定义圆角按钮示例代码，可用于制作计算器如下：

            <Button.Template><ControlTemplate TargetType="Button"><Border CornerRadius="8" Background ="{TemplateBinding Background}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Button.Template>