WPF知识点--自定义Button(ControlTemplate控件模板)

ControlTemplate是一种控件模板，可以通过它自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。

ControlTemplate包含两个重要的属性：
VisualTree 该模板的视觉树，用来描述控件的外观。
Triggers 触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。

示例：

<Window.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<!--  定义视觉树  -->
<Grid>
<!--  绘制外圆  -->
<Ellipse x:Name="ellipse"
Width="100"
Height="100"
Stroke="#FF6347">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.443,1.22">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" />
<SkewTransform CenterX="0.5" CenterY="0.5" />
<RotateTransform Angle="-50" CenterX="0.5" CenterY="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Offset="0" Color="#FF4040" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--  绘制内圆  -->
<Ellipse Width="80"
Height="80"
Stroke="{x:Null}">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0.406,1.322" EndPoint="0.563,-0.397">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="-1"
ScaleY="-1" />
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5" />
<RotateTransform Angle="-50" CenterX="0.5" CenterY="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="#FF4040" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!--  使用ContentControl或ContentPresenter重写内容  -->
<!--<ContentControl   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" />-->
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
<!--  定义触发器  -->
<ControlTemplate.Triggers>
<!--  设置按钮响应事件  -->
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsDefaulted" Value="True" />
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ellipse" Property="Stroke" Value="#FFFFF400" />
<Setter TargetName="ellipse" Property="StrokeThickness" Value="1.5" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ellipse" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.443,1.22">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" />
<SkewTransform CenterX="0.5" CenterY="0.5" />
<RotateTransform Angle="-50" CenterX="0.5" CenterY="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#FF4040" />
<GradientStop Offset="0" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="contentPresenter" Property="Margin" Value="5,5,0,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False" />
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</Window.Resources>

View Code

<Button Content="XButton" />