[WPF自定义控件]使用WindowChrome自定义Window Style

1. 为什么要自定义window

对稍微有点规模的桌面软件来说自定义的window几乎是标配了，一来设计师总是克制不住自己想想软件更个性化，为了ui的和谐修改window也是必要的；二来多一行的空间可以添加很多功能，尤其是上边缘，因为被屏幕限制住鼠标的移动所以上边缘的按钮很容易选中。做桌面开发总有一天会遇到自定义window的需求，所以我在控件库中也提供了一个简单的自定义window。

2. 我想要的功能

我在上一篇文章介绍了标准window的功能，我想实现一个包含这些基本功能的，窄边框、扁平化的window，基本上模仿windows 10 的window，但要可以方便地自定义样式；阴影、动画效果保留系统默认的就可以了，基本上会很耐看。最后再放置一个functionbar方便添加更多功能。

最后成果如下：

这是一个名为extendedwindow的自定义window，源码地址可见文章最后。

3. windowchrome

3.1 为什么要使用windowchrome自定义window

wpf有两种主流的自定义window的方案，《wpf编程宝典》介绍了使用windowstyle="none" 和allowstransparency="true"创建无边框的window然后在里面仿造一个window，以前也有很多博客详细介绍了这种方式，这里就不再赘述。这种方法的原理是从window中删除non-client area(即chrome)，再由用户自定义window的所有外观和部分行为。这种方式的*度很高，但也有不少问题：

• window没有阴影导致很难看，但添加自定义的dropshadoweffect又十分影响性能;
• 没有弹出、关闭、最大化、最小化动画，尤其当启动了大量任务将任务栏堆满的情况下没有最小化动画很容易找不到自己的程序；
• 没有动画很麻烦，自定义的动画做得不好也十分影响使用；
• 需要写大量代码实现window本来的拖动、改变大小、最大化等行为；
• 各种其它细节的缺失；

大部分自定义window或多或少都有上面所说的问题，幸好wpf提供了windowchrome这个类用于创建自定义的window，这个类本身处理了上面部分问题。

3.2 windowchrome的基本概念

windowchrome定义了window non-client area(即chrome)的外观和行为， 在window上应用windowchrome的windowchrome附加属性即可将window的non-client area替换为windowchrome(绕口):

<windowchrome.windowchrome>
    <windowchrome />
</windowchrome.windowchrome>

然后用blend生成这个window的style，将最外层border的背景移除并做了些简化后大概是这样:

<window.style>
    <style targettype="{x:type window}">
        <setter property="template">
            <setter.value>
                <controltemplate targettype="{x:type window}">
                    <border>
                        <grid>
                            <adornerdecorator>
                                <contentpresenter />
                            </adornerdecorator>
                            <resizegrip x:name="windowresizegrip"
                                        horizontalalignment="right"
                                        istabstop="false"
                                        visibility="collapsed"
                                        verticalalignment="bottom" />
                        </grid>
                    </border>
                    <controltemplate.triggers>
                        <multitrigger>
                            <multitrigger.conditions>
                                <condition property="resizemode" value="canresizewithgrip" />
                                <condition property="windowstate" value="normal" />
                            </multitrigger.conditions>
                            <setter property="visibility" targetname="windowresizegrip" value="visible" />
                        </multitrigger>
                    </controltemplate.triggers>
                </controltemplate>
            </setter.value>
        </setter>
    </style>
</window.style>

这样一个没有content的window运行效果如下：

可以看到windowchrome已经定义好noe-client area的边框、阴影、标题栏、右上角的三个按钮，controletemplate里也在右下角放置了一个resizegrip，而且拖动、改变大小、最大化最小化、动画等功能都已经做好了。除了icon和标题外windowchrome已经把一个标准的window实现得差不多了。要实现自定义window，只需要将我们想要的边框、icon、标题、自定义样式的按钮等放在上面遮挡windowchrome的各种元素就可以了。原理十分简单,接下来再看看windowchrome的各个属性。

3.3 useaerocaptionbuttons

useaerocaptionbuttons表示标题栏上的那三个默认按钮是否可以命中，因为我们想要自己管理这三个按钮的样式、显示或隐藏，所以设置为false。

3.4 glassframethickness和resizeborderthickness

glassframethickness和resizeborderthickness，这两个属性用于控制边框，及用户可以单击并拖动以调整窗口大小的区域的宽度。如果两个都设置为50效果如下：

可以看到因为边框和resizeborder变大了，标题栏也下移了相应的距离(通过可拖动区域和systemmenu的位置判断)。当然因为外观是我们自己定义的，resizeborderthickness也不需要这么宽，所以两个值都保留默认值就可以了。

3.5 captionheight

captionheight指定windowchrome的标题栏高度。它不影响外观，因为windowchrome的标题栏范围实际是不可见的，它包括可以拖动窗体、双击最大化窗体、右键打开systemmenu等行为。

captionheight、glassframethickness和resizeborderthickness的默认值都和systemparameters的对应的值一致。

3.6 ishittestvisibleinchrome附加属性

glassframethickness和captionheight定义了chrome的范围，默认情况下任何在chrome的范围内的元素都不可以交互，如果需要在标题栏放自己的按钮(或其它交互元素)需要将这个按钮的windowschrome.ishittestvisibleinchrome附加属性设置为true。

3.7 使用windowchrome

综上所述，使用windowchrome只需要设置useaerocaptionbuttons为false，并且设置captionheight，比较标准的做法是使用systemparameter的windownonclientframethickness的top，在100% dpi下是 27 像素(其它三个边都为4像素，因为我的目标是窄边框的window，所以不会用这个值)。

<setter property="windowchrome.windowchrome">
    <setter.value>
        <windowchrome useaerocaptionbuttons="false"
                      captionheight="{binding path=(systemparameters.windownonclientframethickness).top}" />
    </setter.value>
</setter>

windowchrome的文档有些旧了，文档中介绍的systemparameters2在.net 4.5已经找不到，在github上还能找到不少它的实现，但没必要勉强用一个旧的api。

4. 自定义window基本布局

<controltemplate targettype="{x:type window}">
    <border borderbrush="{templatebinding borderbrush}"
            borderthickness="{templatebinding borderthickness}"
            x:name="windowborder">
        <grid x:name="layoutroot"
              background="{templatebinding background}">
            <grid.rowdefinitions>
                <rowdefinition height="auto" />
                <rowdefinition height="*" />
            </grid.rowdefinitions>
            <grid x:name="windowtitlepanel"
                  height="{binding path=(systemparameters.windownonclientframethickness).top}"
                  background="{templatebinding borderbrush}"
                  margin="0,-1,0,0">
                <grid.columndefinitions>
                    <columndefinition width="*" />
                    <columndefinition width="auto" />
                </grid.columndefinitions>

                <stackpanel orientation="horizontal">
                    <image source="{templatebinding icon}"
                           height="{x:static systemparameters.smalliconheight}"
                           width="{x:static systemparameters.smalliconwidth}"
                           windowchrome.ishittestvisibleinchrome="true" />
                    <contentcontrol fontsize="{dynamicresource {x:static systemfonts.captionfontsize}}"
                                    content="{templatebinding title}" />
                </stackpanel>

                <stackpanel x:name="windowcommandbuttonspanel"
                            grid.column="1"
                            horizontalalignment="right"
                            orientation="horizontal"
                            windowchrome.ishittestvisibleinchrome="true"
                            margin="0,0,-1,0">
                    <contentpresenter content="{binding functionbar, relativesource={relativesource templatedparent}, mode=oneway}"
                                      focusable="false" />
                    <button x:name="minimizebutton" />
                    <grid margin="1,0,1,0">
                        <button x:name="restorebutton"
                                visibility="collapsed" />
                        <button x:name="maximizebutton" />
                    </grid>
                    <button x:name="closebutton"
                            background="red" />
                </stackpanel>
            </grid>
            <adornerdecorator grid.row="1"
                              keyboardnavigation.istabstop="false">
                <contentpresenter content="{templatebinding content}"
                                  x:name="maincontentpresenter"
                                  keyboardnavigation.tabnavigation="cycle" />
            </adornerdecorator>
            <resizegrip x:name="resizegrip"
                        horizontalalignment="right"
                        verticalalignment="bottom"
                        grid.row="1" />
        </grid>
    </border>
</controltemplate>

上面是简化后的controltemplate及运行时的visualtree结构，它包含以下部分：

• windowborder，外层的边框，它的border颜色即window的边框颜色。
• layoutroot，分为两行，第一行为标题栏，第二行为content。
• 标题栏，里面包含icon、title、functionbar及windowcommandbuttonspanel（包含最小化、最大化、还原和关闭等按钮）。
• maincontentpresenter，即cient area。
• resizegrip。

5. 绑定到systemcommand

systemcommands有5个命令closewindowcommand、maximizewindowcommand、minimizewindowcommand、restorewindowcommand、showsystemmenucommand，并且还提供了closewindow、maximizewindow、minimizewindow、restorewindow、showsystemmenu5个静态方法。window标题栏上的各个按钮需要绑定到这些命名并执行对应的静态方法。写在自定义的window类里太复杂了而且不能重用，所以我把这个功能做成附加属性，用法如下：

<setter property="local:windowservice.isbindingtosystemcommands"
        value="true" />

具体实现代码很普通，就是isbindingtosystemcommands属性改变时调用windowcommandhelper绑定到各个命令：

private class windowcommandhelper
{
    private window _window;

    public windowcommandhelper(window window)
    {
        _window = window;
    }

    public void activecommands()
    {
        _window.commandbindings.add(new commandbinding(systemcommands.closewindowcommand, closewindow));
        _window.commandbindings.add(new commandbinding(systemcommands.maximizewindowcommand, maximizewindow, canresizewindow));
        _window.commandbindings.add(new commandbinding(systemcommands.minimizewindowcommand, minimizewindow, canminimizewindow));
        _window.commandbindings.add(new commandbinding(systemcommands.restorewindowcommand, restorewindow, canresizewindow));
        _window.commandbindings.add(new commandbinding(systemcommands.showsystemmenucommand, showsystemmenu));
    }

    /*some code*/
}

6. ui元素的实现细节

接下来介绍controltemplate中各个ui元素的实现细节。

6.1 标题栏

<grid x:name="windowtitlepanel"
      verticalalignment="top"
      height="{binding path=(systemparameters.windownonclientframethickness).top}"
      background="{templatebinding borderbrush}">

标题栏的高度和windowchrome的captionheight一致，而background则和window的borderbrush一致。

icon

<image source="{templatebinding icon}"
       verticalalignment="center"
       margin="5,0,5,0"
       height="{x:static systemparameters.smalliconheight}"
       width="{x:static systemparameters.smalliconwidth}"
       windowchrome.ishittestvisibleinchrome="true">
    <i:interaction.triggers>
        <i:eventtrigger eventname="mouseleftbuttondown">
            <i:invokecommandaction command="{x:static systemcommands.showsystemmenucommand}" />
        </i:eventtrigger>
        <i:eventtrigger eventname="mouserightbuttondown">
            <i:invokecommandaction command="{x:static systemcommands.showsystemmenucommand}" />
        </i:eventtrigger>
    </i:interaction.triggers>
</image>

icon是一张图片，它的大小由systemparameters.smalliconheight和systemparameters.smalliconwidth决定，通常来说是16 * 16像素。

icon还绑定到systemcommands.showsystemmenucommand，点击鼠标左右键都可以打开systemmenu。

最后记得设置windowchrome.ishittestvisibleinchrome="true"。

title

<contentcontrol istabstop="false"
                foreground="white"
                horizontalalignment="center"
                verticalalignment="center"
                fontsize="{dynamicresource {x:static systemfonts.captionfontsize}}"
                content="{templatebinding title}" />

标题的字号由systemfonts.captionfontsize决定，但颜色、字体都自己定义。

6.2 按钮

<style x:key="minimizebuttonstyle"
       targettype="button"
       basedon="{staticresource windowtitlebarbuttonstyle}">
    <setter  property="tooltip"
             value="minimize" />
    <setter property="contenttemplate"
            value="{staticresource minimizewhite}" />
    <setter property="command"
            value="{binding source={x:static systemcommands.minimizewindowcommand}}" />
</style>

<!--other button styles-->

<button x:name="minimizebutton"
        style="{staticresource minimizebuttonstyle}" />
<grid margin="1,0,1,0">
    <button x:name="restorebutton"
            style="{staticresource restorebuttonstyle}"
            visibility="collapsed" />
    <button x:name="maximizebutton"
            style="{staticresource maximizebuttonstyle}" />
</grid>
<button x:name="closebutton"
        background="red"
        style="{staticresource closebuttonstyle}" />

按钮基本上使用相同的样式，不过closebutton的背景是红色。按钮的图标参考windows 10(具体来说是segoe mdl2里的chromeminimize、chromemaximize、chromerestore、chromeclose，不过没有在项目中引入segoe mdl2字体，而是把它们转换成path来使用)。各个按钮绑定了对应的systemcommand。

6.3 functionbar

<contentpresenter content="{binding functionbar, relativesource={relativesource templatedparent}, mode=oneway}"
                  focusable="false" />

在这篇文章中介绍了functionbar的实现及应用，这段xaml即在标题栏为functionbar留一个占位符。

6.4 clientarea

<adornerdecorator grid.row="1"
                  keyboardnavigation.istabstop="false">
    <contentpresenter content="{templatebinding content}"
                      x:name="maincontentpresenter"
                      keyboardnavigation.tabnavigation="cycle" />
</adornerdecorator>

这是client area部分的内容。一个window中只有client area中的内容可以获得键盘焦点，而且tab键只会让键盘焦点在window的内容中循环。当一个window从非激活状态会到激活状态，之前获得键盘焦点的元素将重新获得键盘焦点。所以adornerdecorator不要让它获得焦点，而maincontentpresenter则要设置为keyboardnavigation.tabnavigation="cycle"。

adornerdecorator 为可视化树中的子元素提供 adornerlayer，如果没有它的话一些装饰效果不能显示（例如下图button控件的focus效果），window的 contentpresenter 外面套个 adornerdecorator 是 必不能忘的。

6.5 resizegrip

<resizegrip x:name="resizegrip"
            horizontalalignment="right"
            verticalalignment="bottom"
            grid.row="1"
            istabstop="false"
            visibility="hidden"
            windowchrome.resizegripdirection="bottomright" />

resizegrip是当resizemode = resizemode.canresizewithgrip;并且windowstate = normal时时出现的window右下角的大小调整手柄，外观为组成三角形的一些点。除了让可以操作的区域变大一些，还可以用来提示window是可以调整大小的。

7. 处理triggers

虽然我平时喜欢用visualstate的方式实现模板化控件ui再状态之间的转变，但有时还是trigger方便快捷，尤其是不需要做动画的时候。自定义window有以下几组需要处理的trigger:

7.1 isnonclientactive

<trigger property="isnonclientactive"
         value="false">
    <setter property="borderbrush"
            value="#ff6f7785" />
</trigger>

这个属性是我自定义的，用于代替isactive，在它为false的时候边框和标题栏变成灰色。

7.2 resizegrip

<multitrigger>
    <multitrigger.conditions>
        <condition property="resizemode"
                   value="canresizewithgrip" />
        <condition property="windowstate"
                   value="normal" />
    </multitrigger.conditions>
    <setter targetname="resizegrip"
            property="visibility"
            value="visible" />
</multitrigger>

上面这段xaml控制resizegrip是否显示。

7.3 buttons

<trigger property="windowstate"
         value="normal">
    <setter targetname="maximizebutton"
            property="visibility"
            value="visible" />
    <setter targetname="restorebutton"
            property="visibility"
            value="collapsed" />
</trigger>
<trigger property="resizemode"
         value="noresize">
    <setter targetname="minimizebutton"
            property="visibility"
            value="collapsed" />
    <setter targetname="maximizebutton"
            property="visibility"
            value="collapsed" />
    <setter targetname="restorebutton"
            property="visibility"
            value="collapsed" />
</trigger>

这两个trigger控制最小化、最大化和还原按钮的状态。最大化、还原两个按钮的isenabled状态由绑定的systemcommand控制。

7.4 maximized

<trigger property="windowstate"
         value="maximized">
    <setter targetname="maximizebutton"
            property="visibility"
            value="collapsed" />
    <setter targetname="restorebutton"
            property="visibility"
            value="visible" />
    <setter targetname="windowborder"
            property="borderthickness"
            value="0" />
    <setter targetname="windowborder"
            property="padding"
            value="{x:static systemparameters.windowresizeborderthickness}" />
    <setter property="margin"
            targetname="layoutroot"
            value="{x:static local:windowparameters.paddedborderthickness}" />
</trigger>

maximized状态下最大化按钮隐藏，还原按钮出现。并且window的margin需要调整，具体留到下一篇文章再说吧。

8. dragmove

有些人喜欢不止标题栏，按住window的任何空白部分都可以拖动window，只需要在代码中添加dragmove即可：

protected override void onmouseleftbuttondown(mousebuttoneventargs e)
{
    base.onmouseleftbuttondown(e);
    if (e.buttonstate == mousebuttonstate.pressed)
        dragmove();
}

但这样做不喜欢dragmove功能的人又会有意见，再添加一个属性来开关这个功能又很麻烦，索性就把它做成windowservice.isdragmoveenabled附加属性，在defaultstyle中设置了。

9. 结语

使用windowchrome自定义window的基本功能就介绍到这里了，但其实windowchrome有很多缺陷，下一篇文章将介绍这些陷阱及讲解如何回避(或者为什么不/不能回避)。

extendedwindow的做法是尽量成为一个更通用的基类，样式和其它附加属性中的行为和extendedwindow的类本身没有必然关联(目前位置只添加了functionbar依赖属性)。这样做的好处是为代码和样式解耦，而且一旦为控件添加了属性，以后再想不支持就很难了，反正xaml的*度很高，都交给xaml去扩展就好了。

我以前也写过一篇文章使用windowchrome自定义window style简单介绍过自定义window样式的方案，当时的方案有不少问题，这次算是填上以前的坑。

10. 参考

windowchrome class (system.windows.shell) microsoft docs

wpf windows 概述 _ microsoft docs

对话框概述 _ microsoft docs

systemparameters class (system.windows) microsoft docs

11. 源码

kino.toolkit.wpf_window at master