2024年8月12日发(作者：)
维普资讯
Ｔｅｃｈｎｏｌｏｇｙ
ＮＥＴ＞＞＞
ｍｅｗｏｒｋ ３—０
制作篇
口文／陈康
到（ｘ．Ｙ）点 Ａ表示画圆弧 其后面的参数分别表
在框架上彻底改变了它的前辈ＷｉｎＦｏｒｍ构架设计。 示圆弧的两个轴半径 旋转角度、是否大弧线 弧
如果说ｗｌｎＦｏｒｍ多少还保留着Ｗｉｎ３２或者ＭＦＣ的结 线方向（顺时针为１（ｔｒｕｅ）逆时针为０｝ 结束点
构．那么在ＷＰＦ中我们看到的是完全不同的新的 坐标 Ｌ×．Ｙ表示从当前点画直线到（ｘ．Ｙ）点。目
形式。以往的平台中，每个可视化控件只负责自 前按钮除了用矢量图形代替文本．它看上去和
己在屏幕上所占据的范围．这使得要实现特殊的
ｗｉｎＦｏｒｍ中的按钮没有不同。
效果变得很困难。ＷＰＦ把整个窗体看成一个整体，
窗体上的每个控件可以在屏幕的任何位置进行绘
画．不再受控件本身范围的限制。本文将通过实
现水晶按钮的过程来展示在ＷＰＦ中制作特效是多
样式和模板
现在使用样式和模板给按钮进行 换肤”。
首先使用一个圆来替换掉按钮默认的背景和
外观 通过在样式中设置模板属性来实现．我们把
么容易的一件事情。
按钮的样式描述写在窗体的资源中．当然你可以直
准备工作
接写在Ｂｕｔｔｏｎ元素里面．但如果不止一个Ｂｕｔｔｏｎ．写
水晶按钮据说来自苹果电脑的桌面。由于它
在窗体的资源定义．就可以让每个水晶按钮都可以
本文将通过 有着很Ｃｏｏｌ的外观．所以被很多设计者和开发者
共享这个样式 下面是这～部分的代码：
实现水晶按钮的 使用在Ｗｅｂ页面的按钮设计上。在Ｗｅｂ应用的场
过程，包括前期 合．水晶按钮的效果通常是使用位图来实现的。我
准备、模板和样 们即将实现的按钮没有使用位图ｒ而是全部采用
州ｎｄ ｒ．孙蛳趣ｌ黜够
＜Ｓｔｙｌｅ 缸 ＃ 耐 协： ｐｅ鼬馋锄”酗聃∞酗
｛ｘ：Ｎｕｌｌ｝
￣Ｓｅｔｔｅｒ。ＰｒＯｐｅｒｔｙ＝＂Ｔ￣Ｅｐｌａｔｅ＂＞
式选择、触发器 矢量直接画到按钮控件上。
的使肭细节处
．
＜Ｓｅｔｔｅｒ。Ｖａｌｕｅ＞
虻衄匕ｒ０ｌ伽∞ｌａｔｅ，
＜Ｃａｎｖａｓ＞
“ －“
。
＜Ｅｌｌｉｐｓｅ坩ｉｄｔｈ＝－５Ｏ—Ｈｅｉｇｈｔ－＊５０ ＂。
№鼬＃＂ｂＵｔｔ￣＂≯
＜Ｅｌ１ｉｐｓｅ．Ｐｉｌｌ＞
《矗鲥量ｉ４ｌ０ 曲七轴ｒ嘲ｍ
Ｒａｄｉｕｓｘ＝￣１ ＲａｄｉｕｓＹ＝ ０ ７５
¨
囊
理等来展示在
×ａｍＩ文件，用下面的内容替换默认的＜Ｇｒｉｄ＞：
ＷＰＦ中制作特效
ａ ０ＩＩ｜； 龟ｎ七Ｏ茸盖盛§，ｎ辟－ ．５， ． 葛
是多么容易的一
件事情。 。“
＜ａｕｔ￣ｗｉ ｎ５ｏ＊ＩＩｅ
＜Ｐａｔｈ ８ｔ ＝ 嘲
ｓｔｒｃ
５ｏ ． ．
《Ｇｒ日ｄ土蚴０８ｔ印Ｏｆ ｔ墨－口
Ｏ １口 Ｂｌ￣ｅ＂
０¨１
ｅ 朝肛 ２”鼬七ａ尊ｎＭ－Ｊ，Ｏ ｌＡ ｌｏ；１０ ｏ
＿，ｌ ｌ
ｃｏｌ酣 眦七ｅ “ ｊ。 婶－ 蠕曩
《 啦８ｔｏｐ ｏｆｔ椭 ： ”ｒ≮
＜／Ｅｌｌｉｐｓｅ．Ｐ．ｉｌｌ＞
＜／Ｅｌｌｉｐｓｅ＞
＜／Ｃａｎｖ￣ｐ
畸／０强如 嘲嘲 啵
为了更好的演示效果，这里特意将按钮的大
小设置为５０×５０，按钮的内容使用一个路径对象．
＜／Ｓｅｔｔｅｒ．Ｖａｌｕｅ＞
＜／ＳｅｔＣｅｒ＞
《，８ｃ
《／Ｗｈ ｌ ，ｌｉｅ勘 衄
稍微解释一下Ｐａｔｈ的Ｄａｔａ属性，Ｍ ｘ，Ｙ表示移动
１Ｏ２，程序贵
维普资讯
按钮是改变了，但是矢量图形不见了 这是因为模板整个 ． ． 一．． ＿： ． ０蠕ｉ＜ｓ￣ｔｔｅｒ ｄｉ４１ ＃ａｄｉ船七＋ ＶａｌＵ＠￣ 皇ｊ Ｉｈ Ｒ丑ｄｉｕ８ｘ；一１．ＲＢ Ｉ目Ｙ一０．７５一
替换了按钮原先的内容．，６ｉｆ－ｌＸ，Ｔ一步我们要把按钮的ｃ。ｎｔｅｎｔ复 。 ０ ｊ ，：￣ｍ们 ａ ｔｏｓｒｔｏ 口ｐｉ 薹 ？ ．讹ｉｔ。．／，
制过来，矢量 ａｔｈ是按钮的ｃｏｎｔｅｎｔ属性的值。继续在椭圆对象 曩 ≯ｌ 篡 嚣 ：ｌ 。玑’ ｃｏ ｏｒ ｌｕ ’
稿 瓣 赛
ｌｉ
ｉ
＜Ｅｌ
ｄ
ｐｓ
曲ｔｈ
孙蛳 乜洲圣ｉｑ帆ｉ口３ｈ￣ ＂ 赶。童 ｈ
嘲ｄｈ
Ｗ
ｅ：
Ｓ
＂
№
。
．ｂ
１ｔｔ
ｄ
ｄ
】ｉ
ｌｌ 牲。 ，。 ５ｒ ¨ 下面的两个 ｇｇｅｒｓ基本原理是一样的．在第一小Ｉ ｇｇｅｒ下
叫ｕ ｒ 】Ｉ … …世 ，，Ｊ、垃＾巴 ｌ１＇Ｈ ・ … 一
麓 一
，
‘／ 睁 ． ．＿ …ｊ ． １
ｌｌ００００ 塞
“ ■
赫 瑟
甑 酏 ＿。
０幽ｄｉｅＧｒａｄｌｅｎｔｎｔｓｔｏｐ Ｏｒｉｇｉｎ＝０ｏｆｆ８ｅｔｉ。．， ５ ｏ－ｃｏｌ ０ － ７５ ＊’ｏｒ＝・ 慨ｉｔｅ・Ｉ模板中．控件的次序是重要的．先定义的控件先显／－～Ｆ．后
定义的控件后显示。所以．我们这里是先背景．然后内容．最 ＿ 篙箸
Ｐｒｏｇｒａｍｍｅｒ １０３
维普资讯
＿馐哥＿ Ｔｅｃｈｎｏｌｏｇｙ
ＮＥＴ＞＞＞
．
／Ｒ丑ｄｉ ｌＧｒ ｄｉ∞ 自ｒ
《／Ｓｅｔｔｅｒ
Ｖａｌｕｅ￣
．
你也可以通过模板
。…………一。 …一
．
来设计自己的焦点。
’……’…‘
／
第二个问题比较麻烦 因为我们没有简单６１方法获取Ｐａｔｈ
的Ｓｔｒｏｋｅ属性．在不使用后台代码的情况下 更是这样。既然
七ｏｎＢｇ ＇
．
《／Ｔｒｉ鳓拍挣。
ｊ －－．
ｙ＝ｌｌ＂ Ｔａｒ口ｅ乜№腑 ￣ｔＪ＂＇Ｘ１Ｉ／］Ｊ、日 Ｉ 巴 厂ｄ…口 Ｓｋｅ属一ｗ 禺 ｉ－ｔ－ 那么我 ，】１），厶执１ １］可以逆 ＪｕＪ 垲ｌＵ．Ｉ雨 匠－ｌ思维．让 ＬＬ
《Ｒ丑ｄｉ氇； ：
删
．．
， Ｒ ａｄｉ ．ｕｌｓＸ＝ Ｒ１ｉ ａｄｉｕｓＹ＝０ ５々
７Ｉ
埘 ０ ’
… ． ，
Ｐａｔｈ Ｓｔｒｏｋｅ来获取我们给它的值，方法就是让Ｐ
／ｒ、 １＾ＩＩ Ｊ 目 Ｈ】１ ， ｎ ｙ …
ａｌｈ的ｓｌ
…
ｒ０
…
ｋｅ属性
Ｉ＿Ｌ
绑定到Ｂｕｔｔｏｎ的Ｆｏｒｅｇｒｏｎｄ属性上 这就是ＷＰＦ的依赖属性带来
…～。’ ’。 ’……一… 一 ’…。 。…一’
的好处。
＜Ｇｒａｄ／ｅｎｔ Ｉ∞ｏｆｆｓｅｓ￣ ０ Ｃｏｌｏｒ＝”Ｗｈｉ七ｅ”／＞
∞ 黼＃ ｔ坤Ｏｆｆｓｅｔ ０＋５ Ｃｏｌｏｒ＝ ＬｉｇｈｔＧｒａｙ
啦
ｅ七ｔ
＃
≯
《／禽 熏土冉 ｑ鬻鱼出．锄１＃
＜ＩＳｅｔｔ。ｏｒ．Ｖａｌｕｅ＞
ｔｔｅｒ
．．
由于Ｐａｔｈ的Ｓｔｒｏｋｅ的属性绑定到了按钮的Ｆｏｒｅｇｒｏｕｎｄ属性，
ｙ 一 ｌＯ－
所以 Ｊ 需簧刈披 州ｒｏｒ对按钮的Ｆｏｒｅ ｅｇｒｇＪｏｕＪｎｄ进行设置 这通过在ｓｔＩａ进仃 直 理 仕 【 ｅ Ｙ Ｊｅ中
￣Ｉｉ
＆－＇ｔ－Ｓｅｔｔｅｒ就可以了。
，
．
ｅ＝＂ｂｕｔ ｔＯ．Ｈｉｇｈｌｉｇｈ Ｅ＂／＞
￣Ｓ ｅｔｔｅｒ Ｐｒｏｐｅｒｔｙ＝ Ｆｏ￣ｅｇｒｏｕ＃ｘｌ Ｖａｌ
ｕｅ＝＂ＤａｒｋＧｒａｙ”／
￣Ｌｒｇ
ｅｔＮａｍ
…… 。
＜ＩＴｒｉｇｇｅ＝￣
．
定义按钮的默认前景为红色。现在运行程序．我们已经得
到比较完整的水晶按钮。
…
这里可以看到笔刷的代码几乎都一样，所以如果其他地方 最后．为了演示使用矢量图的优点．我们特意让按钮尺寸
也用到同样的笔刷．你可以把它们做成资源 但这里我们只是 可以随着窗体的尺寸改变而改变，在实际的应用中不需要这么
在按钮中用到 所以就直接写了。一个不同的地方 就是最后 做。在ＷＰＦ中 有一个控件可以做到这一点，这个控件就是
一
个Ｔｒｉｇｇｅｒ，不仅改变按钮的背景，我们也需要隐藏掉高光效 ＶｉｅｗＢ０×．只要在＜ＳｔａｃｋＰａｎｅｆ＞的外面再套上一个ＶｉｅｗＢｏｘ。
＜ｖｉｅ￣ａｅｘ＞
ｋＰ鲫虬…
０ 一 “
、
果 这是通过设置高光的那个椭圆透明度来实现的，修改透明
度而不是设置它的可见性有一个好处就是 也许你希望保留一
点点的高光，那样的话，我们可以设置ｏｐａｃｉｔｙ的值为一４＂ｔＥ，Ｊ、
的值。最后一个变化就是把按钮的前景颜色设置为ＤａｒｋＧｒａｙ。
为了看到最后一个属性Ｔｒｊｇｇｅｒ的效果，由于我们没有使用
后台代码，所以我们可以再作一个按钮来表现按钮
Ｉ－Ｉ … １ 、， ’０ 哪
曼意 ｎｅｌ＇
所示：
ｌ１－ ０
至此 我们的按钮的制作基本完成。完成后的效果如下图
圈■旧聊绷ｌＥ■ｌ ｌ哪圈矗一日删Ｉｌ ｌ ＬＪ■蛐曩¨●■■●啊—■—啊ｌ
复制Ｂｕｔｔｏｎ代码，更改名称为：ｄｅｍｏＢｕｔｔｏｎ２ 把
其运中行程的一序 个Ｂ看ｕｔ看ｏｎ水）］晶￣上按属钮性的Ｉｓ效Ｅｎ果ａｂｌ。ｅ ｄ＝”ｆａｌｓｅ“。现在 ｅ
硼口 理
“④∥ ＿、
锅踊
你可能已经注意到了一些问题，第一个问题就是按钮的那 左边是正常情况下的按钮．中间是鼠标移到上面时的按钮，
个矩形虚线框在点取按钮的时候会出现，这是按钮默认的焦点 右边是鼠标点击时的按钮。
显示模式；第二个问题比较致命 那个Ｄｉｓａｂｌｅｄ的按钮的矢量图
的笔触颜色没有发生变化，也就是说它并没有按照我们希望的
那样变成灰色．尽管我们在触发器设置了按钮的前景，但不起 通过以上水晶按钮的制作过程，我们不仅体会到了ＷＰＦ
作用。下面我们来处理这些问题。 的强大，也体会到了它的便捷。这里展示的只是它的其中一
第一个问题容易解决，在＜Ｓｔｙｌｅ＞￣素下插入下面的两个 个力回。
ｓＰ” 水晶按钮进一步实现的问题（留待读者自己做练习）。
１．模板的尺寸绑定到按钮的尺寸。
Ｓｅｔｔｅｒ Ｐｒ。ｐ ｅ －ｔ，Ｏ￣ｂＺｅ—Ｖａｌｕｅ ｆａｌｓｅ
＜ＳｅＥＥｅｒ Ｐ姊ｅ ｔｙ＝＂Ｍａｒ￣ｉｎ＂Ｖａｌ咿 ／》
２．路径的尺寸必须根据按钮的尺寸自动改变（同样通过
ＶｉｅｗＢｏ×Ｊ＾
、 ３．实现一个Ｔｏｇｇ ｅＢｕｔｔｏｎ。
其中一４－ｓ。ｔｔｅｒ，简单地屏蔽掉按钮的焦点，第二个和这个
问题没有关系，只是让两个按钮之间拉开一点距离而已。当然，
■
■责任编辑ｔ常政（ｅｈａｎｇｚｈｅｎｇ＠ｃｓｄｎ．ｎｅｔ）
１Ｏ４ 雁序员
发布评论