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

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

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

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

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

　　　　

　　下面是代码

<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

　　　　

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

　　　　

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

　　　　

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

　　　　

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

　　　　

　　第一种叫“存在，且看得见” 即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,进入样式编辑状态

　　　　

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

　　　　

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

　　　　

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

　　　　

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

　　　　

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