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。