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

Button与控件模板

[一、 Button默认控件模板详解](#一、 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

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

xml 复制代码

<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>

官方案例：

xml 复制代码

    <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>

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

xml 复制代码

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