• 1005 阅读
  • 1 回复

Sliverlight入门:使用Silverlight创建一个时钟

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
本主题由 张小鱼 于 2010/10/12 18:25:00 执行 移动主题 [查看记录]
Sliverlight入门:使用Silverlight创建一个时钟本教程带领你使用Silverlight创建一个简单的时钟,下面的图显示了你将创建的时钟样子。






1.1 时钟示例

时钟呈现的矢量图形是使用XAML创建的,XAML除了更强大和更具扩展性之外,基本上与HTML类似,可以使用Visual Studio或者是Microsoft Notepad手工输入XAML,或者可以使用Visual Design tool比如Microsoft Expression Blend等工具。Expression Blend的作用是用于创建底层的XAML代码,因此这些方式都是为时钟创建同样的图形。
为了完成教程的开头部分,选择下面的选项之一。
1, 使用Microsoft Express Blend创建时钟图像
2, 直接使用XAML创建图象。
在下两步,添加动画和逻辑使时钟工作。在Microsoft Silverlight中,可以使用浏览器解释型语言,比如Javascript或者是托管代码,比如C#。本教程将向你演示如何使用C#创建动画和逻辑。要学习更多关于使用Javascript创建基于Silverlight的应用程序,可参见Silverlight1.0的文档。
1, 添加动画
2, 添加C#代码使时钟程序工作。
首要条件需要下列组件来完成本教程(可以从http://go.microsoft.com/fwlink/?LinkID=88923下载)
·Microsoft Silverlight 1.1 Alpha.
·Visual Studio 2008 Beta 2.
·Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2..
·Microsoft Expression Blend 2 August Preview.
使用Microsoft Expression Blend创建时钟图像Microsoft Express Blend将加速创建基于Silverlight应用程序的过程,特别是当你设计图像和布局时。时钟由如下图所示的几个图形元素组成。






1.2 时钟组成元素

这些图像使用简单的元素创建,被排列到画布上。所有的圆形图像包括Clock face,outer rim,bevelshadow,都使用Ellipse元素创建,钟手使用简单的Path元素创建。
Expression Blend中创建一个新的项目。1,打开Expression Blend.(单击Start,指向All Programs,指向Microsoft Expression,然后单击Microsoft Expression Blend 2 Sep Preview)。
2,在File菜单,单击New Project,下面的对话框将被显示。






1.3 Create new Project

3,在Name框中输入SilverlightClock.
4,在语言列表框中,选择C#作为编程语言。
5,选择Silverlight 1.1 Client Application,然后单击OK
此时将产生一个空白项目,如果按下F5运行应用程序,你仅能见到一个空白Web页。
时钟图像由重叠的图像层组成,为此需要创建时钟全部的呈现图像,为了创建时钟,需要在同时创建多个层,首先从最底层(layer)开始,这是时钟的阴影区。
下面的图显示了当样例完成时阴影的显示样式。






1.4 阴影

创建时钟阴影1,从工具箱中选择Ellipse工具,如下图所示。






1.5 选择Ellipse

2,拖放椭圆形(Ellipse)到画布,创建一个大约330像素宽和高的圆。






1.6 创建椭圆

3,更改圆的属性,单击属性标签,指定黑色填充圆,选择透明度(opacity)为30%.




1.7 设置圆的属性

4,更改椭圆的名称为shadowEllipse






1.8 更改椭圆名称

下面的图显示了当样例完成时时钟外轮廓。






1.9 时钟外轮廓

创建时钟外轮廓1, 画一个外轮廓圆,该圆具有与阴影圆相同的大小,因此,你能简单地创建阴影圆的一个拷贝,要这么做,需要选择阴影圆,按CTRL+C拷贝,然后CTRL+V粘贴这个拷贝。重命名为outerRimEllipse
2, 创建一个简单的渐变






1.10 创建渐变填充

3, 拖移右边的渐变停止位,使渐变集中于左边,如下图所示。






1.11 调整渐变色

4,轻微移动outerrimEllipse到左上角看得到阴影,你将在右下角看到shadowEllipse的一部分。






1.12 显示阴影

5,更变线性渐变的方向从左上角到右下角。
原文:http://www.cnblogs.com/lincats/articles/922728.html
小鱼的淘宝店铺-多多支持哇