亲切的金子快播,电脑族护肤,强悍神农
对稍微有点规模的桌面软件来说自定义的window几乎是标配了，一来设计师总是克制不住自己想想软件更个性化，为了ui的和谐修改window也是必要的；二来多一行的空间可以添加很多功能，尤其是上边缘，因为被屏幕限制住鼠标的移动所以上边缘的按钮很容易选中。做桌面开发总有一天会遇到自定义window的需求，所以我在控件库中也提供了一个简单的自定义window。
我在上一篇文章介绍了标准window的功能，我想实现一个包含这些基本功能的，窄边框、扁平化的window，基本上模仿windows 10 的window，但要可以方便地自定义样式；阴影、动画效果保留系统默认的就可以了，基本上会很耐看。最后再放置一个functionbar方便添加更多功能。
最后成果如下：
这是一个名为extendedwindow的自定义window，源码地址可见文章最后。
wpf有两种主流的自定义window的方案，《wpf编程宝典》介绍了使用windowstyle="none" 和allowstransparency="true"创建无边框的window然后在里面仿造一个window，以前也有很多博客详细介绍了这种方式，这里就不再赘述。这种方法的原理是从window中删除non-client area(即chrome)，再由用户自定义window的所有外观和部分行为。这种方式的自由度很高，但也有不少问题：
大部分自定义window或多或少都有上面所说的问题，幸好wpf提供了windowchrome这个类用于创建自定义的window，这个类本身处理了上面部分问题。
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的各个属性。
useaerocaptionbuttons表示标题栏上的那三个默认按钮是否可以命中，因为我们想要自己管理这三个按钮的样式、显示或隐藏，所以设置为false。
glassframethickness和resizeborderthickness，这两个属性用于控制边框，及用户可以单击并拖动以调整窗口大小的区域的宽度。如果两个都设置为50效果如下：
可以看到因为边框和resizeborder变大了，标题栏也下移了相应的距离(通过可拖动区域和systemmenu的位置判断)。当然因为外观是我们自己定义的，resizeborderthickness也不需要这么宽，所以两个值都保留默认值就可以了。
captionheight指定windowchrome的标题栏高度。它不影响外观，因为windowchrome的标题栏范围实际是不可见的，它包括可以拖动窗体、双击最大化窗体、右键打开systemmenu等行为。
captionheight、glassframethickness和resizeborderthickness的默认值都和systemparameters的对应的值一致。
glassframethickness和captionheight定义了chrome的范围，默认情况下任何在chrome的范围内的元素都不可以交互，如果需要在标题栏放自己的按钮(或其它交互元素)需要将这个按钮的windowschrome.ishittestvisibleinchrome附加属性设置为true。
综上所述，使用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。
<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结构，它包含以下部分：
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*/
}
接下来介绍controltemplate中各个ui元素的实现细节。
<grid x:name="windowtitlepanel"
verticalalignment="top"
height="{binding path=(systemparameters.windownonclientframethickness).top}"
background="{templatebinding borderbrush}">
标题栏的高度和windowchrome的captionheight一致，而background则和window的borderbrush一致。
<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"。
<contentcontrol istabstop="false"
foreground="white"
horizontalalignment="center"
verticalalignment="center"
fontsize="{dynamicresource {x:static systemfonts.captionfontsize}}"
content="{templatebinding title}" />
标题的字号由systemfonts.captionfontsize决定，但颜色、字体都自己定义。
<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。
<contentpresenter content="{binding functionbar, relativesource={relativesource templatedparent}, mode=oneway}"
focusable="false" />
在这篇文章中介绍了functionbar的实现及应用，这段xaml即在标题栏为functionbar留一个占位符。
<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 是 必不能忘的。
<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是可以调整大小的。
虽然我平时喜欢用visualstate的方式实现模板化控件ui再状态之间的转变，但有时还是trigger方便快捷，尤其是不需要做动画的时候。自定义window有以下几组需要处理的trigger:
<trigger property="isnonclientactive"
value="false">
<setter property="borderbrush"
value="#ff6f7785" />
</trigger>
这个属性是我自定义的，用于代替isactive，在它为false的时候边框和标题栏变成灰色。
<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是否显示。
<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控制。
<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需要调整，具体留到下一篇文章再说吧。
有些人喜欢不止标题栏，按住window的任何空白部分都可以拖动window，只需要在代码中添加dragmove即可：
protected override void onmouseleftbuttondown(mousebuttoneventargs e)
{
base.onmouseleftbuttondown(e);
if (e.buttonstate == mousebuttonstate.pressed)
dragmove();
}
但这样做不喜欢dragmove功能的人又会有意见，再添加一个属性来开关这个功能又很麻烦，索性就把它做成windowservice.isdragmoveenabled附加属性，在defaultstyle中设置了。
使用windowchrome自定义window的基本功能就介绍到这里了，但其实windowchrome有很多缺陷，下一篇文章将介绍这些陷阱及讲解如何回避(或者为什么不/不能回避)。
extendedwindow的做法是尽量成为一个更通用的基类，样式和其它附加属性中的行为和extendedwindow的类本身没有必然关联(目前位置只添加了functionbar依赖属性)。这样做的好处是为代码和样式解耦，而且一旦为控件添加了属性，以后再想不支持就很难了，反正xaml的自由度很高，都交给xaml去扩展就好了。
我以前也写过一篇文章使用windowchrome自定义window style简单介绍过自定义window样式的方案，当时的方案有不少问题，这次算是填上以前的坑。
windowchrome class (system.windows.shell) microsoft docs
wpf windows 概述 _ microsoft docs
systemparameters class (system.windows) microsoft docs
kino.toolkit.wpf_window at master
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论