WPF使用控件模板，资源字典，矢量图形

控件模板：
WPF包含数据模板和控件模板，其中控件模板又包括ControlTemplate和ItemsPanelTemplate。
其实WPF的每一个控件都有一个默认的模板，该模板描述了控件的外观以及外观对外界刺激所做出的反应。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。
与Style不同，Style只能改变控件的已有属性值（比如颜色字体）来定制控件，但控件模板可以改变控件的内部结构（VisualTree，视觉树）来完成更为复杂的定制，比如我们可以定制这样的按钮：在它的左办部分显示一个小图标而它的右半部分显示文本。
要替换控件的模板，我们只需要声明一个ControlTemplate对象，并对该ControlTemplate对象做相应的配置，然后将该ControlTemplate对象赋值给控件的Template属性就可以了。
ControlTemplate包含两个重要的属性：
1，VisualTree，该模板的视觉树，其实我们就是使用这个属性来描述控件的外观的
2，Triggers，触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。

资源字典：资源和样式统一管理

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--资源字典-->
    <!--关闭按键模板-->
    <ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
        <Border Background="Transparent">
            <!--画X-->
            <Path Data="M0 0 12 12 M0 12 12 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"></Path>
        </Border>
    </ControlTemplate>

    <!--普通按键模板-->
    <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
        <!--设置圆角-->
        <Border x:Name="border" CornerRadius="5" Background="#007DFA">
            <Grid>
                <!--设置文字居中-->
                <ContentControl Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                <!--背景色变浅-->
                <Border CornerRadius="4" x:Name="back" Background="#22FFFFFF" Visibility="Hidden"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger  Property="IsEnabled" Value="true">
                <!--设置背景色-->
                <Setter TargetName="border" Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Background}">
                </Setter>
            </Trigger>
            <Trigger  Property="IsMouseOver" Value="true">
                <!--设置鼠标移动到按键背景色变浅-->
                <Setter Property="Visibility" Value="Visible" TargetName="back"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <!--统一样式按键模板-->
    <Style TargetType="Button" x:Key="WindowControlButtonStyle">
        <Setter Property="Width" Value="40"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent" Name="back">
                        <TextBlock Text="{Binding Content,RelativeSource={RelativeSource AncestorType=Button,Mode=FindAncestor}}"
                       VerticalAlignment="Center" HorizontalAlignment="Center"
                       FontFamily="../Fonts/#iconfont" FontSize="16"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="back" Property="Background" Value="#22FFFFFF"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="back" Property="Background" Value="#44FFFFFF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

.xaml页面文件字典资源的引用

矢量图形：是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示的图像。可以当作字体修改大小颜色和背景色。
阿里巴巴矢量图标库

选中图标添加购物车

添加到指点项目

下载到本地

将下载的文件添加到项目中
iconfont.ttf为主要文件

项目.xaml页面文件中使用矢量图标

效果图

GitHub链接，有帮助的话给个Star哦