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

2022-02-26 17:43:08

原文:WPF界面设计技巧（1）—不规则窗体图文指南

 

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

    以往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）—不规则窗体图文指南
    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）—不规则窗体图文指南
    WPF界面设计技巧（1）—不规则窗体图文指南

     

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

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

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

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

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

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

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

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

     

    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）—不规则窗体图文指南
    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设计文件)：不规则窗体

WPF界面设计技巧（1）—不规则窗体图文指南,布布扣,bubuko.com

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

上一篇：linux shell 随笔


下一篇：DAY 152 hmac模块