[原] Silverlight 2自定义Button样式

第一步：开启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

原文地址：https://www.cnblogs.com/think8848/p/1345144.html