第一步:开启Expression Blend2 SP1

第二步:新建一个项目。

第三步:拖一个Button控件至美工板(这个名字真奇怪)上。

第四步:使用美工板顶部的痕迹导航栏(这个名字更奇怪)来创建按钮模板的副本。

第五步:定义Style名称和位置。

 第六步:把App.xaml中原Button样式不需要的部分屏蔽掉。

 

Code

 

第七步:在App.xaml的适当位置添加一个Grid,命名为NormalState,并把这个图层置于contentPresenter图层之上。

第八步:程序员们最头疼的了,使用钢笔工具,绘制一个右下角是R角的矩形(F4键可以使工作区域变大些)。

靠,火死了,Blend挂了,重启中...

兄弟们,存盘是多么重要的一件事呀,任何时候千万别忘了存盘,尤其在绘图的时候,血的教训啊!

 

第九步:修改该Path的一些属性。

名称-->OutterBorder

外观-->StrokeThickness = 0

画笔-->Fill = null

画笔-->Stroke = null

布局-->Margin = 0,0,0,0

第十步:将右下角修改为R角,没有美工基础的兄弟有的郁闷了。

i.先选取工具

ii.修改OutterBorder的右下角

 第十一步:复制OutterBorder,粘贴两次,并修改各图层属性如下图。顺便将InnerBorder的Margin属性设置为1,Body的Margin属性设置为2

第十二步:修改新建的Path的背景色,最终按钮显示如下效果。

 

 

第十三步:新建一个Grid,名称为MouseOverState,再复制刚才的三个图层到MouseOverState内部,如果隐藏NormalState,则会显示如下效果。

第十四步:复制MOBody图层,复制两次,分别命名为MOBodyUpShade和MOBodyDownShade(名字起的也不怎么样)记得把这两个新图层的Margin属性都设置2,然后把MOBodyDownShade拖拽成原高度的1/2(偷懒了,嘿嘿),设置其背景画刷,使其看起来如下所示。

 

OK,本来想把Buton的所有状态都绘制出来,但无奈,绘画功底实在太差,很吃力,所以就先画这两个吧,接下来我们把VisualState加上去。

第十五步:将MouseOverState的Opacity属性设置为0。修改<vsm:VisualState x:Name="MouseOver">配置节,使其如下代码所示。

 

Code

 

大功告成,让我们现在打开VS2008 SP1 + Silverlight 2 Tools

第十六步:随便新建一个Silverlight应用项目,然后在Page.xaml加入如下代码。

 

Code

 

第十七步:F5运行。

i.正常情况下按钮显示效果如下:

ii.鼠标悬停(MouseOver)时的显示效果如下:

 

OK,现在一个简单的Demo就做完了,需要源代码的朋友可以在这里下载。

QQ:166156888

posted on 2008-12-01 21:49  think8848  阅读(3770)  评论(0编辑  收藏  举报