自定义按钮模板

本文同时为b站WPF课程的笔记，相关示例代码

对应09上半节课

自定义模板

对于当前的这个样式不满意——想要自己控制它这个控件长什么样子

比如在一节课中，为了实现圆角按钮，我们是从网上面抄了一段代码过来

那么，如何建立一种自带圆角的按钮模板呢？

<Button Width="300" Height="100" Content="自定义按钮" Background="#0078d4" FontSize="50" Foreground="White">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            
        </ControlTemplate>
    </Button.Template>
</Button>

在按钮标签中添加<Button.Template><ControlTemplate TargetType="Button">，会发现，之前本来定义的文字、背景等属性全部都被覆盖了。

此时，我们再在中间添加我们想要的重写的模板样式

比如想要添加圆角的样式，可以写上：

<Button Width="300" Height="100" Content="自定义按钮1" Background="#0078d4" FontSize="50" Foreground="White">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Red" BorderBrush="Black" BorderThickness="5" CornerRadius="10">
                
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

为了继续使用之前定义的部分属性，比如文字、文字的居中对齐等：

<Button Width="300" Height="100" Content="自定义按钮1" Background="#0078d4" FontSize="50" Foreground="White">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Red" BorderBrush="Black" BorderThickness="5" CornerRadius="10">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

可能需要点击启动或者重新生成项目才能查看到效果

但是这样定义模板会使得之前的属性全部被覆盖，我们可以设置一些需要继承过来的属性。比如我想要继承之前的背景颜色，可以使用Background="{TemplateBinding Background}"表示模板中的背景色依然使用这个按钮定义的的背景色。

在之后我们可以将 Template 模板放到 style 样式中，用于更方便的搭建具有统一性/差异化的界面样式

总结

给按钮使用模板，会使得按钮本身的所有属性都被覆盖。

在模板中，可以：

1. 定义某属性，使得使用该模板的所有元素都具有统一的属性
2. 令某属性继承，例如Background="{TemplateBinding Background}"
3. 不定义某属性，该属性会为默认值（？比如向左对齐、向上对齐）

可以与Style样式相结合