2022.3.28

WPF样式与模板详解

最新推荐文章于 2025-05-07 13:42:07 发布

原创最新推荐文章于 2025-05-07 13:42:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c#

Blend for Visual Studio 概述

Blend for Visual Studio 可用于设计基于 XAML 的 Windows 和 Web 应用程序。它提供

了与 Visual studio 相同的基本 XAML 设计体验，并添加了可视化设计器，以用于高级任务，例如动画和行为。Blend for Visual Studio 是 Visual Studio 的一个组件。

WPF中常用控件都有一个默认的自定义样式，在Visual Studio中不能直接查看，但是在

Blend for Visual Studio 中可以通过模板来查看。

自定义模板与样式

开发过程中，我们有时候用WPF原生的控件就能实现自己的需求，但是样式、风格并不能满足我们的需求，那么我们该怎么办呢？----自定义样式与模板。

一、样式

在WPF中我们可以使用Style来设置控件的某些属性值，并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件，比如说我们想将窗口中的所有按钮都保持某一种风格，那么我们可以设置一个Style，而不必分别设置每个按钮的风格。Style是作为一种资源被保存下来的.

二、模板

ControlTemplate 指定控件的可视结构和可视行为。可以通过为控件指定新 ControlTemplate 自定义该控件的外观。创建 ControlTemplate 后，可以在不更改现有控件的功能的情况下更改其外观。例如，您可以将应用程序中的按钮设置为圆形，而不是默认的方形，但该按钮仍将引发 Click 事件。注意: 在重定义模板前，你应该充分了解该空间的模板类型

定义模板的方法有三种：

1.内联定义;

2.定义为资源;

3.通过Style定义.

1.WPF中的ControlTemplate

WPF包含数据模板和控件模板，其中控件模板又包括ControlTemplate和 ItemsPanelTemplate，这里讨论一下ControlTemplate。

其实WPF的每一个控件都有一个默认的模板，该模板描述了控件的外观(视觉树)以及外观对外界刺激所做出的反应（触发器）。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。与Style不同，Style只能改变控件的已有属性值（比如颜色字体）来定制控件，但控件模板可以改变控件的内部结构（VisualTree，视觉树）来完成更为复杂的定制，比如我们可以定制这样的按钮：在它的左办部分显示一个小图标而它的右半部分显示文本。要替换控件的模板，我们只需要声明一个ControlTemplate对象，并对该ControlTemplate对

象做相应的配置，然后将该ControlTemplate对象赋值给控件的Template属性就可以了。

ControlTemplate包含两个重要的属性：

1， VisualTree，该模板的视觉树，其实我们就是使用这个属性来描述控件的外观的

2， Triggers，触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。

2、触发器

除了定义控件的默认外观外，也许我们想还定义当外界刺激我们的控件时，控件外观做出相应的变化，这是我们需要触发器。

WPF中的数据模板(DataTemplate)

在WPF中我们可以为自己的数据定制显示方式，也就是说虽然某数据数据是一定的，但我们可以做到让它的表现方式多种多样，比如一个时间，在以前我们一般使用一个字符串（比如“12：03”）来显示，但我们为什么就不能显示一个小时钟呢，其实这更合乎情理，利用WPF中的数据模板技术随意并轻松地表现你的数据.

数据模板适用于Content Control类控件与Items Control类控件.

一、场景模拟

假设我们现在有如下需求：

我们需要在ListBox中的每个Item中显示某个成员的姓名、年龄以及喜欢的颜色，点击Item的时候，会在右边显示详细信息，同时也想让ListBox的样式变得好看一些，比如带有绿色边框等。为了实现以上需求，我们可以使用控件模板来修改ListBox的默认样式，使之变得生动有趣，使用数据模板来改变ListBoxItem的数据呈现形式。

二、Demo

为了改变ListBoxItem的外观，我们在资源里定义一个名字为listBoxItemTemplate的数据模板，模板中使用Binding将数据进行关联，然后为ListBox的ItemTemplate属性进行赋值。

当我们点击左面ListBoxItem的时候，为了能在右面显示详细信息，我们定义四个Label，绑定左侧选中的ListBoxItem。

为了绑定方便，我们为四个Label加个父容器StackPanel，并将它的DataContext属性绑定到选中的ListBoxItem上（四个Label的DataContext就会继承StackPanel的DataContext属性）。