WPF 模板入门

引言

Windows Presentation Foundation 允许开发者完全改变控件的外观和感觉。这是通过使用控件模板来实现的。这意味着你可以将你的 Button 渲染成一个 Ellipse，当鼠标悬停在其上时，它的颜色会改变。实际上，这就是我们在本文中要做的。

为什么使用控件模板，而不是样式？

在之前的文章中，我们讨论了 WPF 中的样式。你可以查看这篇文章：Windows Presentation Foundation 样式简介。

你可能会问，为什么不使用样式来改变控件的外观呢？样式可以改变控件的外观，但它们将依赖于控件本身提供的属性。这意味着你将无法将你的 Button 渲染成一个 Polygon。控件模板允许通过提供一个将被控件使用的模板来改变控件的外观。

创建一个圆形按钮

在本文中，我们将使用控件模板创建一个圆形 button。第一步是创建一个简单的 button 控件。以下是该代码：

<Button Content="Push Me!" >

这将会在 WPF 表单上创建一个非常简单的 button 控件。让我们为这个 button 创建一个模板。我们将把模板放在 App.xaml 文件中，以便在整个应用程序中使用它。

<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">      
        <Grid>
           <Ellipse Name="el1" Fill="Orange" Width="100" Height="100">            
           </Ellipse>                                     
        </Grid> 
</ControlTemplate> 

上面定义的控件模板非常简单！首先，一个唯一的键“buttonTemplate”被分配给控件模板。此外，模板的 TargetType 被设置为“Button”，这意味着该模板只能应用于 Button 控件。接下来，我们在 Grid 控件内定义一个 Ellipse。它是一个用橙色填充的简单 Ellipse。

现在，让我们将模板应用于 Button 控件

<Button Content="Push Me!" Template="{StaticResource buttonTemplate}" 
	Click="Button_Clicked"></Button>

一旦你应用了控件模板，Button 将会改变它的显示方式，并被渲染成一个 Ellipse，如下所示：

上面的渲染有一个问题；Button 控件的内容，即“Push Me!”没有显示出来。让我们让它出现在 Ellipse 内部。ContentPresenter 控件可以用来显示 WPF 控件的内容。

<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" 
	Content="{TemplateBinding Button.Content}" />

结果如下

我们还没有完成！让我们也为 Button 控件添加一个触发器，以便当鼠标悬停在其上时，它会改变 Ellipse 的颜色。

<ControlTemplate.Triggers>
          <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="el1" Property="Fill" Value="Yellow"/>
          </Trigger>
        </ControlTemplate.Triggers>

触发器在 Button.IsMouseOver 事件上触发。Setter 用于将 Ellipse 的 Fill 属性更改为“Yellow”。现在，当你将鼠标悬停在 Ellipse 上时，它将从橙色变为黄色。

结论

WPF 控件模板是 WPF 框架的一个非常重要的特性。它允许你改变 WPF 控件的外观和感觉，并以完全不同的方式渲染它们，不同于它们的默认格式。

希望你喜欢这篇文章。祝你编码愉快！

历史

• 2008年11月14日：初始版本