【WPF学习】第六十四章 构建基本的用户控件

　　创建一个简单用户控件是开始自定义控件的好方法。本章主要介绍创建一个基本的颜色拾取器。接下来分析如何将这个控件分解成功能更强大的基于模板的控件。

　　创建基本的颜色拾取器很容易。然而，创建自定义颜色拾取器仍是有价值的联系，因为这不仅演示了构建控件的各种重要概念，而且提供了一个实用的功能。

　　可为颜色拾取器创建自定义对话框。但如果希望创建能集成进不同窗口的颜色拾取器，使用自定义控件是更好的选择。最简单的自定义控件类型是用户控件，当设计窗口或页面时通过用户控件可以使用相同的方式组装多个元素。因为仅通过直接组合现有控件并添加功能并不能实现颜色拾取器，所以用户控件看起来是更合理的选择。

　　典型的颜色拾取器允许用户通过单击颜色梯度中的某个位置或分别指定红、绿和蓝三元色成分来选择颜色。下图显示了创建的基本颜色拾取器。该颜色拾取器包含三个slider控件，这些控件用于调节颜色成分，同时使用rectangle元素预览选择的颜色。

一、定义依赖性属性

　　创建颜色拾取器的第一步是为自定义控件库项目添加用户控件。当添加用户控件后，visual studio会创建xaml标记文件和相应的包含初始化代码即事件处理代码的自定义类。这与创建新的窗口或也卖弄是相同的——唯一的区别在与*容器是usercontrol类：

<usercontrol x:class="customcontrols.colorpickerusercontrol"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:ignorable="d"  name="colorpicker">
</usercontrol>

　　最简单的起点是设计用户控件对外界公开的公共接口。换句话说，就是设计控件使用者使用的鱼颜色拾取器进行交互的属性、方法和事件。

　　最基本的细节是color属性——毕竟，颜色拾取器不过是用于显示和选择颜色的特定工具。为支持wpf特性，如数据绑定、样式以及动画，控件的可写属性几乎都是依赖项属性。

　　在前面章节中学习过，创建依赖项属性的第一步是为之定义静态字段，并在属性名称的后面加上单词property:

public static dependencyproperty colorproperty;

　　color属性将允许控件使用者通过代码设置或检索颜色值。然而，颜色拾取器中的滑动条控件也允许用户修改当前颜色的一个方面。为实现这一设计，当滑动条额值发生变化时，需要使用事件处理程序进行响应，并且响应地更新color属性。但使用数据绑定关联滑动条会更加清晰。为使用数据绑定，需要将每个颜色成分定义为单独的依赖项属性：

public static dependencyproperty redproperty;
public static dependencyproperty greenproperty;
public static dependencyproperty blueproperty;

　　尽管color属性存储了system.windows.media.color对象，但red、green以及blue属性将存储表示每个颜色成分的单个字节值。

　　为属性定义静态字段只有第一步。还需要有静态构造函数，用于在用户控件中注册这些依赖性属性，指定属性的名称、数据类型以及拥有属性的控件类。可通过传递具有正确标记设置的frameworkpropertymetadata对象，在静态构造函数中指定选择的特定属性特性(如值继承)。还可指出在什么地方为验证、数据强制以及属性更改通知关联回调函数。

　　在颜色拾取器中，只需要考虑一个因素——当各种属性变化时需要关联回调函数进行响应。因为red、green和blue属性实际上时color属性的不同表示，并且如果一个属性发生变化，就需要确保其他属性保持同步。

　　下面是注册颜色拾取器的4个依赖性属性的静态构造函数的代码：

static colorpickerusercontrol()
        {
            colorproperty = dependencyproperty.register("color", typeof(color),
                typeof(colorpickerusercontrol),
                new frameworkpropertymetadata(colors.black, new propertychangedcallback(oncolorchanged)));

            redproperty = dependencyproperty.register("red", typeof(byte),
                typeof(colorpickerusercontrol),
                new frameworkpropertymetadata(new propertychangedcallback(oncolorrgbchanged)));

            greenproperty = dependencyproperty.register("green", typeof(byte),
                typeof(colorpickerusercontrol),
                new frameworkpropertymetadata(new propertychangedcallback(oncolorrgbchanged)));

            blueproperty = dependencyproperty.register("blue", typeof(byte),
                typeof(colorpickerusercontrol),
                new frameworkpropertymetadata(new propertychangedcallback(oncolorrgbchanged)));
        }

　　现在已经定义了依赖性属性，可添加标准的属性封装器，使范文它们变得更加容易，并可在xaml中使用它们：

public color color
        {
            get { return (color)getvalue(colorproperty); }
            set { setvalue(colorproperty, value); }
        }
public byte red
        {
            get { return (byte)getvalue(redproperty); }
            set { setvalue(redproperty, value); }
        }

public byte green
        {
            get{return (byte)getvalue(greenproperty);}
            set{setvalue(greenproperty,value);}
        }
public byte blue
        {
            get { return (byte)getvalue(blueproperty); }
            set { setvalue(blueproperty, value); }
        }

　　请记住，属性封装器不能包含任何逻辑，因为可直接使用dependencyobject基类的setvalue()和getvalue()方法设置和检索属性。例如，在这个示例中的属性同步逻辑是使用回调函数实现的，当属性发生变化时通过属性封装器或者直接调用setvalue()方法引发回调函数。

　　属性变化回调函数负责使color属性与red、green以及blue属性保持一致。无论何时red、green以及blue属性发生变化，都会相应地调整color属性：

private static void oncolorrgbchanged(dependencyobject sender, dependencypropertychangedeventargs e)
        {
            colorpickerusercontrol colorpicker = (colorpickerusercontrol)sender;
            color color = colorpicker.color;
            if (e.property == redproperty)
                color.r = (byte)e.newvalue;
            else if (e.property == greenproperty)
                color.g = (byte)e.newvalue;
            else if (e.property == blueproperty)
                color.b = (byte)e.newvalue;

            colorpicker.color = color;
        }

　　当设置color属性时，也会更新red、green和blue值：

 private static void oncolorchanged(dependencyobject sender, dependencypropertychangedeventargs e)
        {
            colorpickerusercontrol colorpicker = (colorpickerusercontrol)sender;
            color oldcolor = (color)e.oldvalue;
            color newcolor = (color)e.newvalue;
            colorpicker.red = newcolor.r;
            colorpicker.green = newcolor.g;
            colorpicker.blue = newcolor.b;
        }

　　尽管很明显，但当各个属性试图改变其他属性时，上面的代码不会引起一系列无休止的调用。因为wpf不允许重新进入属性变化回调函数。例如，如果改变color顺序，就会触发oncolorchanged()方法。oncolorchanged()方法会修改red、green以及blue属性，从而触发oncolorrgbchanged()回调方法三次（每个属性触发一次）。然而，oncolorrgbchanged()方法不会再次触发oncolorchanged()方法。

二、定义路由事件

　　通过添加路由事件，当发生一些事情时用于通知控件使用者。在颜色拾取器示例中，当颜色发生变化后，触发一个事件是很有用处的。尽管可将这个事件定义为普通的.net事件，但使用路由事件可提供冒泡和隧道特性，从而可在更高层次的父元素中处理事件。

　　与依赖项属性一样，定义路由事件的一个步骤是为值创建静态属性，并在时间名称的后面添加单词event:

public static readonly routedevent colorchangedevent;

　　然后可在静态构造函数中注册事件。在静态构造函数中指定事件的名称、路由策略、签名以及拥有事件的类：

colorchangedevent = eventmanager.registerroutedevent("colorchanged", routingstrategy.bubble,
                typeof(routedpropertychangedeventhandler<color>), typeof(colorpickerusercontrol));

　　不一定要为事件签名创建新的委托，有时可重用已经存在的委托。两个有用的委托是routedeventhandler(用于不带额外信息的路由事件)和routedpropertychangedeventhandler(用于提供属性发生变化之后的旧值和新值得路由事件)。上例中使用routedpropertychangedeventhandler委托，是被类型参数化了的泛型委托。所以，可为任何属性数据类型使用该委托，而不会牺牲类型安全功能。

　　定义并注册事件后，需要创建标准的.net事件封装器来公开事件。事件封装器可用于关联和删除事件监听程序：

public event routedpropertychangedeventhandler<color> colorchanged
        {
            add { addhandler(colorchangedevent, value); }
            remove { removehandler(colorchangedevent, value); }
        }

　　最后的细节是在适当时候引发事件的代码。该代码必须调用继承自dependencyobject基类的raiseevent()方法。

　　在颜色拾取器示例中，只需要在oncolorchanged()方法之后添加如下代码即可：

routedpropertychangedeventargs<color> args = new routedpropertychangedeventargs<color>(oldcolor, newcolor);
args.routedevent = colorchangedevent;
colorpicker.raiseevent(args);

　　请记住，无论何时修改color属性，不管是直接修改还是通过修改red、green以及blue成分，都会触发oncolorchanged()回调函数。

三、添加标记

　　现在已经定义好用户控件的公有接口，需要做的所有工作就是创建控件外观的标记。在这个示例中，需要使用一个基本grid控件将三个slider控件和预览颜色的rectangle元素组合在一起。技巧是使用数据绑定表达式，将这些控件连接到合适的属性，而不需要使用事件处理代码。

　　总之，颜色拾取器中总共使用4个数据绑定表达式。三个滑动条被绑定到red、green和blue属性。而且属性值得允许范围是0~255(一个字节可以接受的数值)。rectangle.fill属性使用solidcolorbrush画刷进行设置。画刷的color属性被绑定到用户控件的color属性。

　　下面是完整的标记：

<usercontrol x:class="customcontrols.colorpickerusercontrol"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:ignorable="d"  name="colorpicker">
    <grid>
        <grid.rowdefinitions>
            <rowdefinition height="auto"/>
            <rowdefinition height="auto"/>
            <rowdefinition height="auto"/>
        </grid.rowdefinitions>
        <grid.columndefinitions>
            <columndefinition></columndefinition>
            <columndefinition width="auto"></columndefinition>
        </grid.columndefinitions>
        <slider name="sliderred" minimum="0" maximum="255"
                margin="{binding elementname=colorpicker,path=padding}"
                value="{binding elementname=colorpicker,path=red}"></slider>
        <slider grid.row="1" name="slidergreen" minimum="0" maximum="255"
                margin="{binding elementname=colorpicker,path=padding}"
                value="{binding elementname=colorpicker,path=green}"></slider>
        <slider grid.row="2" name="sliderblue" minimum="0" maximum="255"
                margin="{binding elementname=colorpicker,path=padding}"
                value="{binding elementname=colorpicker,path=blue}"></slider>
        <rectangle grid.column="1" grid.rowspan="3" 
                   margin="{binding elementname=colorpicker,path=padding}"
                   width="50" stroke="black" strokethickness="1">
            <rectangle.fill>
                <solidcolorbrush color="{binding elementname=colorpicker,path=color}"></solidcolorbrush>
            </rectangle.fill>
        </rectangle>
    </grid>
</usercontrol>

　　用于用户控件的标记和无外观控件的控件模板扮演相同的角色。如果希望使标记中的一些细节是可配置的，可使用将他们连接到控件属性的绑定表达式。例如，目前rectangle元素的宽度被固定为50个单位。然而，可使用数据绑定表达式从用户控件的依赖性属性中提取数值来代替这些细节。这样，控件使用者可通过修改属性来选择不同的宽度。同样，可使笔画颜色和宽度也是可变的。然而，如果希望使控件具有真正的灵活性，最好的创建无外观的控件，并在模板中定义标记。

　　偶尔可选用数据绑定表达式，重用已在控件中定义过的核心属性。例如，usercontrol类使用padding属性在外侧边缘和用户定义的内部内容之间添加空间(这一细节是通过usercontrol控件的控件模板实现的)。然而，也可以使用padding属性在每个滑动条的周围设置空间，如下所示：

 <slider name="sliderred" minimum="0" maximum="255"
                margin="{binding elementname=colorpicker,path=padding}"
                value="{binding elementname=colorpicker,path=red}"></slider>

　　类似地，也可从usercontrol类的borderthickness和borderbrush属性为rectan元素获取边框设置。同样，这样快捷方式对于创建简单的控件是非常合理的，但可通过引入额外的属性(如slidermargin、previewborderbrush以及previewborderthickness)或创建功能完备的基于模板的控件加以改进。

四、使用控件

　　现在完成了控件，使用该控件很容易。为在另一个窗口中使用颜色拾取器，首先需要将程序集合.net名称控件映射到xaml名称空间，如下所示：

<window x:class="customcontrolsclient.colorpickerusercontroltest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lib="clr-namespace:customcontrols;assembly=customcontrols"  ...>

　　使用定义的xml名称控件和用户控件类名，在xaml标记中可像创建其他类型的对象那样创建自定义的用户控件。还可在控件标记中设置它的属性，以及直接关联事件处理程序，如下所示：

<lib:colorpickerusercontrol 
        name="colorpicker" margin="2" padding="3" colorchanged="colorpicker_colorchanged"  color="yellow"></lib:colorpickerusercontrol>

　　因为color属性使用color数据类型，并且color数据类型使用typeconverter特性进行了修饰，所以在设置color属性之前，wpf知道使用colorconverter转换器将颜色名称字符串转换成相应的color对象。

　　处理colorchanged事件的代码很简单：

private void colorpicker_colorchanged(object sender, routedpropertychangedeventargs<color> e)
        {
            if (lblcolor != null) lblcolor.text = "the new color is " + e.newvalue.tostring();
        }

　　现在已经完成了自定义控件。

五、命令支持

　　许多控件具有命令支持。可使用以下两种方法为自定义控件添加命令支持：

• 　　添加将控件链接到特定命令的命令绑定。通过这种方法，控件可以相应命令，而且不需要借助于任何外部代码。
• 　　为命令创建新的routeduicommand对象，作为自定义控件的静态字段。然后为这个命令对象添加命令绑定。这种方法可使自定义控件自动支持没有在基本命令类集合中定义的命令。

　　接下来的将使用第一种方法为applicationcommands.undo命令添加支持。

　　在颜色拾取器中为了支持undo功能，需要使用成员字段跟踪以前选择的颜色：

private color? previouscolor;

　　将该字段设置为可空是合理的，因为当第一次创建控件时，还没有设置以前选择的颜色。

　　当颜色发生变化时，只需要记录旧值。可通过在oncolorchanged()方法的最后添加以下代码行来达到该目的：

colorpicker.previouscolor = oldcolor;

　　现在已经具备了支持undo命令需要的基础框架。剩余的工作是创建将控件链接到命令以及处理canexecute和executed事件的命令绑定。

　　第一次创建控时是创建命令绑定的最佳时机。例如，下面的代码使用颜色拾取器的构造函数为applicationcommands.undo命令添加命令绑定：

 public colorpickerusercontrol()
        {
            initializecomponent();
            setupcommands();
        }

        private void setupcommands()
        {
            commandbinding binding = new commandbinding(applicationcommands.undo,
                undocommand_executed, undocommand_canexecute);
            this.commandbindings.add(binding);
        }

　　为使命令奏效，需要处理canexecute事件，并且只要有以前的颜色值就允许执行命令：

private void undocommand_canexecute(object sender, canexecuteroutedeventargs e)
        {
            e.canexecute = previouscolor.hasvalue;
        }

　　最后，当执行命令后，可交换新的颜色：

private void undocommand_executed(object sender, executedroutedeventargs e)
        {
            this.color = (color)previouscolor;
        }

　　可通过两种不同方式触发undo命令。当用户控件中的某个元素具有焦点时，可以使用默认的ctrl+z组合键绑定，也可为客户添加用于触发命令的按钮，如下所示：

<button command="undo" commandtarget="{binding elementname=colorpicker}"  margin="5,0,5,0" padding="2">undo</button>

　　这两种方法都会丢弃当前颜色并应用以前的颜色。

 

　　更可靠的命令

　　前面描述的技术是将命令链接到控件的相当合理的方法，但这不是在wpf元素和专业控件中使用的技术。这些元素使用更可靠的方法，并使用commandmanager.registerclasscommandbinding()方法关联静态的命令处理程序。

　　上一个示例中演示的实现存在问题：使用公用commandbindings集合。这使得命令比较脆弱，因为客户可*修改commandbindings集合。而使用registerclasscommandbinding()方法无法做到这一点。wpf控件使用的就是这种方法。例如，如果查看textbox的commandbindings集合，不会发现任何用于硬编码命令的绑定，例如undo、redo、cut、copy以及paste等命令，因为他们被注册为类绑定。

　　这种技术非常简单。不在实例构造函数中创建命令绑定，而必须在静态构造函数中创建命令绑定，使用如下所示的代码：

commandmanager.registerclasscommandbinding(typeof(colorpickerusercontrol),
                new commandbinding(applicationcommands.undo, undocommand_executed, undocommand_canexecute));

　　尽管上面的代码变化不大，但有一个重要变化。因为 undocommand_executed()和undocommand_canexecute()方法是在构造函数中引用的，所以必须是静态方法。为检索实例数据（例如当前颜色和以前颜色的信息），需要将事件发送者转换为colorpickerusercontrol对象，并使用该对象。

　　下面是修改之后的命令处理代码：

private static void undocommand_canexecute(object sender, canexecuteroutedeventargs e)
        {
            colorpickerusercontrol colorpicker = (colorpickerusercontrol)sender;
            e.canexecute =colorpicker.previouscolor.hasvalue;
        }

private static void undocommand_executed(object sender, executedroutedeventargs e)
        {
            colorpickerusercontrol colorpicker = (colorpickerusercontrol)sender;
            colorpicker.color = (color)colorpicker.previouscolor.value;
        }

　　此外，这种技术不局限于命令。如果希望将事件处理逻辑硬编码到自定义控件，可通过eventmanager.registerclasshandler()方法使用类事件处理程序。类事件处理程序总在实例事件处理程序之前调用，从而允许开发人员很容易地抑制事件。

六、深入分析用户控件

　　用户控件提供了一种非常简单的，但是有一定限制的创建自定义控件的方法。为理解其中的原因，深入分析用户控件的工作原理是很有帮助的。

　　在后台，usercontrol类的工作方式和其父类contentcontrol非常类似。实际上，只有几个重要的区别：

• 　　usercontrol类改变了一些默认值。即该类将istabstop和focusable属性设置为false(从而在tab顺序中没有占据某个单独的额位置)，并将horizontalalignment和verticalalignment属性设置为stretch(而非left或top)，从而可以填充可用空间。
• 　　usercontrol类应用了一个新的控件模板，该模板由包含contentpresenter元素的border元素组成。contentpresenter元素包含了用标记添加的内容。
• 　　usercontrol类改变了路由事件的源。当事件从用户控件内的控件向用户控件外的元素冒泡或隧道路由时，事件源变为指向用户控件而不是原始元素。这提供了更好的封装性。

　　用户控件和其他类型的自定义控件之间最重的区别是设计用户控件的方法。与所有控件一样，用户控件有控件模板。然而，很少改变控件模板——反而，将作为自定义用户控件类的一部分提供标记，并且当创建了控件后，会使用initializecomponet()方法处理这个标记。另一个方面，无外观控件是没有标记——需要的所有内容都在模板中。

　　普通的contentcontrol控件具有下面的简单模板：

<controltemplate targettype="contentcontrol">
    <contentpresenter
        contenttemplate="{templatebinding contentcontrol.contenttemplate}"
        content="{templatebinding contentcontrol.content}"/>
</controltemplate>

　　这个模板仅填充所提供的内容并应用可选的内容模板。padding、background、horizontalalignment以及verticalalignment等熟悉没有任何影响(除非显示绑定属性)。

　　usercontrol类有一个类似的模板，并又更多的细节。最明显的是，它添加了一个border元素并将其属性绑定到用户控件的borderbrush、borderthickness、background以及padding属性，以确保它们具有相同的含义。此外，内部的contentpresenter元素已绑定到对齐属性。

<controltempalte targettype="usercontrol">
    <border borderbrush="{templatebinding border.borderbrush}"
       borderthickness="{templatebinding border.borderthickness}"
       background="{templatebinding border.background}"
       padding="{templatebinding border.padding}"
       snapstodevicepixels="true">
        <contentpresenter
            horizontalalignment="{templatebinding control.horizontalalignment}"
            verticalalignment="{templatebinding control.verticalalignment}"
            snapstodevicepixels="{templatebinding uielement.snapstodevicepixels}"
            contenttemplate="{templatebinding contentcontrol.contenttemplate}"
            content="{templatebinding contentcontrol.content}"/>
    </border>
</controltemplate>

　　从技术角度看，可改变用户控件的模板。实际上，只需要进行很少的调整，就可以将所有标记移到模板中。但却是没有理由采取该方法——如果希望得到更灵活的控件，时可视化外观和由自定义控件类定义的借款分开，创建无外观的自定义控件可能会更好一些。

　　本章程序源代码：customcontrol.zip