【WPF学习】第六十二章 构建更复杂的模板

　　在控件模板和为其提供支持的代码之间又一个隐含约定。如果使用自定义控件模板替代控件的标准模板，就需要确保新模板能够满足控件的实现代码的所有需要。

　　在简单控件中，这个过程比较容易，因为对模板几乎没有(或完全没有)什么真正的需求。对于复杂控件，问题就显得有些微妙了，因为控件的外观和实现不可能完全相互独立的。对于这种情况，控件需要对其可视化显示做出一些假设，而不管曾经被设计的多好。

　　在前面已经看到了控件模板的这种需求的两个例子，占位元素(如contentpresenter和itemspresenter)和模板绑定。接下来的将例举另外两个例子：具有特定名称(以part_开头)的元素和专门设计的用于控件模板的元素(如scrollbar控件中的track元素)。为成功地创建控件模板，需要仔细查看相关控件的标准模板，并注意分析这4种技术的用法，然后将他们复制到自己的模板中。

一、嵌套的模板

　　按钮控件的模板可分解成几个较简单的部分。然而，许多模板并非如此简单。在某些情况下，控件模板将包含每个自定义模板也需要的大量元素。而在有些情况下，改变控件的外观涉及创建多个模板。

　　例如，假设计划修改熟悉的listbox控件。创建这个示例的第一步是为listbox控件设计模板，并酌情添加自动应用模板的样式。下面的标记将这两个要素合并到一起：

<style targettype="{x:type listbox}">
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type listbox}">
                    <border name="border" 
                            background="{staticresource listboxbackgroundbrush}"
                            borderbrush="{staticresource standardborderbrush}"
                            borderthickness="1"
                            cornerradius="3"
                            >
                        <scrollviewer focusable="false">
                            <itemspresenter margin="2"></itemspresenter>
                        </scrollviewer>
                    </border>
                </controltemplate>
            </setter.value>
        </setter>
    </style>

　　该样式使用两个画刷绘制边框和背景。实际模板是标准模板listbox的简化版本，但没有使用listboxchrome类，而使用了较简单的border元素。在border元素内部是为列表提供滚动功能的scrollviewer元素以及容纳所有列表项的itemspresenter元素。

　　对于该模板，最值的注意之处是它未提供的功能——配置列表中各项的外观。没有该功能，呗选择的元素总是使用熟悉的蓝色背景突出显示。为改变这种行为，需要为listboxitem控件添加控件模板，listboxitem控件是封装列表中每个单独元素内容的内容控件。

　　与listbox模板一样，可使用元素类型样式应用listboxitem模板。下面的基本模板在一个不可见的边框中封装了每个项。因此listboxitem是内容控件，所以需要使用contentpresenter的触发器：

<style targettype="{x:type listboxitem}">
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type listboxitem}">
                    <border name="border"
                            borderthickness="2" cornerradius="3" padding="1">
                        <contentpresenter/>
                    </border>
                    <controltemplate.triggers>
                        <eventtrigger routedevent="listboxitem.mouseenter">
                            <eventtrigger.actions>
                                <beginstoryboard>
                                    <storyboard>
                                        <doubleanimation storyboard.targetproperty="fontsize" to="20" duration="0:0:1"></doubleanimation>
                                    </storyboard>
                                </beginstoryboard>
                            </eventtrigger.actions>
                        </eventtrigger>
                        <eventtrigger routedevent="listboxitem.mouseleave">
                            <eventtrigger.actions>
                                <beginstoryboard>
                                    <storyboard>
                                        <doubleanimation storyboard.targetproperty="fontsize" begintime="0:0:0.5" duration="0:0:0.2"></doubleanimation>
                                    </storyboard>
                                </beginstoryboard>
                            </eventtrigger.actions>
                        </eventtrigger>
                        <trigger  property="ismouseover" value="true">
                            <setter targetname="border" property="borderbrush" value="{staticresource hoverborderbrush}"></setter>
                        </trigger>
                        <trigger property="isselected" value="true">
                            <setter targetname="border" property="background" value="{staticresource selectedbackgroundbrush}"/>
                            <setter targetname="border" property="textblock.foreground" value="{staticresource selectedforegroundbrush}"/>
                        </trigger>
                    </controltemplate.triggers>
                </controltemplate>
            </setter.value>
        </setter>
    </style>

　　总之，可以使用这两个模板创建当将鼠标移动到当前定位的项上时使用动画放大项的列表框。因为每个listboxitem可具有自己的动画，所以当用户在列表框中上下移动鼠标时，将看到几个项开始增大，然后再次收缩，创建了动人的“鱼眼”效果(当将鼠标悬停在项上时，使用具有动画的变换，可实现更夸张的鱼眼效果，放大项并使项变形)。

　　尽管不可能在一幅图像中捕获这种效果，下图显示了将鼠标快速移过几个项之后该列表的快照。

　　在此不会重新分析整个listboxitem模板示例，因为它由许多不同部分构建，包括用于设置listbox控件、listboxitem控件以及listbox控件的各种组成元素(如滚动条)样式的部分，其中重要的部分是改变listboxitem模板的样式。

　　在这个示例中，listboxitem对象较缓慢地扩大(经过1秒)，然后更快地进行缩小(经过0.2s)。然而，在开始缩小动画之前有0.5秒得延迟。

　　需要注意，缩小动画省略了from和to属性。通过这种方式，缩小动画总将文本从当前尺寸缩小到它原来的尺寸。如果将鼠标移到listboxitem上然后移开，就会得到所期望的效果——当鼠标停留在项上时，项会不断地扩张，当移走鼠标时项会不断地缩小。

二、修改滚动条

　　列表框还有一个方向没有改变：右边的滚动条。它是scrollviewer元素的一部分，scrollviewer元素是listbox模板的一部分。尽管该例重新定义了listbox模板，但没有替换scrollbar的scrollviewer。

　　为自定义该细节，可为listbox控件创建一个新的scrollviewer模板。然后可将scrollviewer模板指向自定义的scrollbar模板。然而，还有更简单的选择。可创建一个改变所有scrollbar控件模板的特定于元素类型的样式。这样就避免了创建scrollviewer模板所需的额外的工作。

　　当然，还需要考虑这种设计会对应用程序的其他部分造成什么影响。如果创建元素类型样式scrollbar，并将其添加到窗口的resources集合中，对于窗口中的所有控件，无论何时使用scrollbar控件，都会有新样式的滚动条，这可能正是你所希望的效果。另一方面，如果希望只改变listbox控件中的滚动条，就必须为listbox控件本身的资源集合添加元素类型样式scrollbar。

　　滚动条的背景由track类表示——实际上时一个具有阴影并且被拉伸占满整个滚动条长度的矩形。滚动条的末尾处是按钮，通过这些按钮可以向上或向下(或向左或向右)滚动一个步长。这些按钮是repeatbutton类的实例，该类继承自buttonbase类。repeatbutton类和普遍button类之间的重要区别在于，如果在repeatbutton按钮上保持鼠标为按下状态，就会反复触发click事件（对于滚动条这是非常方便的）。

　　在滚动条的中间是代表滚动内容中当前位置的thumb元素。并且最有趣的是，滑块两侧的空白实际上由另外两个repeatbutton对象构成，它们都是透明的。当单击这两个按钮中的一个时，滚动条会滚动一整页(一页是滚动内容所在的可见窗口中的内部容量)。通过单击滑块两侧的条形区域，可快速浏览滚动内容，这一功能是大家所熟悉的。

　　下面是用于垂直滚动条的模板：

<controltemplate x:key="verticalscrollbar" targettype="{x:type scrollbar}">
        <grid>
            <grid.rowdefinitions>
                <rowdefinition maxheight="18"/>
                <rowdefinition height="*"/>
                <rowdefinition maxheight="18"/>
            </grid.rowdefinitions>

            <repeatbutton grid.row="0" height="18"
        style="{staticresource scrollbarlinebuttonstyle}"
        command="scrollbar.lineupcommand" >
                <path
              fill="{staticresource glyphbrush}"
              data="m 0 4 l 8 4 l 4 0 z"></path>
            </repeatbutton>
            <track name="part_track" grid.row="1" 
        isdirectionreversed="true" viewportsize="0">
                <track.decreaserepeatbutton>
                    <repeatbutton command="scrollbar.pageupcommand" style="{staticresource scrollbarpagebuttonstyle}">
                    </repeatbutton>
                </track.decreaserepeatbutton>
                <track.thumb>
                    <thumb style="{staticresource scrollbarthumbstyle}">
                    </thumb>
                </track.thumb>
                <track.increaserepeatbutton>
                    <repeatbutton command="scrollbar.pagedowncommand" style="{staticresource scrollbarpagebuttonstyle}">
                    </repeatbutton>
                </track.increaserepeatbutton>
            </track>
            <repeatbutton
        grid.row="3" height="18"
        style="{staticresource scrollbarlinebuttonstyle}"
        command="scrollbar.linedowncommand">
                <path              
              fill="{staticresource glyphbrush}"
              data="m 0 0 l 4 4 l 8 0 z"></path>
            </repeatbutton>
        </grid>
    </controltemplate>

　　一旦理解滚动条的多部分结构，上面的模板就非常直观了。下面列出需要注意的几个要点：

　　垂直滚动条由一个包含三行的网格构成。顶行和底行容纳两端的按钮(并显示为箭头)，它们固定占用18个单位。中间部分容纳track元素，占用剩余空间。

　　两端的repeatbutton元素使用相同的样式。唯一的区别是content属性，该属性包含了一个用于绘制箭头的path对象，因为顶部的按钮具有上箭头而底部的按钮具有下箭头。

　　两个按钮都连接到scrollbar类中的命令(lineupcommand和linedowncommand)。这正是其工作原理。只要提供链接到这个命令的按钮即可，不必考虑按钮的名称是什么，也不必考虑其他外观像什么或使用哪个特定的类。

　　track元素名为part_track。为使scrollbar类能够成功地关联到它的代码，必须使用这个名称。如果查看scrollbar类的默认模板(类似与上面的模板，但更长一些)，也会看到该元素。

　　track.viewportsize属性被设置为0,。这是该模板特有的实现细节，可确保thumb元素总有相同的尺寸(通常，滑块根据内容按比例地改变尺寸，因此如果滚动的内容在窗口中基本上能够显示，这是滑块会变得较长)。

　　track元素封装了两个repeatbutton对象(它们的样式单独定义)和thumb元素。同样，这些按钮通过命令连接到适当的功能。

　　通过上面代码，发现模板使用了键名，明确指定它作为垂直滚动条。当为样式设置键名时，可确保它不能被自动应用，即使同时设置了targettype属性也是如此。该例使用这种方法的原因是，该模板只适用于垂直方向的滚动条，而且如果scrollbar.orientation属性被设置为vertical，元素类型样式会使用触发器自动应用控件模板：

<style targettype="{x:type scrollbar}">
        <setter property="snapstodevicepixels" value="true"/>
        <setter property="overridesdefaultstyle" value="true"/>
        <style.triggers>
            <trigger property="orientation" value="vertical">
                <setter property="width" value="18"/>
                <setter property="height" value="auto" />
                <setter property="template" value="{staticresource verticalscrollbar}" />
            </trigger>
        </style.triggers>
    </style>

　　尽管可以使用相同的基本部分很容易地创建水平滚动条，但该例没有采用该步骤(从而保留了正常样式的水平滚动条)。

　　最后一项任务是填充格式化各个repeatbutton对象和thumb元素的样式。这些样式比较简单，但它们确实改变了滚动条的标准外观。首先，thumb元素的形状被设置成类似椭圆的形状：

<style x:key="scrollbarthumbstyle" targettype="{x:type thumb}">
        <setter property="istabstop" value="false"/>
        <setter property="focusable" value="false"/>
        <setter property="margin" value="1,0,1,0" />
        <setter property="background" value="{staticresource standardbrush}" />
        <setter property="borderbrush" value="{staticresource standardborderbrush}" />
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type thumb}">
                    <ellipse stroke="{staticresource standardborderbrush}"
                     fill="{staticresource standardbrush}"></ellipse>
                </controltemplate>
            </setter.value>
        </setter>
    </style>

　　接下来，在美观的圆圈中绘制两端的箭头。这些圆圈是在控件模板中定义的，而箭头由repeatbutton对象的内容提供，并使用contentpresenter元素插入到控件模板中：

 <style x:key="scrollbarlinebuttonstyle" targettype="{x:type repeatbutton}">
        <setter property="focusable" value="false"/>
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type repeatbutton}">
                    <grid margin="1">
                        <ellipse name="border" strokethickness="1" stroke="{staticresource standardborderbrush}"
                                 fill="{staticresource standardbrush}"></ellipse>
                        <contentpresenter horizontalalignment="center" verticalalignment="center"/>
                    </grid>
                    <controltemplate.triggers>
                        <trigger property="ispressed" value="true">
                            <setter targetname="border" property="fill" value="{staticresource pressedbrush}"/>
                        </trigger>
                    </controltemplate.triggers>
                </controltemplate>
            </setter.value>
        </setter>
    </style>

　　显示在track元素上面的repeatbutton对象没有发生改变。它们只使用透明背景，使track元素可透过它们显示：

<style x:key="scrollbarpagebuttonstyle" targettype="{x:type repeatbutton}">
        <setter property="istabstop" value="false"/>
        <setter property="focusable" value="false"/>
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type repeatbutton}">
                    <border background="transparent" />
                </controltemplate>
            </setter.value>
        </setter>
    </style>

　　与正常的滚动不同，在该模板中没有为track元素指定背景，所以保持原有的透明背景。这样，列表框的轻微阴影渐变可透过滚动条显示。下图是最终的列表框：