WPF自定义模板--Button

属性：

TemplateBinding：用于在ControlTemplate中绑定到控件的属性，例如Background、BorderBrush等。
TargetType：指定该模板应用于哪种控件类型。在这个例子中，是Button。

标准的控件模板代码：

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"><Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/><Setter Property="Background" Value="{StaticResource Button.Static.Background1}"/><Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border1}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10" SnapsToDevicePixels="true"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><Trigger Property="IsDefaulted" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="border" Value="Orange"/><Setter Property="BorderBrush" TargetName="border" Value="red"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background1}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border1}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background1}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border1}"/><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground1}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

自定义Button的外观：

<ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"CornerRadius="10"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" /></Border>
</ControlTemplate>

这里我们通过设置CornerRadius属性来使按钮的边框变圆角。

使用Triggers和Animations

<ControlTemplate TargetType="Button"><Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"CornerRadius="10"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" /></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="LightBlue" /></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border" Property="Background" Value="DarkBlue" /><Setter TargetName="border" Property="RenderTransform"><Setter.Value><ScaleTransform ScaleX="0.95" ScaleY="0.95" /></Setter.Value></Setter></Trigger></ControlTemplate.Triggers>
</ControlTemplate>

这里我们通过触发器改变按钮在鼠标悬停和按下时的背景颜色，并在按下时缩小按钮的尺寸

鼠标悬停：

鼠标按下：

模板样式与资源

<Window.Resources><Style x:Key="CustomButtonStyle" TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" /></Border></ControlTemplate></Setter.Value></Setter></Style>
</Window.Resources><Grid><Button Style="{StaticResource CustomButtonStyle}" Width="100" Height="50" Content="Styled Button" />
</Grid>

我们将按钮定义为样式，可以多个按钮使用

也可以根据 TemplateBinding 进行传值，绑定数据和属性值