且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

WPF界面设计技巧(1)—不规则窗体图文指南

更新时间:2022-09-16 08:50:52


 

初到园子,奉上第一篇入门级教程,请勿见笑。

以往WinForm编程中,实现不规则窗体是有一定难度的,更难的是不规则窗体的边缘抗锯齿及局部透明处理。而现在,WPF的出现使这个问题迎刃而解,使得我们可以轻松、灵活地美化用户界面。

下面就让我们来看看如何实现一个不规则窗体:

首先我们需要借助Microsoft Expression Design 2来进行图形设计。(这里使用Photoshop等传统软件也可以,但是只能利用PNG格式来实现透明,其缺点就是不支持无损缩放,且不支持动态修改。)

打开Microsoft Expression Design 2中文版,点击菜单“文件 > 新建”,依照下图进行设置,这里将文档尺寸单位设为“像素”,便于与应用程序的布局单位相对应。

WPF界面设计技巧(1)—不规则窗体图文指南

然后随心所欲的画吧,想画成什么样都行,但注意Microsoft Expression Design 2中绘制的图形并非全部都是矢量的,比如纹理填充、一些特殊笔刷以及滤镜效果(输出时有“将实时效果转换为XAML效果”的选项,但是点了无用,不知道是不是BUG)都会以位图形式输出。

这是我画出来的图形:

WPF界面设计技巧(1)—不规则窗体图文指南

这里要注意的是:***将所有元素都放在一个图层里,因为我们后面导出资源字典的时候需要依据图层来分组,我们画好之后要给图层重命名,在这里我给它命名为“back”,这个名称将在后面代码中引用资源时使用。

WPF界面设计技巧(1)—不规则窗体图文指南

接下来点击菜单“文件 > 导出...”,将格式设为“XAML WPF 资源字典”,分组依据设为“层”,实时效果设为“转换为XAML效果”(貌似无用的设置)。然后按“浏览...”按钮选择输出路径,然后按“全部导出”按钮完成导出。

WPF界面设计技巧(1)—不规则窗体图文指南

然后就可以保存文件,关闭Microsoft Expression Design 2了。

打开Microsoft Visual Studio 2008,点击菜单“文件 > 新建 > 项目...”,选择“WPF 应用程序”,名称设为“不规则窗体”。

点击菜单“项目 > 添加现有项...”,浏览并选择此前导出的资源字典文件(选的时候注意把右边的文件类型过滤改一下,默认是C#文件类型)。如下图所示,这就是导入的资源字典文件。

WPF界面设计技巧(1)—不规则窗体图文指南

引入的资源字典内容如下,我们不需要搞明白这些对图形的描述语法,只要了解其中的“x:Key="back"”对应的是我们之前设计时的图层名称,我们在程序中引用此资源时要使用这个名称。

 

WPF界面设计技巧(1)—不规则窗体图文指南Code

 

现在我们要把这个资源字典引入程序集,打开“App.xaml”文件,添加下图中红色框内的代码。

WPF界面设计技巧(1)—不规则窗体图文指南

 

WPF界面设计技巧(1)—不规则窗体图文指南<Application x:Class="不规则窗体.App"
WPF界面设计技巧(1)—不规则窗体图文指南    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
WPF界面设计技巧(1)—不规则窗体图文指南    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
WPF界面设计技巧(1)—不规则窗体图文指南    StartupUri
="Window1.xaml">
WPF界面设计技巧(1)—不规则窗体图文指南    
<Application.Resources>
WPF界面设计技巧(1)—不规则窗体图文指南        
<ResourceDictionary>
WPF界面设计技巧(1)—不规则窗体图文指南            
<ResourceDictionary.MergedDictionaries>
WPF界面设计技巧(1)—不规则窗体图文指南                
<ResourceDictionary Source="cnblogs-SkyD.xaml"/>
WPF界面设计技巧(1)—不规则窗体图文指南            
</ResourceDictionary.MergedDictionaries>
WPF界面设计技巧(1)—不规则窗体图文指南        
</ResourceDictionary>
WPF界面设计技巧(1)—不规则窗体图文指南    
</Application.Resources>
WPF界面设计技巧(1)—不规则窗体图文指南
</Application>
WPF界面设计技巧(1)—不规则窗体图文指南

 

然后打开“Window1.xaml”文件的设计视图,点击窗体边缘以选中窗体,依照下图所示,在属性面板中更改AllowsTransparencyWindowStyle属性。

AllowsTransparency 指示窗体是否支持透明。

WindowStyle指示窗体边框样式,设为 None 为无边框。

WPF界面设计技巧(1)—不规则窗体图文指南

切换到XAML代码视图,依照下图所示,为 Window 元素添加Background MouseDown属性定义。

Background 属性指示窗体的背景,这里引用资源中的“back”,就是我们之前画好的图形啦。

MouseDown 是鼠标按下时产生的事件,我们要为之定义一个事件处理函数以实现窗体拖动功能。

WPF界面设计技巧(1)—不规则窗体图文指南

 

WPF界面设计技巧(1)—不规则窗体图文指南<Window x:Class="不规则窗体.Window1"
WPF界面设计技巧(1)—不规则窗体图文指南    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
WPF界面设计技巧(1)—不规则窗体图文指南    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
WPF界面设计技巧(1)—不规则窗体图文指南    Title
="Window1" 
WPF界面设计技巧(1)—不规则窗体图文指南    Height
="450" 
WPF界面设计技巧(1)—不规则窗体图文指南    Width
="450" 
WPF界面设计技巧(1)—不规则窗体图文指南    AllowsTransparency
="True" 
WPF界面设计技巧(1)—不规则窗体图文指南    WindowStyle
="None" 
WPF界面设计技巧(1)—不规则窗体图文指南    Background
="{StaticResource back}"
WPF界面设计技巧(1)—不规则窗体图文指南    MouseDown
="Window_MouseDown">
WPF界面设计技巧(1)—不规则窗体图文指南    
<Grid>
WPF界面设计技巧(1)—不规则窗体图文指南        
WPF界面设计技巧(1)—不规则窗体图文指南    
</Grid>
WPF界面设计技巧(1)—不规则窗体图文指南
</Window>
WPF界面设计技巧(1)—不规则窗体图文指南

 

在上图的“Window_MouseDown”字符上单击右键,在弹出菜单中选择“定位到事件处理程序”,即会转到“Window1.xaml.cs”代码视图,依照下图输入代码。

WPF界面设计技巧(1)—不规则窗体图文指南

 

WPF界面设计技巧(1)—不规则窗体图文指南        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
WPF界面设计技巧(1)—不规则窗体图文指南        
{
WPF界面设计技巧(1)—不规则窗体图文指南            
if(e.ChangedButton==MouseButton.Left)this.DragMove();
WPF界面设计技巧(1)—不规则窗体图文指南        }

 

至此就完成了不规则窗体的创制了。

编译运行看看:

WPF界面设计技巧(1)—不规则窗体图文指南

嗯嗯,效果很酷的说,你说什么?没有关闭按钮?这么好看的界面你舍得关吗?

好吧,要实现关闭按钮也很简单啦,自己搞个按钮在上面,在 Click 事件中执行 this.Close(); OK啦,我是懒得搞了哈。

 

此效果在任何装有.Net框架3.0的机器上都可以运作,不用再羡慕Adobe AIR的外观了,WPF可以做得更好!

 

再来张Vista切换窗口时的图:

 

WPF界面设计技巧(1)—不规则窗体图文指南

 

 源代码下载(包含Design设计文件):不规则窗体

本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/07/13/1242044.html,如需转载请自行联系原作者