分类: 程序开发

WPF界面设计技巧(9)—使用UI自动化布局

    最近一直没时间更新这系列文章,因为我一直在埋头编写我的第一个WPF应用程序:MailMail   今天开始编写附属的加密/解密工具,对UI自动化布局有些心得,就此分享出来。   我们先来看一下实现的效果:       这样的界面是怎么个自动法呢?请看下图:       就是说界面在适度的伸缩时,不会破坏其布局结构及美观性。   这样做有什么好处呢?你可以想象以下情况:   1.需要用户或通过程序控制变更窗体尺寸以适应特殊要求时。UI自动化可以伸缩各元素以适应变化后的窗体。   2. 软件语言变更,或需要字体/局部元素缩放时。将设计初始时的语言改变为其他语言,按钮、标签等元素呈现所需的最小空间都会有增减,UI自动化可以调整变动元素,并使与之相关的元素也能做出相应的调整。   3.需要对UI设计进行更改时。可以说执行UI自动化是一件一劳永逸的事,此后你都不必再为诸如一个标签的文字变更而去调整其他元素的坐标与尺寸了。   当然,相比通过...

更多

一起来乐邮邮——妙趣小软件:MailMail发布预告

最近一直在搞的东西就是它了,这是我用WPF制作的第一个应用,现在基本成型了,再过些日子就该出锅啦,是时候出来秀秀了。 我目前的想法是定位为共享软件,在发布前几天我会为博客园用户免费发放注册码哦,嘿嘿。 MailMail的用途是通过邮箱进行日常文件传递、分发或备份,随手拖入要传送的文件,点击“发送”就OK了。 每天工作后提交文档?没问题! 保持给每个同事分发最新的客户资料?没问题! 随时随手备份程序代码?没问题! MailMail会让你乐此不疲:) 这是主界面喽,蛮不错吧? 设置界面,主要就是预设好自己的邮箱地址和服务器登录信息,以后就可以随意发送了。 运行日志。 发送时的界面,上面红色动画小箭头表示传输进行中。 这是邮箱里收到的邮件的模样。 敬请期待吧^^ 我尽力在10天内搞出来哈   跨越时空的神圣分割线 下载:http://www.cnblogs.com/SkyD/articles/1264080.html 介绍:http://www.cnblogs.com/SkyD/archive/2008/08/09/1264083.html   分享或转载本博客站点内的所...

更多

WPF界面设计技巧(8)—自制山寨版CheckListBox

    近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来。   喏,CheckListBox 就是下面这玩意啦:       为什么要搞它?我们是山寨耶,说搞谁就搞谁!   我也不知道为什么,WPF里没有提供 CheckListBox 控件,但凭借WPF强大的外观定制能力,我们可以轻松的创制一个自己的 CheckListBox 。   CheckListBox 的基本功能其实和 ListBox 没有太大出入,只要将普通的ListBox 的选择模式设为多选,它就能基本实现 CheckListBox 的功用了,只不过从用户角度来说,它的使用方式不如 CheckListBox 看起来那么明确而已。   我们接下来就仅仅采用外观修改的方法,将 ListBox 与 CheckBox 拼插,打造出无敌山寨版 CheckListBox 。   首先在窗体设计器中建立一个ListBox,并为之填入一些内容项: &nbs...

更多

WPF界面设计技巧(7)—模拟电梯升降的缓动动画

    如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置、目标位置,所产生的动画仍会非常生硬,这种动画忽略了移动开始时的加速过程与移动结束时的减速过程。   WPF在关键帧动画中提供了样条内插(Spline)型的关键帧,用以控制变化的速率曲线,但这东西实在有些复杂,且不够形象化,我研究很久也没明白如何实现“缓入——缓出”的效果,随后我从一本经典牛X却鲜有人知的过时的FlashMX教程中提取了一个缓动函数,我们将用这个函数来较真实地模拟电梯的升降行为。   至于那本牛X的书,我以后会为大家介绍,我个人认为,那本书应当作为平面动画编程的必修经典,而它却被粗烂地印刷,并一直摆在书店里不引人注目的位置。   进入正题:   首先在界面设计器中添加一个 Rectangle ,用以代表直升电梯,然后添加4个 RadioButton 代表几个楼层的呼叫按钮。   稍加美化,即为下图所示:       RadioButton...

更多

WPF界面设计技巧(6)—玩玩数字墨水手绘涂鸦

        想让你的程序支持鼠标及手写笔涂鸦吗?只要敲入“<InkCanvas/>”这几个字符,你就会领悟什么叫“很好很强大”,今天我们来做一个手写板的演示,你可把它当作屏幕便笺使用。   首先要用 Microsoft Expression Design 2 画一幅英俊的界面背景,这里我们剽窃索尼 VAIO CR 笔记本的设计,做出了一个油光锃亮的面板:     记住还是要都绘制到一个图层上哦,图层命名为“back”。   导出为资源字典,嗯,油光锃亮:       打开 Microsoft Visual Studio 2008 ,新建 WPF 应用程序,导入资源字典:       添加引用:       然后就是代码了,这次的代码比较少。   界面代码:   Code <Window x:Cla...

更多

WPF界面设计技巧(5)—自定义列表项呈现内容

    接续上次的程序,稍微改动一下原有样式,并添加一个数据模板,我们就可以达成下面这样的显示功能:     鼠标悬停于文件列表项上,会在工具提示中显示图像缩略图及文件名、文件大小信息。   选中一个列表项,该列表项会扩大,并动态显示出一个小缩略图及文件的所在路径。   代码如下:   Code <Application x:Class=”自定义列表项.App”     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”     xmlns:c=”clr-namespace:System.IO;assemb...

更多

WPF界面设计技巧(4)—自定义列表项样式

  有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分。   打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局。   在  Window1.xaml 中为窗体 Loaded 事件及按钮 Click 事件添加事件处理:       Code <Window x:Class=”自定义列表项.Window1″     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#82...

更多

WPF界面设计技巧(3)—实现不规则动画按钮

    发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作。   不规则按钮的做法实际上和先前我们做不规则窗体的方法差不多,只是为按钮弄个不是那么方方正正的背景而已。   我们这次沿用自定义窗体时的设计图形,设计一个动态的不规则按钮,在这个示例中我们要将先前设计的整个图形作为按钮,并让外围的圆环始终围绕中心圆形旋转,在鼠标移入时,还要产生颜色变化及发光效果。   首先用 Microsoft Expression Design 2 打开上次的设计文件,将图层名称由“back”改为“sphericity”。   然后选中圆环部分,按 Ctrl + X 将其剪切,新建一个图层,命名为“ring”,将圆环粘贴进该层,并把该层移动到“sphericity”层下面。   再选中圆环部分,如图所示地移动它,将其内环贴近圆形的边缘。     然后在“ring&...

更多

WPF界面设计技巧(2)—自定义漂亮的按钮样式

  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了。   首先打开 Microsoft Visual Studio 2008 ,新建一个WPF项目,在上面随便放几个按钮:     然后给各个按钮设置不同的背景颜色:     设置好之后就是这样啦:     然后我们就开始在 App.xaml 文件中定义按钮样式了:     定义的样式代码如下:   Code<Application x:Class=”WPFButton.App”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schema...

更多

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

  初到园子,奉上第一篇入门级教程,请勿见笑。 以往WinForm编程中,实现不规则窗体是有一定难度的,更难的是不规则窗体的边缘抗锯齿及局部透明处理。而现在,WPF的出现使这个问题迎刃而解,使得我们可以轻松、灵活地美化用户界面。 下面就让我们来看看如何实现一个不规则窗体: 首先我们需要借助Microsoft Expression Design 2来进行图形设计。(这里使用Photoshop等传统软件也可以,但是只能利用PNG格式来实现透明,其缺点就是不支持无损缩放,且不支持动态修改。) 打开Microsoft Expression Design 2中文版,点击菜单“文件 > 新建”,依照下图进行设置,这里将文档尺寸单位设为“像素”,便于与应用程序的布局单位相对应。 然后随心所欲的画吧,想画成什么样都行,但注意Microsoft Expression Design 2中绘制的图形并非全部都是矢量的,比如纹理填充、一些特殊笔刷以及滤镜效果(输出时有“将实时效果转换为XAML效果”的选项,但是点了无用,不知道是不是BUG)都会以位图形式输出。 这是我画出来的图形: 这里要注意...

更多