zoukankan      html  css  js  c++  java
  • [原] 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

  • 相关阅读:
    十五分钟建立精美网站
    WebMatrix教程(一) (关注Microsoft 的最新武器:建立你的第一个WebMatrix网站)
    数据同步框架MS Sync Framework IDE快速开发支持Local Database Cache
    Interview SeniorSoftwareEngineers
    学JQuery最新免费教程[转]
    Visual Studio 2010 支持HTML5 和 CSS3
    Orchard:打包和共享模块
    CSLA.NET 框架开发实战
    如何真正提高ASP.NET网站的性能
    敏捷英语
  • 原文地址:https://www.cnblogs.com/think8848/p/1345144.html
Copyright © 2011-2022 走看看