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

简介:


 

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

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

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

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

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

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

    这是我画出来的图形:

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

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

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

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

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

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

     

    Code

     

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

     

    < Application  x:Class ="不规则窗体.App"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml"
        StartupUri
    ="Window1.xaml" >
        
    < Application.Resources >
            
    < ResourceDictionary >
                
    < ResourceDictionary.MergedDictionaries >
                    
    < ResourceDictionary  Source ="cnblogs-SkyD.xaml" />
                
    </ ResourceDictionary.MergedDictionaries >
            
    </ ResourceDictionary >
        
    </ Application.Resources >
    </ Application >

     

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

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

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

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

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

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

     

    < Window  x:Class ="不规则窗体.Window1"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml"
        Title
    ="Window1"  
        Height
    ="450"  
        Width
    ="450"  
        AllowsTransparency
    ="True"  
        WindowStyle
    ="None"  
        Background
    =" {StaticResource back} "
        MouseDown
    ="Window_MouseDown" >
        
    < Grid >
            
        
    </ Grid >
    </ Window >

     

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

     

             private   void  Window_MouseDown( object  sender, MouseButtonEventArgs e)
            
    {
                
    if(e.ChangedButton==MouseButton.Left)this.DragMove();
            }

     

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

    编译运行看看:

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

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

     

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

     

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

     

     

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

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

相关文章
|
3月前
|
开发者 C# UED
WPF与多媒体:解锁音频视频播放新姿势——从界面设计到代码实践,全方位教你如何在WPF应用中集成流畅的多媒体功能
【8月更文挑战第31天】本文以随笔形式介绍了如何在WPF应用中集成音频和视频播放功能。通过使用MediaElement控件,开发者能轻松创建多媒体应用程序。文章详细展示了从创建WPF项目到设计UI及实现媒体控制逻辑的过程,并提供了完整的示例代码。此外,还介绍了如何添加进度条等额外功能以增强用户体验。希望本文能为WPF开发者提供实用的技术指导与灵感。
147 0
|
3月前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
65 0
WPF控件和窗体一起放大一起缩小
WPF控件和窗体一起放大一起缩小
238 0
|
C# 容器
WPF框架下,窗体的嵌套显示
WPF框架下,窗体的嵌套显示
222 0
|
C# C++ Windows
WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案
原文:WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案          首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼容问题解决办法。
1318 0
|
C#
在Winform窗体中使用WPF控件(附源码)
原文:在Winform窗体中使用WPF控件(附源码) 今天是礼拜6,下雨,没有外出,闲暇就写一篇博文讲下如何在Winform中使用WPF控件。原有是我在百度上搜索相关信息无果,遂干脆动手自己实现。 WPF控件的漂亮是Winform无法匹及的,本文主旨是在Winform工程中如何使用WPF控件。
1917 0
|
6月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
388 0
|
6月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
142 1
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库