[WPF自定义控件]从ContentControl开始入门自定义控件

1. 前言

我去年写过一个在uwp自定义控件的系列博客，大部分的经验都可以用在wpf中（只有一点小区别）。这篇文章的目的是快速入门自定义控件的开发，所以尽量精简了篇幅，更深入的概念在以后介绍各控件的文章中实际运用到才介绍。

contentcontrol是wpf中最基础的一种控件，window、button、scrollviewer、label、listboxitem等都继承自contentcontrol。而且contentcontrol的结构十分简单，很适合用来入门自定义控件。

这篇文章通过自定义一个contentcontrol来介绍自定义控件的一些基础概念，包括自定义控件的基本步骤及其组成。

2. 什么是自定义控件

在开始之前首先要了解什么是自定义控件以及为什么要用自定义控件。

在wpf要创建自己的控件（control），通常可以使用自定义控件（customcontrol）或用户控件（usercontrol），两者最大的区别是前者可以通过controltemplate对控件的外观灵活地进行定制。如在下面的例子中，通过controltemplate将button改成一个圆形按钮：

<button content="orginal" margin="0,0,20,0"/>
<button content="custom">
    <button.template>
        <controltemplate targettype="button">
            <grid>
                <ellipse  stroke="darkorange" strokethickness="3" fill="lightpink"/>
                <contentpresenter margin="10,20" foreground="white"/>
            </grid>
        </controltemplate>
    </button.template>
</button>

控件库中通常使用自定义控件而不是用户控件。

3. 创建自定义控件

contentcontrol最简单的派生类应该是headeredcontentcontrol了吧，这篇文章会创建一个模仿headeredcontentcontrol的myheaderedcontentcontrol，它继承自contentcontrol并添加了一些细节。

在“添加新项”对话框选择“自定义控件（wpf）”，名称改为"myheaderedcontentcontrol.cs"（用my-做前缀是十分差劲的命名方式，但只要一看到这种命名就明白这是个测试用的东西，不会和正规代码搞错，所以我习惯了测试用代码就这样命名。），点击“添加”后visualstudio会自动创建两个文件：myheaderedcontentcontrol.cs和themes/generic.xaml。

编译通过后在xaml上添加myheaderedcontentcontrol的命名空间即可使用这个控件：

<window x:class="customcontroldemo.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:customcontroldemo">
    <grid>
        <local:myheaderedcontentcontrol content="i am a new control" />
    </grid>
</window>

在添加新项时，小心不要和“windows forms”里的“自定义控件”搞混。

4. 自定义控件的组成

自定义控件通常由代码和defaultstyle两部分组成，它们分别位于visualstudio创建的myheaderedcontentcontrol.cs和themes/generic.xaml两个文件中。

4.1 代码

public class myheaderedcontentcontrol: control
{
    static mycustomcontrol()
    {
        defaultstylekeyproperty.overridemetadata(typeof(myheaderedcontentcontrol), new frameworkpropertymetadata(typeof(myheaderedcontentcontrol)));
    }
}

控件代码负责定义控件的结构和行为。myheaderedcontentcontrol.cs的代码如上所示，只包含一个静态构造函数及一句 defaultstylekeyproperty.overridemetadata。defaultstylekey是用于查找控件样式的键，没有这句代码控件就找不到默认样式。

4.2 defaultstyle

<style targettype="{x:type local:myheaderedcontentcontrol}">
    <setter property="template">
        <setter.value>
            <controltemplate targettype="{x:type local:myheaderedcontentcontrol}">
                <border background="{templatebinding background}"
                        borderbrush="{templatebinding borderbrush}"
                        borderthickness="{templatebinding borderthickness}">
                </border>
            </controltemplate>
        </setter.value>
    </setter>
</style>

在第一次创建控件后visualstudio会自动创建themes/generic.xaml，并且插入上面的xaml。这段xaml即mycustomcontrol的defaultstyle，它负责定义控件的外观及属性的默认值。注意其中两个targettype="{x:type local:myheaderedcontentcontrol}"，第一个用于匹配myheaderedcontentcontrol.cs中的defaultstylekey，第二个确定controltemplete针对的控件类型，两个都不可以移除。style的内容是一组setter的集合，除了template外，还可以添加其它的setter指定控件的各属性默认值。

注意，不可以为这个style设置x:key。

5. 在defaultstyle上实现contentcontrol的基础部分

接下来将myheaderedcontentcontrol的父类修改为contentcontrol。

如果只看常用属性的话，contentcontrol的定义可以简化为以下代码：

[contentproperty("content")]
public class contentcontrol : control
{
    public static readonly dependencyproperty contentproperty;
    public static readonly dependencyproperty contenttemplateproperty;

    public object content { get; set; }
    public datatemplate contenttemplate { get; set; }

    protected virtual void oncontentchanged(object oldcontent, object newcontent);
    protected virtual void oncontenttemplatechanged(datatemplate oldcontenttemplate, datatemplate newcontenttemplate);
}

对应的defaultstyle可以如下实现：

<style targettype="{x:type local:myheaderedcontentcontrol}">
    <setter property="istabstop"
            value="false" />
    <setter property="template">
        <setter.value>
            <controltemplate targettype="local:myheaderedcontentcontrol">
                <contentpresenter contenttemplate="{templatebinding contenttemplate}"
                                  margin="{templatebinding padding}"
                                  horizontalalignment="{templatebinding horizontalcontentalignment}"
                                  verticalalignment="{templatebinding verticalcontentalignment}" />
            </controltemplate>
        </setter.value>
    </setter>
</style>

defaultstyle的内容也不多，简单讲解一下。

contentpresenter
contentpresenter用于显示内容，默认绑定到contentcontrol的content属性。基本上所有contentcontrol中都包含一个contentpresenter。contentpresenter直接从frameworkelement派生。

templatebinding
用于单向绑定controltemplate所在控件的功能属性，例如margin="{templatebinding padding}"几乎等效于margin="{binding margin,relativesource={relativesource mode=templatedparent},mode=oneway}"，相当于一种简化的写法。但它们之间有如下不同:

• templatebinding只能用在controltemplate中。
• templatebinding的源和目标属性都必须是依赖属性。
• templatebinding不能使用typeconverter，所以源属性和目标属性必须为相同的数据类型。

通常在contentpresenter上使用templatebinding的属性不会太多，因为很大一部分control的属性的值都可继承，即默认使用visualtree上父节点所设置的属性值，譬如字体属性(如fontsize、fontfamily)、datacontext等。

除了可继承值的属性，需要适当地将controltemplate中的元素属性绑定到所属控件的属性，例如margin="{templatebinding padding}"，这样可以方便控件的使用者通过属性调整ui。

istabstop

了解istabstop的作用有助于处理好自定义控件的焦点。

<groupbox>
    <textbox />
</groupbox>
<groupbox>
    <textbox />
</groupbox>

在上面这个ui中，在第一个textbox获得焦点时按下tab后第二个textbox将获得焦点，这很自然。但如果换成下面这段xaml:

<contentcontrol>
    <textbox />
</contentcontrol>
<contentcontrol>
    <textbox />
</contentcontrol>

结果就如上面截图显示，第二个textbox没有获得焦点，焦点被包含它的contentcontrol获取了，要再按一次 tab textbox才能获得焦点。这是由于contentcontrol的istabstop属性默认为true。istabstop指示是否将某个控件包含在 tab 导航中,tab的导航顺序是用深度优先算法搜索visualtree上的control，所以contentcontrol优先获得了焦点。如果contentcontrol作为一个容器的话（如groupbox）istabstop属性都应该设置为false。

通过setter改变默认值
通常从父控件继承而来的属性很少在构造函数中设置默认值，而是在defaultstyle的setter中设置默认值。myheaderedcontentcontrol为了将istabstop改为false而在style添加了property="istabstop"的setter。

6. 添加header和headertemplate依赖属性

现在模仿headeredcontentcontrol为myheaderedcontentcontrol添加header和headertemplate属性。

在自定义控件中添加属性时应尽量使用依赖属性（有些只读属性可以使用clr属性），因为只有依赖属性才可以作为binding的target。wpf中创建依赖属性可以做到很复杂，而再简单也要好几行代码。在自定义控件中创建依赖属性通常包含以下几部分：

1. 注册依赖属性并生成依赖属性标识符。依赖属性标识符为一个public static readonly dependencyproperty字段。依赖属性标识符的名称必须为“属性名+property”。在propertymetadata中指定属性默认值。

2. 实现属性包装器。为属性提供 clr get 和 set 访问器，在getter和setter中分别调用getvalue和setvalue，除此之外getter和setter中不应该有其它任何自定义代码。

3. 需要监视属性值变更。在propertymetadata中定义一个propertychangedcallback方法，因为这个方法是静态的，可以再实现一个同名的实例方法（可以参考contentcontrol的oncontentchanged方法）。

/// <summary>
/// 获取或设置header的值
/// </summary>  
public object header
{
    get => (object)getvalue(headerproperty);
    set => setvalue(headerproperty, value);
}

/// <summary>
/// 标识 header 依赖属性。
/// </summary>
public static readonly dependencyproperty headerproperty =
    dependencyproperty.register(nameof(header), typeof(object), typeof(myheaderedcontentcontrol), new propertymetadata(default(object), onheaderchanged));

private static void onheaderchanged(dependencyobject obj, dependencypropertychangedeventargs args)
{
    var oldvalue = (object)args.oldvalue;
    var newvalue = (object)args.newvalue;
    if (oldvalue == newvalue)
        return;

    var target = obj as myheaderedcontentcontrol;
    target?.onheaderchanged(oldvalue, newvalue);
}

/// <summary>
/// header 属性更改时调用此方法。
/// </summary>
/// <param name="oldvalue">header 属性的旧值。</param>
/// <param name="newvalue">header 属性的新值。</param>
protected virtual void onheaderchanged(object oldvalue, object newvalue)
{
}

上面代码为myheaderedcontentcontrol添加了header属性（headertemplate的代码大同小异就不写出来了）。请注意我使用object类型，在wpf中content、header、title这类属性最好是object类型，这样不仅可以使用文字，还可以是uielement如图片或其他控件。protected virtual void onheaderchanged(object oldvalue, object newvalue)目前只是个空函数，但为了派生类着想不要吝啬这一行代码。

依赖属性的默认值可以在注册依赖属性时在propertymetadata中设置，通常为属性类型的默认值，也可以在defaultstyle的setter中设置，不推荐在构造函数中设置。

依赖属性的定义代码比较复杂，我一直都是用代码段生成，可以参考我另一篇博客为附加属性和依赖属性自定义代码段（兼容uwp和wpf）。

添加依赖属性后再更新控件模板，这个控件就基本完成了。

<controltemplate targettype="local:myheaderedcontentcontrol">
    <border background="{templatebinding background}"
            borderbrush="{templatebinding borderbrush}"
            borderthickness="{templatebinding borderthickness}">
        <grid>
            <grid.rowdefinitions>
                <rowdefinition height="auto" />
                <rowdefinition height="*" />
            </grid.rowdefinitions>
            <contentpresenter content="{templatebinding header}"
                              contenttemplate="{templatebinding headertemplate}" />
            <contentpresenter grid.row="1"
                              contenttemplate="{templatebinding contenttemplate}"
                              margin="{templatebinding padding}"
                              horizontalalignment="{templatebinding horizontalcontentalignment}"
                              verticalalignment="{templatebinding verticalcontentalignment}" />
        </grid>
    </border>
</controltemplate>

7. 结语

虽然尽量精简，但结果这篇文章仍是太长，而且很多关键的技术仍未介绍到。

更深入的内容会在后续文章中逐渐介绍，敬请期待。

8. 参考

silverlight 控件自定义
customizing the appearance of an existing control by using a controltemplate