本文来自 烤地瓜 的博客,原文地址:http://www.cnblogs.com/kaodigua/archive/2011/02/15/1955472.html

【全面解禁!真正的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。这种设计我保证你一定会遇到,而且会为此头痛。我会与大家分享最完美的解决方案,敬请期待!

转载于:https://blog.51cto.com/psmcn/497020

Expression Blend实战开发技巧 第四章 从最常用ButtonStyle开始 - PathButton相关推荐

  1. Android群英传知识点回顾——第四章:ListView常用优化技巧

    Android群英传知识点回顾--第四章:ListView常用优化技巧 知识点目录 4.1 ListView常用优化技巧 4.1.1 使用ViewHolder模式提高效率 4.1.2 设置项目间分割线 ...

  2. 《RabbitMQ 实战指南》第四章 RabbitMQ进阶(上)

    <RabbitMQ 实战指南>第四章 RabbitMQ进阶(上) 文章目录 <RabbitMQ 实战指南>第四章 RabbitMQ进阶(上) 一.简介 二.消息何去何从 1.m ...

  3. R语言实战笔记--第十四章 主成分和因子分析

    R语言实战笔记–第十四章 主成分和因子分析 标签(空格分隔): R语言 主成分分析 因子分析 原理及区别 主成分分析与因子分析很接近,其目的均是为了降维,以更简洁的数据去解释结果,但这两种方法其实是相 ...

  4. python全栈开发中级班全程笔记(第二模块、第四章)(常用模块导入)

    python全栈开发笔记第二模块 第四章 :常用模块(第二部分)     一.os 模块的 详解 1.os.getcwd()    :得到当前工作目录,即当前python解释器所在目录路径 impor ...

  5. 《精通Spring4.X企业应用开发实战》读后感第四章(Java反射)

    package com.smart.reflect;public class Car {private String brand;private String color;private int ma ...

  6. 《Kotlin项目实战开发》第1章 Kotlin是什么

    第1章 Kotlin是什么 当下互联网大数据云计算时代,数以百万计的应用程序在服务器.移动手机端上运行,其中的开发语言有很大一部分是用流行软件界20多年的.强大稳定的主力的编程语言Java编写. 如果 ...

  7. Android深度探索(卷1)HAL与驱动开发读后感---第四章

    第4章  源代码的下载和编译 4.1  下载.编译和测试Android源代码     主要学习了:配置源代码的下载环境,Android源代码目录结构解析,下载Android源代码中的一部分,编译And ...

  8. web.py开发web 第四章 Sqlalchemy(事件监听与初始化)

    2019独角兽企业重金招聘Python工程师标准>>> 上一章讲了sqlalchemy的数据库创建,我想大家应该会慢慢喜欢上用这种方式来创建数据库吧,sqlalchemy不仅仅能自动 ...

  9. 《Kotlin项目实战开发》 第3章 类型系统与可空类型

    2019独角兽企业重金招聘Python工程师标准>>> 第3章 类型系统与可空类型 跟Java.C和C ++ 一样, Kotlin也是"静态类型编程语言". 通常 ...

最新文章

  1. 服务机器人---设计中的仿真
  2. DDD领域驱动设计理论篇 - 学习笔记
  3. doom 源码_Cartpole和Doom的策略梯度简介
  4. python实现表格线性回归_Python实现线性回归
  5. Visio2007 与Microsoft Studio 2008不兼容
  6. c fun函数求n个整数的平均值_Python语法示例——函数
  7. HTTP从入门到入土(1)——五层网络模型
  8. windows下的yolov3的运行及结果,实例所需的weights,cfg与names文件
  9. C++学习笔记(七)——log4cpp
  10. nodejs下载图片
  11. 计算机数学的建议,2021考研计算机数学备考建议
  12. 交换机端口mtu值最大_-【SDN】交换机MTU配置总结
  13. Python爬取码市项目
  14. 文件管理nas php,家用nas安装配置可道云进行文件管理
  15. 怎样用matlab建立igbt的仿真分析模型,基于MATLAB/Simulink的IGBT导通模型研究
  16. 多大密西沙加计算机科学与技术,多伦多大学第二大校区——密西沙加校区专业及双录取介绍...
  17. 华三服务器双硬盘,H3C NaviData 5200 G2服务器配置raid1+raid5
  18. EUROCONVERT函数:转换欧洲各国货币
  19. java实现老鼠迷宫游戏
  20. 打印机监控软件开发外包

热门文章

  1. python plotly spyder显示_Python绘图工具Plotly的简单使用
  2. 外观模式和代理模式的联系和区别_设计模式之代理设计模式
  3. 用友报表java打不开怎么加载,点报表没反应怎么回事啊?演示账套也打不开。...
  4. 华为主题包hwt下载_华为主题太丑?修改方式它来了
  5. 在服务器客户端怎么启用协议,如何启用客户机的WINS功能
  6. 湖南科技大学计算机男女比例,湖师大文学院新生男女比例1:9 成了“女儿国”...
  7. 无心剑随感《程序人生乐无穷》
  8. jQuery学习笔记01:初试jQuery
  9. 【POJ3264】Balanced Lineup,线段树入门
  10. linux读取扇区内容,linux-device-driver