当前位置：首页 > C# > 正文

掌握WPF样式（Style）与模板（Template）

主机测评网
C#
2025-12-24
748

在WPF（Windows Presentation Foundation）开发中，样式（Style）和模板（Template）是实现UI统一、可维护性和高度自定义的核心机制。无论你是刚接触WPF的新手，还是希望深入理解UI定制原理的开发者，本教程都将带你从零开始，一步步掌握这两个关键概念。

什么是WPF样式（Style）？

WPF样式（Style）类似于网页开发中的CSS，用于集中定义控件的外观属性（如颜色、字体、边距等），避免重复代码，提升UI一致性。通过样式，你可以一次性为多个相同类型的控件设置统一的视觉表现。

基本样式示例

下面是一个简单的Button样式定义：

<Window.Resources>    <Style x:Key="MyButtonStyle" TargetType="Button">        <Setter Property="Background" Value="LightBlue" />        <Setter Property="Foreground" Value="DarkBlue" />        <Setter Property="FontSize" Value="14" />        <Setter Property="Padding" Value="10,5" />        <Setter Property="Margin" Value="5" />    </Style></Window.Resources><StackPanel>    <Button Content="按钮1" Style="{StaticResource MyButtonStyle}" />    <Button Content="按钮2" Style="{StaticResource MyButtonStyle}" /></StackPanel>

在这个例子中，我们定义了一个名为 MyButtonStyle 的样式，并通过 Style="{StaticResource MyButtonStyle}" 应用到两个按钮上。这样，两个按钮就拥有了相同的外观。

什么是WPF模板（Template）？

如果说样式（Style）控制的是“外观属性”，那么模板（Template）控制的就是“结构本身”。WPF模板允许你完全重写控件的内部组成，比如把一个Button变成圆形、带图标的按钮，甚至嵌入其他控件。

掌握WPF样式（Style）与模板（Template） WPF样式 WPF模板 Style与Template WPF UI开发第1张

ControlTemplate 示例：自定义按钮外观

下面我们将使用 ControlTemplate 创建一个带有圆角和图标效果的按钮：

<Window.Resources>    <Style x:Key="RoundedButtonStyle" TargetType="Button">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="Button">                    <Border Background="{TemplateBinding Background}"                            CornerRadius="10"                            BorderBrush="Gray"                            BorderThickness="1"                            Padding="10">                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">                            <TextBlock Text="★" Margin="0,0,5,0" />                            <ContentPresenter />                        </StackPanel>                    </Border>                </ControlTemplate>            </Setter.Value>        </Setter>        <Setter Property="Background" Value="#FFD700" />        <Setter Property="Foreground" Value="Black" />    </Style></Window.Resources><Button Content="收藏" Style="{StaticResource RoundedButtonStyle}" Width="120" />

这里的关键是 ControlTemplate 中的 ContentPresenter，它会显示按钮的 Content（即“收藏”文字）。通过这种方式，你可以彻底改变控件的视觉结构，而保留其交互逻辑（如点击事件）。