Silverlight系列（1）Silverlight 和XAML

1.1 Silverlight简介

Silverlight是Microsoft 全力打造的一种跨平台、跨浏览器的RIA（富互联网应用程序）技术，并通过结合音视频、动画、交互以及炫丽的用户界面为Web应用程序提供精彩的多媒体创意和丰富的交互式环境。

下面是几个采用silverlight技术的网站：

http://money.finance.sina.com.cn/silverlight/

http://tennis.uxclip.com/

1.1.1 Silverlight与WPF

Silverlight的前身是“WPF/E”（WPF Everywhere），是WPF（Windows Presentation Function）的子集，WPF是.NET 3.0框架技术的重要组成部分，是Microsoft新一代桌面应用程序的界面呈现技术，Windows 7就是基于这种技术完成的。她可以直接操纵硬件显卡驱动，市图形图像表现上升到新高度。Silverlight是WPF在B/S上的应用。

1.1.2 Silverlight的技术优势

1. 引人注目的体验

支持2D、3D的图形图像、动画、多媒体数据绑定、网络通讯和丰富的控件，同时提供了强大的样式模板和自定义风格样式，支持图像的缩放。并且Silverlight插件的体积小，下载和安装方便。

2. 强大的技术

Silverlight是跨浏览器的，支持多种语言开发。支持Linq、WCF、ADO.NET技术，并可以与ASP.NET及Ajax进行完美结合。尤其是在多媒体方向的开发显得尤为突出。

3. 敏捷的开发效率

Microsoft除了提供VS开发工具还提供了Expression Studio套件进行界面开发（后期学）,Silverlight界面是通过XAML语言来设计的。

1.1.3 创建第一个Silverlight程序

第一步，创建Silverlight项目

第二步，Silverlight应用程序必须在受主机托管的Html页面中运行，所以需要选择向解决方案中添加新的ASP.NET Web项目。创建完成。

APP.xaml文件用来控制程序的入口和资源以及异常处理。以下代码用来确定应用程序初始加载项。

private void Application_Startup(object sender, StartupEventArgs e)

{

this.RootVisual = new MainPage();

}

MainPage.xaml是Silverlight应用程序的默认用户控件.

第三步，制作程序

在MainPage用户控件中放入TextBlock控件，并设置ForeGround属性为渐变，Text属性为第一个Silverlight程序。再加入一个TextBox和Button控件。如图所示：

按钮的点击事件代码如下：

private void button1_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("点击了我，奇迹发生了！");

this.textBlock1.Text = textBox1.Text;

}

运行结果如下：

1.2 XAML可扩展应用程序标记语言

Silverlight和WPF都是采用XAML语言来描述界面元素的，使用这一语言彻底把界面和代码分离出来。来源于XML，遵循XML的规则。

1.2.1 Silverlight的XAML分类

按需求可以分为如下几种：

（1）根元素

来源于XML，一个XML只能有一个根节点，XAML的根节点是UserControl。

（2） XAML控件元素

常见的控件元素有<Button>,<TextBox>,<TextBlock>等，就是控件。

（3） XAML布局元素

常见布局元素有<Canvas>,<Grid>,<StackPanel>等，用于页面布局

（4） XAML绘画元素

Silverlight的图形元素分为Shape（线性绘图类）和Geometry（几何绘图类），常见的元素有<line>,<Rectangle>等

（5） XAML属性元素

用来描述控件的属性，如：width,BackGround等等

1.2.2 设置属性

在XAML中设置属性有以下几种方式：

（1）使用属性语法

格式如下：

如：

（2）使用属性元素语法

某些属性可以使用属性元素语法这种形式来设置，语法如下：

<object.property>

</object.property>

</object>

如上面的形式可以写成

<Canvas.Width>300</Canvas.Width>

<Canvas.Height>200</Canvas.Height>

<Canvas.Background>Red</Canvas.Background>

</Canvas>

（3）使用内容元素语法

某些Silverlight元素的属性支持内容元素写法，这种属性允许忽略元素的名称，实例对象会根据XAML元素中的第一个标记值来设置它的属性。下面是三个示例的比较：

属性语法：

属性元素语法：

<TextBlock.Text>Silverlight</TextBlock.Text>

</TextBlock>

内容元素语法：

<TextBlock>Silverlight</TextBlock>

（4）使用集合语法

使用这种方式的元素通常是支持一个属性元素的集合，就是想对象的集合中添加属性项。如渐变色设置，LinearGradientBrush就是集合语法

<Canvas.Background>

</LinearGradientBrush>

</Canvas.Background>

</Canvas>

1.3 Silverlight布局

1.3.1 Canvas

Canvas是在Silverlight 1.0时代就有的一种基础布局面板，它采用绝对坐标定位。可以使用附加属性对Canvas中的元素进行定位，通过附加属性我们指定控件相对于其直接父容器Canvas 控件的上、下、左、右坐标的位置。如下面的XAML声明了两个矩形，它们分别相对于父容器Canvas的左边距是50，相对于父容器Canvas的上边距分别是50和150：

运行后界面的效果如下所示：

除了上面我们用到的Canvas.Top和Canvas.Left两个附加属性外，还有一个Canvas.ZIndex附加属性。如果指定了两个控件相对于父容器Canvas同样的边距，则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序，如下面的XAML声明：

<Rectangle Fill="#0099FF" Width="160" Height="80"

Canvas.Top="100" Canvas.Left="100" Canvas.ZIndex="1"/ >

<Rectangle Fill="#FF9900" Width="160" Height="80"

Canvas.Top="100" Canvas.Left="100"/>

</Canvas>

将会让蓝色矩形显示在上面，值最大的显示在最上面：