【全面解禁!真正的Expression Blend实战开发技巧】第四章 从最常用ButtonStyle开始 - PathButton

简介: 原文:【全面解禁!真正的Expression Blend实战开发技巧】第四章 从最常用ButtonStyle开始 - PathButton  上一篇我们介绍了TextButton,但为了追求界面的张力,时尚,仅仅使用系统的字体是不够的。
原文: 【全面解禁!真正的Expression Blend实战开发技巧】第四章 从最常用ButtonStyle开始 - PathButton

  上一篇我们介绍了TextButton,但为了追求界面的张力,时尚,仅仅使用系统的字体是不够的。在传媒领域中名片,报章,杂志,广告中的字体非常讲究。我们系统界面也是这样,一些很酷的 flash英文网站,为了追求最佳的效果,常常使用20种以上的字体。

  我个人非常喜欢微软雅黑,但我无法保证每一个客户端都装有微软雅黑。在blend中可以很容易的嵌入字体包,供用户下载。但无奈中文字库太大了,一个微软雅黑就要20多M。好在微软提供了矢量图形,让我们中国的开发者可以有限度使用一些特殊的字体而无需下载字库,但这也带来了许多麻烦,许多情况下只能靠自己去摸索一条快速,有效的工作方式,根本无法在国外的网站中查找到解决方案。有些难题我要花几周时间才得以解决。随后又在N个月的实践中逐步完善。silverlight前端开发的过程中,更多的是许多零碎的知识点和经验的累积,也许每一个点拿出来分享,读者都会觉得这太easy了,但正如我签名中写的“所有真正杰出的设计一旦被设计好,看起来都是那么的简单和显而易见。但是在获得杰出设计的过程中,需要付出令人难以置信的努力”,在学习知识前,首先要尊重知识,知识才会尊重你。本章我就拿上一章的TextButtonStyle为基础,与大家分享,如何将特殊字体的文本转换为矢量图形,使用矢量图形做Button会遇到的难题,如何解决难题。

  如果你看过上一章,并跟着我一步一步做出来。那么你应该得到一个使用了TextButtonStyle的Button,入下图所示

    img_4281ceb687f4bd45ea80eba94797caa7.jpe

  下面是代码

 
 
< Button Content ="I'm TextButon" HorizontalAlignment ="Left" Margin ="15,27,0,0"
Style =" {StaticResource TextButtonStyle} " VerticalAlignment ="Top" />

  

  大家可能注意到我在这里使用了一种特殊的字体,名为28 Days Later,既然我们打算不依赖于该字体,第一步就是将I'm TextButton矢量化。

  添加一个TextBlock,指定字体为28 Days Later(这里你可以随意指定其他字体,比如黑体),然后右键点击Textblock,在弹出菜单中选择Path ->Convert to Path

    img_ec9dce2972a0c40768fd7932f831d78b.jpe

  这样我们就成功得到了一个矢量图形

    img_f75b268d567dd707ea21f68190bb6f30.jpe

  在Blend左侧,Objects and timeline窗口中,拖拽Path到Button中。如果你成功了,那么此时界面结构应如下图所示

    img_66bc4cee5e4a0dfb5cbe78fc97e21faa.jpe

  点击F5运行程序,此时你会遇到第一个难题。

    img_6162a97bdf1d9022d685d864fcb1ef0c.jpe

  请注意看上图,上一章我们在TextButtonStyle中,设置ContentControl的Cursor为Hand,所以当我们鼠标悬浮于文字上时,光标变成了"手指"的形状,但当你在按钮上运动时会发现一个恶心的事,为什么光标不停地在"箭头(arrow)"和"手指(hand)"中来回切换?这种体验显然很不好。随后,你在Button上慢慢移动鼠标,终于搞清楚了,原来只有光标停留在上图黑色部分时,才会变为"手指",所有的白色部分,包括字母"O"中间的白色部分,光标都还是"箭头(arrow)"。要解决这个问题,首先要理解几个概念,在silverlight中,所有界面元素,都有三种状态。

    img_3d1e54e07a00c6f4842b85f538df0906.jpe

  第一种叫“存在,且看得见” 即Opactiy =1 ,Visibility = Visible ;

  第二种叫“不存在,且看不见” 即Opactiy =1 ,Visibility = Collapsed (Collapsed时候控件的可视树根本不会加载,也不会消耗资源);

  第三种叫“存在,且看不见"  即Opactiy =0 ,Visibility = Visible;

  除了这三种外,我要告诉大家的是神秘的第四种,许多人不知道,但他真的非常有用;

  第四种叫“存在,但是看不见”即Opactiy =1 ,Visibility = Visible ,Background="#00??????" (重点是前两位00,后面的问号代表0~255间任意数值);

  要解决上面的问题就一定要使用第四种状态。首先右击Button,在弹出菜单中选择Edit Template -> Edit Current,进入样式编辑状态

    img_58568e73fe5c227aebe7b3d762e583b4.jpe

  设置包裹ContentControl的Grid的Cursor=Hand,并为Grid随意指定一个背景颜色,点击F5运行程序,鼠标移动到Button上你会发现,这次光标终于稳定了,完全变成hand状态。但唯一可惜的是背景的大红不是我们想要的。

    img_56fa0425e4bbaf912efffb55079ecf17.jpe

  不过不要紧,你只需要设置Button的Backgroun的阿尔法值为0,既可以完美解决这个问题。

    img_9ca93cf78e8bf54f430c0b84701907a5.jpe

  再次运行程序,一个有着酷酷的字体的完美按钮出现在你眼前了。

    img_6162a97bdf1d9022d685d864fcb1ef0c.jpe

  不过对于一个程序原来说,这还没结束,从命名的角度讲我们目前的Style名为TextButtonStyle似乎有点不恰当,最好将它改为PathButtonStyle。点击Resource面板,展开Usercontrol节点,在TextButtonStyle处双击鼠标,就可以修改名称了。

    img_51706b452bf46bafb86d76930737d296.jpe

  这一讲就到这里,下一讲我会介绍一个有那么点特别的ImageButtonStyle。这种设计我保证你一定会遇到,而且会为此头痛。我会与大家分享最完美的解决方案,敬请期待!

目录
相关文章
零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ...
1166 0
【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton
原文:【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton   在实际项目中,使用blend做的最多的一定是各种自定义Button。
955 0
|
开发者 前端开发
【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法
原文:【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法 从设计者到开发者  设计师创建一个应用程序的布局然后让开发者去实现。 从开发者到设计者   开发者创建应用程序的函数功能部分,设计者完成样式部分。
865 0
【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧
原文:【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧   刚才有人说我的标题很给力,哈哈。那这个标题肯定更给力了,“飞出ListBox吧”。
1190 0
|
C#
【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox
原文:【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox   反反复复考虑后,准备把这一章的切入点瞄准ListBox。并用了一个看起来有点别扭的标题“认识ListBox",许多人看到这里就不爱看了,即使是大学里用winform的学生也会说ListBox我看他好几年了。
1041 0
|
程序员 容器 C#
【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动
原文:【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动   好久没更新博客了,今天如果没急事,准备连发三篇,完全讲解Blend最牛的元素-“FluidMoveBehavior”。
1058 0
|
编解码 安全 程序员
【全面解禁!真正的Expression Blend实战开发技巧】第五章 从最常用ButtonStyle开始 - ImageButton
原文:【全面解禁!真正的Expression Blend实战开发技巧】第五章 从最常用ButtonStyle开始 - ImageButton   本章围绕ImageButton深入讨论,为什么是ImageButton? 图片本身就是表达美的最佳手段之一,自古形容美女,都说美的像画一样。
926 0
【全面解禁!真正的Expression Blend实战开发技巧】序章
原文:【全面解禁!真正的Expression Blend实战开发技巧】序章   从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会。由于各种原因,始终没有机会把他全面的介绍和讲解出来。
1000 0
|
程序员
【全面解禁!真正的Expression Blend实战开发技巧】第二章 你好,UI设计师
原文:【全面解禁!真正的Expression Blend实战开发技巧】第二章 你好,UI设计师 你好,UI设计师   曾几何时我从没想过要与艺术家打交道,但是Silverlight改变了这一切。UI设计师,已经成为Silverlight项目开发中必不可少的一员。
1257 0
|
容器 内存技术
【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条
原文:【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条   这一章讲解FluidMoveBehavior的另一个应用,这是一个绝对原创的做法,目前已经被微软收录在silverlight.net,作者就是烤地瓜本人^^ 。
1038 0