WPF QuickStart系列之样式和模板(Style and Template)

2021-05-14 11:27

阅读：378

标签：erb nim oar 颜色数字效果开头 effect nta

在WPF桌面程序中，当我们想构建一个统一的UI表现时(在不同操作系统下，显示效果一致)，此时我们就需要使用到WPF中的样式和模板技术。简单来说，如果我们需要简单的给一个Button设置宽，高，Margin等，可以使用Style来指定这一系列的属性。可以把Style理解为一个属性的集合。如果需要完全改变控件的样子，就需要使用到Template技术，相当于给控件换一层皮，不过Button还是Button，它原有的行为(Click事件)还存在。而且我们仅需要在XAML中遍可以完成对样式和模板的定义和重写。非常简洁方便。

首先通过一个例子了解Style。

运行效果：

技术分享

通过上面的示例可以看到，

1. Style中包含了很多Setter，每个Setter都会对应着不同属性的设置。正如博客开头讲到的一样。Style是一组属性的集合；

2. 在Style中可以设置TargetType，指示这个Style是给哪一个控件使用的；

3. Style可以继承，例如操作按钮的Style继承了数字按钮的Style，使用BaseOn，然后引用到Style的资源即可；

4. Style的优先级，=按钮，在Style中设置了Button的DropShadowEffect为红色，然后在Button内部我们设置DropShadowEffect为蓝色，最后显示的效果可以看出来，=按钮最终颜色为蓝色。可以理解为后来者居上。

Style中不仅可以包含一系列的Setter，还可以包含Trigger。WPF中有三种Trigger，Property Trigger，Event Trigger，Data Trigger。下面我们介绍Property Trigger，沿用上面的示例，在鼠标点击按钮时，设置Transform效果。

运行效果如下：

技术分享

Trigger表示当满足某个/某些条件时触发。上面的例子中，当IsPressed为True时，触发了Transform的改变，当IsPressed为False时，自动恢复到初始状态，不需要额外的代码来恢复初始状态。

不仅可以在Style中使用Trigger，还可以在DataTemplate，ControlTemplate中使用。

Property Trigger针对的是依赖属性，那普通属性改变时，如何触发UI的改变呢？所以下面介绍另一种Trigger，Data Trigger。请看示例：

XAML:

C#:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new List
            {
                new Book { Name = "Windows Internals",
                AuthorName = "Mark Russinovich", IsFree = false },
                new Book { Name = "AJAX Introduction",
                AuthorName = "Bhanwar Gupta", IsFree = true },
                new Book { Name = "Essential COM",
                AuthorName = "Don Box", IsFree = false },
                new Book { Name = "Blueprint for a Successful Presentation",
                AuthorName = "Biswajit Tripathy", IsFree = true }
            };
        }
    }

    public class Book
    {
        public string Name { get; set; }

        public bool IsFree { get; set; }

        public string AuthorName { get; set; }

    }

运行效果：

技术分享