Nibblestutotials.net教程 – Silverlight2系列之创建一个按钮样式 - 1

第一部分： 创建按钮与状态

本文的代码可以由此下载

1. 下载并打开项目

   

   使用上面的链接下载并打开项目，为学习教程做好准备。

   你应该看到上图中所示的场景。

    

2. 选择图形来制作一个按钮

   

   1. 选择称作Button的格子
   2. 在菜单中选择工具->制作按钮… 这将打开创建样式资源对话框。
   3. 在名称(Key)下输入RedButtonStyle。

   这些步骤将创建一个新按钮控件，一个称作RedButtonStyle的样式应用到其上。

    

3. 怎加文本尺寸
   1. 在按钮选中下，将文本的尺寸与粗细分别改为14px与Bold。

   

    

4. 编辑按钮样式

   

   使用作为Silverlight2新增部分的可视化状态管理器功能，你现在可以编辑控件的样式。让我们看一下怎样编辑我们上一步中创建的RedButtonStyle样式。

   1. 在新按钮选中的情况下，点击Breadcrumb Bar来显示菜单，然后选择编辑控件部分（模板）>编辑模板。

    

5. 定义鼠标停留其上的状态

   

   让我们在MouseOver发生时使按钮变大：

   1. 选择CommonStates下的MouseOver状态。
   2. 现在在元素树中选择名为button的grid。
   3. 更改缩放变换到X=1.1，Y=1.1。

 

1. 定义按下状态

   

   针对按下状态，让我们更改圆圈的颜色：

   1. 选择按下状态。
   2. 选择位于button中的Grid中的Ellipse_0。
   3. 更改此椭圆的Fill Gradient Color到light orange。

   这就完成了！现在你有了一个新的按钮样式，当发生MouseOver与Pressed事件时状态就会触发。按F5运行应用程序，或者按Project > Test Solution。

    

2. 创建其它按钮

   

   既然我们有了RedButtonStyle，现在我们可以将其应用到其它按钮。让我们开始创建其它按钮…

   1. 点击Breadcrumb Bar中的[Button]离开模板编辑模式。
   2. 在工具栏中选择按钮。
   3. 在画板上点击并拖拽来绘制一些按钮。使他们成为方型，因为我们的按钮是一个圆形。同样，不要把它们弄得太小因为那样看起来很怪异。

 

1. 给其他按钮应用样式

   

   现在我们使用资源来更改这些新按钮的样式。

   1. 打开资源面板。
   2. 展开[UserControl]来查看可用的样式。
   3. 只有一个样式：RedButtonStyle。点击并拖拽RedButtonStyle到其中一个新按钮上。释放鼠标。由上下文菜单选择样式。

   这个按钮变为我们创建的第一个按钮的样子。重复上面3步将样式应用到你刚创建的其他按钮。

    

2. 更改按钮的文本

   

   所有以上这些有相同的文本："Button"。让我们改变它。

   1. 选择我们创建的第一个按钮。
   2. 在属性面板的Common Properties下的Content中更改文本，在这个例子中，我改为"GO"。

   重复第二步更改其它按钮的文本。

    

3. 一个样式控制所有按钮

   如果我们更改一个按钮上的样式，所有其它按钮上的样式也会更新。

   1. 选择第一个按钮，点击Breadcrumb Bar中的Ellipse_0来再次编辑样式。
      Blend会记住我们编辑过的每个对象路径，那是为什么第二次你可以直接到达适当的样式。
   2. 更改默认变形间隔CommonStates到0.2。

      如果你再次运行程序，所有的按钮的变形都将变为0.2s。