第一个Silverlight程序—钟表(图形设计:上)

本文翻译自Silverlight Documentation

完成本指导需要下面的组件，可从Silverlight download site下载：

Microsoft Silverlight 1.1 Alpha。

Microsoft Visual Studio Code Name "Orcas" Beta 1。

Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1。

Microsoft Expression Blend May 2007 CTP。

    下图是即将要创建的钟表：
     

具有钟表外观的向量图是使用Extensibel Application Markup Language(XAML)(可扩展应用程序标记语言)，XAML与HTML相似，但是它更强大并且是可扩展的。可以在Microsoft Visual Studio或者微软记事本中手工书写XAML，也可以使用像Microsoft Expression Blend这样的可视化工具，Expression Blend是通过创建基本的XAML代码来工作，所以它们能创建钟表的相同的图片。

使用Microsoft Expression Blend创建钟表图片：

Microsoft Expression Blend能加快Silverlight程序的创建，特别是设计图片和外观的时候。

在这节中，将使用Microsoft Expression Blend创建钟表的图片。

钟表由下面图示中的图形元素所组成。

  

这个图片由布置在同一个画板上的简单元素组成而创建，所有的圆形图形，包括钟表的外观(clock face)、外部的边缘(outer rim)、斜面(bevel)和阴影(shadow)都是由椭圆(Ellipse)元素创建，钟表的指针则是由简单的路径(Path)元素创建的。

在Expression Blend中创建新的工程

1．   打开Expression Blend(点击开始，指向所有程序、Microsoft Expression，然后点击Microsoft Expression Blend May 2007 CTP)。

2．   在文件菜单中，点击新工程，弹出如下的对话框。

 
 
 

3．   在名称(Name)栏中，填写“SilverlightClock”。

4．   在语言选择列表中，选择C#作为编程语言。

5．   在工程模板类型中选择Silver 1.1 Client Application，然后点击OK按钮。

这时就创建好了一个空的工程，按F5运行工程只能看到一个空的Web页。

钟表图由一些层中的图重叠组成，它们组合在一起创建了钟表的整体外观。创建钟表时，需要一次在一个层中逐步的建立，从最下面的阴影层开始。

下面的图示显示了案例完成时钟表阴影的外观。
  

创建阴影

1.选择椭圆工具 

  

2.在画布上拖动椭圆到合适的位置释放，创建一个大约330像素宽高的圆。

 

3.设定属性，点击属性Tab，将圆设定为黑色填充，不透明度为30%。 

  

4.将椭圆的名称改为ShadowEllipse。

    

创建钟表的外部边缘(outer rim)

1.画出作为外部边缘的圆，它的尺寸与阴影圆相同，所以可以通过拷贝阴影圆来创建它，首先选择阴影圆，然后按CTRL+C拷贝，再按CTRL+V粘贴，然后将它重命名为outerRimEllipse。

现在要用一个简单的过渡色来填充outerRimEllipse，在Express Blend中创建一个过渡色需要几个步骤。

2.创建一个简单的过渡色。

 
3.移动右边的滑块集中到左边。

 

4.将outerRimEllipse向左上部移动一些从而可以看到阴影，可以在右下部看到显示出阴影效果的shadowEllipse。
  

5.改变线性渐进的方向为从左上到右下(取代整个圆的从左至右)。

  
渐变方向如下图所示：