WPF绘制自定义窗口
WPF是制作界面的一大利器,下面就用WPF模拟一下360的软件管理界面,360软件管理界面如下:
界面不难,主要有如下几个要素:
- 窗体的圆角
- 自定义标题栏及按钮
- 自定义状态栏
- 窗体的半透明效果
- 窗体4周有一圈半透明阴影(抓的图上看不出来)
实现思路很简单,首先隐藏默认窗口的标题栏和边框,然后用WPF的Border或Canvas等元素模拟定义窗体的标题栏、内容区和状态栏。
具体实现如下:
第一步:定义义个窗口基类,继承自Window,在构造函数中加载自定义窗口的样式文件,代码如下:
接下来,就可以在WindowBaseStyle.xaml样式文件中定义窗口元素及样式了。
第二步:重写窗口模板
因为Window和Button等控件一样,实际是继承自System.Windows.Controls.Control类,所以可以通过使用 ControlTemplate 自定义控件的外观 ,代码如下:
需要注意的是,实际代码中应该将BaseWindowControlTemplate的定义放到BaseWindowStyle的前边,否则会抛出异常。
第三步:实现半透明
用Js实现过遮罩型的模态窗口的同学都知道,如果将元素如按钮直接放到一个半透明的Div中,会发现按钮本身也半透明了,这显然不是我们所希望的,我们只需要背景半透明,元素本身透明度不受影响,实现的思路应该是这样,将按钮和div平级,利用定位属性将按钮和半透明的div保持相对位置,而不是将按钮放入Div中。
WPF中,实现方式和其一样,请看第二步中的x:Name=”borderBg”的Border元素的定义。它和后面的Grid元素定义的实际窗口是同级的。
第四步:实现窗体四周半透明的环绕
这个先简单用一个半透明具有一定宽度的Border来模拟,代码如步骤二中所示,后续考虑做成类似外发光的效果。
第五步:实现最小化、关闭、拖动等事件
在WindowBase的构造函数中,添加如下代码:
注意, InitializeEvent方法必须放到Loaded事件处理函数中,否者会找不到按钮。
第六步: 定义最小化,关闭按钮的样式
实际上也是定义Template属性,定义方法类似于窗口模板的定义,详细见附件中完整代码。
到此,自定义窗口的基类就打造完成,完整代码见附件。
使用方法很简单,新建一个WPF窗口后将窗体的基类改成上面定义的WindowBase,同时注意将Xmal文件的根元素改成如下形式:
运行效果如下图所示:
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!