波斯码BOSSMA Information Technology

Silverlight起步[3]–使用Silverlight创建一个时钟

发布时间:2008年11月4日 / 分类:ASP.NET, Silverlight / 次浏览 / 评论

[源自Silverlight Documentation]
这个专题包含四篇文章,主要讲述如何开始Silverlight:
1、创建一个Silverlight 项目
2、创建第一个Silverlight应用
3、使用Silverlight创建一个时钟
4、SilverLight示例

这篇文章使用XAML创建一个时钟效果[由于水平有限,部分专业术语翻译的不够准确]。

时钟效果

时钟效果

1、首先新建一个Silverlight用户控件(XAML文件)

2、先画一个阴影,代码如下:

Ellipse,其命名空间为System.Windows.Shapes,用它可以画一个椭圆。
Ellipse类提供了丰富的属性、方法和事件,这里只说明用到的几个:
Margin:设置控件外边的宽度,这里可以理解为距离Grid各个边的距离。
Fill:设置画笔,指定如何填充这个图形的内部,这里使用一个颜色填充。
Width、Height:宽度和高度
Opacity:设置不透明度,值越大颜色越深。
在System.Windows.Shapes命名空间下还有一些类可以让我们画直线、折线、矩形等,可以从官方文档获取这些信息。
基于Silverlight的大多数应用程序不会受到所使用开发语言的影响。

3、这一步我们将添加适中的外围

可以在画面上看到一个很明显的颜色过渡。

Stroke:设置图形的外边。
Ellipse.Fill是Fill的变形。
LinearGradientBrush:线性渐变画笔,线性渐变定义了一个颜色渐变区域,从(0,0)到(1,1);
StartPoint为起点,EndPoint为结束点。
GradientStop:线性渐变中的一点;
Color:为这一点的颜色。
Offset:当前点在线性渐变中的位置,Offset从0.0到1.0。
这两个GradientStop是线性渐变上的两个点。

4、现在添加一个斜面(bevel )

在这里也可以清楚地看到一个颜色过渡,主要是为了实现有光线的效果。

5、添加表盘

然后就可以比较清晰地看到刚才的斜面效果了。

6、然后添加中间的圆圈和指针

这里根据秒针、分针、时针的不同尺寸,属性有所差异。
默认的位置都在一起。

StrokeThickness:椭圆外边的宽度。
Rectangle :矩形。
RenderTransformOrigin:指相对于这个矩形的,通过RenderTransform属性定的描绘变化的中心点。
RenderTransform:设置影响矩形位置变换的信息。
RotateTransform:在二维坐标系统内,依据一个特定的点顺时针旋转对象。

7、在这一部分中,将为指针添加旋转的动画效果
在<UserControl>标签的后面添加代码,用来添加动画效果。

Resources:取得本地定义的资源字典。在XAML中可以通过添加子元素的方式建立资源。
Storyboard :使用时间线控制动画,并为它的子动画指定对象和目标属性的信息。
DoubleAnimation:动画,通过使用线性插值法,在一个规定的限制内,获取两个特定值的double形式,添加动画。
TargetName:绑定到的对象名称。
TargetProperty:设置动画的属性,Angle表示按角度旋转。
Duration:对象活动的时间轴。
RepeatBehavior:在这个时间轴上循环重复。

为了启动面板的动画,使用Loaded事件调用面板的Begin方法。

选中SetAndStartClock,右键,在cs文件中添加处理程序

运行这个程序,可以看到指针已经在旋转了,按照代码里边设置的Duration进行循环。

8、现在我们要让这个时钟运转起来,按照当前的时间运行。

OK,现在可以看看最后的运行效果了。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《Silverlight起步[3]–使用Silverlight创建一个时钟

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有1 条评论

  1. bugua 沙发:

    没想到你写得还挺勤快的,现在做翻译啦?

发表评论