WPF 从 用户控件 到 自定义控件

独立观察员 2024 年 4 月 29 日

 

一、用户控件示例：能够朝向上下左右四种方向

在 WPF 中，如果想要复用 Xaml 代码，最先想到的肯定是用户控件（UserControl），比如下面这个示例。

 

定义依赖属性 Direction（默认朝右）：

 

类型为 DockPanel 的 Dock 枚举类型：

 

前台使用触发器来旋转相应的角度：

 

二、让用户控件能够被设置全局样式

用户控件做好之后，在使用时，如果直接在它身上设置各个属性，一般都没什么问题。但是，由于这些属性一般具有重复性，所以和其它控件元素使用时一样，也就是如果在某个容器内有一系列相同元素，而且它们的很多属性也是会被设置为相同的，那么这时一般会在该容器的资源中添加一个针对该元素的样式，而且一般不设置 Key，也就是所谓的全局样式。下面描述一种给用户控件设置全局样式时不生效的情况及初步解决方法。

 

由于需要使用 DataTrigger，而且需要设置内部元素的属性，所以触发器需要和内容放在一起，这样就形成了【用户控件中只有一个针对自身的样式，且主要是用来设置控件模板】的局面：

 

【修正 1】上图中将触发器放在 UserControl 的 Style 里，会导致外面使用时，给 UserControl 设置全局样式时不生效（尤其是对于依赖属性），可按照如下结构改造：

不过这又导致在 UserControl 上设置了默认值的属性，在外面全局样式设置时不能生效。

 

【尝试】在用户控件资源中添加目标类型为自己的样式，在其中设置需要设置的默认值：

 

在使用时会提示未找到相关资源：

 

这个想想也正常，相关样式资源是定义在用户控件内部的，在外面自然是访问不到的。

 

【修正 2】那么自然而然地就会想着把这个样式资源定义到全局可访问的地方去（比如 App.xaml），或者使用者会引用的资源字典中：

 

然后再来使用的地方看看，BaseOn 不报错了，全局样式设置时，除了 Padding 因为直接在用户控件上设置了默认值导致未生效之外，其余都生效了：

 

不过这么一折腾，最后发现，这不就是殊途同归到了 “自定义控件（CustomControl）” 上去了嘛？

得，还是改为自定义控件吧。这用户控件，真是从 质疑自定义控件，到 理解自定义控件，再到 成为自定义控件 啊。

 

三、迁移为自定义控件

新建自定义控件：

 

修改名称后会生成一个继承自 Control（也可以自己手动改为 ContentControl 或其它类型） 的类，还会在 Themes/Generic.xaml 文件（这个文件中的资源会被自动加载）中添加默认的样式：

 

自定义控件类的构造函数中就是指定了这个样式，来看看这个指定的语句：

 

也就是指定了 DefaultStyleKey 这个依赖属性的默认值：

 

然后就可以将之前的控件模板包括触发器拷贝过来了，自带属性改为使用 TemplateBinding 进行绑定，依赖属性使用 Binding 进行绑定，可以使用 Setter 设置默认值：

（有个缺点：绑定的依赖属性在 Xaml 中无法定位过去，这可能是 DataContext 方面的原因）

 

将之前的依赖属性拷贝到自定义控件类中：

 

然后使用时即可随意设置属性了，也支持全局样式设置，而且不需要 BaseOn：

 

看来还是自定义控件强大啊，就是这个样式与类分离开来（不像用户控件一样在一个前后台）的组织形式有点不舒服，希望微软改进。

 

四、相关资源

自定义控件 CircleWithTextBlock 现已加入 NuGet 包 WPFTemplateLib 套餐：

 

示例代码：https://gitee.com/dlgcy/DLGCY_WPFPractice/tree/Blog20240429