WPF绘图的工程应用：为按钮或自定义按钮添加矢量图作为背景，该矢量图来自Blend或Design设计的Path数据。

例1 ：Button+Drawing绑定+GeometryDrawing

功能描述：为Button添加简单的矢量图作为背景。

<Window x:Class="Drawing.Drawings"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Drawings" Height="300" Width="600"
    >
    <Window.Resources>

        <GeometryDrawing x:Key="Drawing" Brush="Yellow" >
            <GeometryDrawing.Pen>
                <Pen Brush="Blue" Thickness="3"></Pen>
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10,100">
                        <LineSegment Point="100,100" />
                        <LineSegment Point="100,50" />
                    </PathFigure>
                </PathGeometry>
            </GeometryDrawing.Geometry>
        </GeometryDrawing>

    </Window.Resources>

    <StackPanel Orientation="Horizontal" Margin="5">
        <Button Width="30" Height="30">
            <Image>
                <Image.Source>
                    <DrawingImage Drawing="{StaticResource Drawing}">
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Button>
    </StackPanel>
</Window>

效果图：

例2 ：Button+Content绑定+Canvas+Path数据

功能描述：为Button添加复杂的矢量图作为背景。

<Window x:Class="Drawing.Drawings"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Drawings" Height="300" Width="600"
    >
    <Window.Resources>
        <Canvas x:Shared="False" x:Key="Drawing2" HorizontalAlignment="Center" Height="33.7549" UseLayoutRounding="False" VerticalAlignment="Center" Width="43.5">
            <Path Data="F1M22.75,0L19.15,5.251 0,5.25 0,28.504 0.75,28.504 7.501,10.501 35.255,10.501 35.255,0z" Fill="White" Height="28.504" Canvas.Left="0.75" Canvas.Top="0.75" Width="35.255"/>
            <Path Clip="M0,0L43.505,0 43.505,33.755 0,33.755z" Data="M19.1,5.251C14.544,5.251 5.2,5.239 0.75,5.251 0.485,5.251 0,5.736 0,6.001L0,33.755 36.755,33.755 43.505,11.251 36.755,11.251 36.755,0 24,0C22.204,0,20.895,5.251,19.1,5.251 M24.4,0.751L35.254,0.751C35.519,0.751,36.005,1.235,36.005,1.501L36.005,11.251C36.005,11.251 15.263,11.239 8.251,11.251 7.729,11.252 6.656,12.614 6.356,13.052 3.981,16.521 1.5,29.254 1.5,29.254L0.75,29.254 0.75,6.751C0.75,6.486,1.235,6.001,1.5,6.001L19.8,6.001C21.595,6.001,22.604,0.751,24.4,0.751" Fill="#FFECBF7C" Height="33.755" Canvas.Left="0" Canvas.Top="0" Width="43.5"/>
        </Canvas>
    </Window.Resources>
    
    <StackPanel Orientation="Horizontal" Margin="5">
        <Button Width="122" Height="52" Content="{StaticResource Drawing2}"/>
    </StackPanel>
</Window>

效果图：

例3 ：Button+Content绑定+Canvas+Path数据

参考：https://www.cnblogs.com/KevinJasmine/p/5528273.html

功能描述：为Button添加复杂的矢量图作为背景。其中控件母版的ControlTemplate代码如下：

<ControlTemplate x:Key="CellPhone">
    <Viewbox Stretch="Uniform">
        <Canvas Width="20.008" Height="21.3254" Clip="F1 M 0,0L 20.008,0L 20.008,21.3254L 0,21.3254L 0,0">
            <Canvas  Width="800.32" Height="599.776" Canvas.Left="0" Canvas.Top="0">
                <Path Width="20.008" Height="21.3253" Canvas.Left="0" Canvas.Top="-3.05176e-005" Stretch="Fill" Fill="#FF2179BF" Data="..."/>
            </Canvas>
        </Canvas>
    </Viewbox>
</ControlTemplate>

window窗口的Button代码如下:

<Button Name="btnCellPhone"  ToolTip="手机">
                <ContentControl Template="{StaticResource CellPhone}" />
 </Button>