silverlight 行动起来
本文的介绍了基于silverlight的应用程序的主要特点。文中包括了创建一个基于silverlight的应用程序的代码代码示例，这将会是你编写代码的开始。
本文要点：
l 预先准备条件
l Silverlight集成到应用程序
l XAML
l 布局、设计
l 控件
l 添加逻辑代码
l 多动态语言
l 图像技术
l 多媒体与动画
l 数据
l 网络
l 基于silverlight的类库
l 其它相关主题
预先准备条件
本文中的所有示例都可以运行安装有“silverlight2BETA2运行时”的电脑上。然尔，如果你想修改这些示例，那就需要在以下基础上进行：
l Silverlight 2 beta 2
l Silverlight 2 Beta 2 SDK
l Visual Studio 2008
l Silverlight Tools Beta 2 For Visual studio 2008
注意事项：
本文假定你使用vs2008来创建应用程序。也可以不用visual Studio来创建“基于silerlight的应用程序”，比如：MSBuild。 想要获得更多信息，请看：Developing a Silverlight Application Assembly
Silverlight集成到应用程序
一个基于silverlight的应用程序可以（满足）被在静态页面中silverlight插件调用。Silverlight插件可以填充整个HTML页面 或 仅填充一部分空间。在默认情况下，visual studio项目 允许插件占整个页面（高宽均为100%）。 更多的细节请参照：Instantiating a Silverlight Plug-In (Silverlight 2)
如果你只想用silverlight来作为应用程序的一部分，你可能想在你的silverlight代码中调用静态页面，反之亦然。更多的实现细节请参照：HTML Bridge: Interaction Between HTML and Managed Code。如果你有动态的asp.net页面存在，你可以插入一个madiaPlayer控件或Silverlight服务器控件在你的网页当中。更多的信息请看：Integrating Silverlight with ASP.NET Web Pages
XAML
你可以用，一种说性的标记语言Xaml，去为你的silverlight应用程序定义UI元素（呈现标记）。当你创建一个新的visual studio项目，一个后缀名为.xaml的文件会自动创建。在XAML文件中，你可以创建许多实体并且用XML标签和属性定义它们的性质。关于于XAML更多的信息，请参照XAML Overview (Silverlight 2) 。
这里有一个创建一个红色矩形的简单的XAML语句 。
|
|
|
<Rectangle Fill="Red" Width="150" Height="100"/> |
下面的插图将会显示这代码的执行。
你可以创建所有UI（界面）在 XAML中，或者通过用Microsoft Expression Blend 来设计你的应用程序。Expression Blend 是一个为创建silverlight程序的 WYSIWYG（即见的）界面设计工具。Expression Blend生成一个你可以直接编辑的XAML文件。用Expression Blend可以安装事件和编写后台代码。更多内容请参照：Silverlight QuickStart Using Microsoft Expression
布局、设计
当创建一个silverlight应用程序的时候，首先要做的一件事你必须要决定如何布局你的UI（界面）。Silverlight提供一3 种可用布局板式。默认的板式为Grid ,这种最为灵活和强大的布局板式。
|
Container |
Description |
|
Canvas [ http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas(VS.95).aspx ] |
Position child elements absolutely in x,y space. |
|
StackPanel [ http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(VS.95).aspx ] |
Position child elements relative to one another in horizontal or vertical stacks. |
|
Grid [ http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(VS.95).aspx ] |
Position child elements in rows and columns. |
下面的例子，是一个Rectangle正方形元素位于GRID的1，1单元格中。Grid用一个0作为索引，所以正方形出现在右下角
|
XAML |
|
<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions>
<Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/> </Grid>
|
下面插图将展示这段代码如果执行：
更多的布局信息请看：Object Positioning and Layout (Silverlight 2)
控件
在silverlight中的控件允许你继承或 其它部分控件可被设计成显示状态的用户控件。在控件操作性范围内，允许跟用户之间的交互，比如Button、TextBox、DataGrid, 为了支持一些复杂的布局信息，如：DataGrid 所有可用的控件清单，请参照Control Gallery
Silverlight 提供的默认模板将会影响到每一个控件的样式（长像）。然而，你可以创建客户模板去改变这些控件的外表以及控件的虚拟行为。更多的信息可参照Control Customization
下面的示例是在前一个示例之上，在GRID的0,0单元之内增加一个按钮。
|
XAML |
|
<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Button Height="25" Width="100" Grid.Column="0" Grid.Row="0"/> <Rectangle Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/> </Grid> |
The following illustration shows how this code renders.
添加逻辑代码
在默认的情况下，你的visual studio project 要包括一个代码文件，有些时候称之为后台代码。后台代码文件包括一个管理语言，被silverlight通过 “公共语言运行时(CLR)”，就像C#或VB一样。想要了解更多关于CLR和Silverlight，请参照：Common Language Runtime Overview
后台代码文件名取为：page.xaml 和 附加一些语言类型（比如,page.xaml.cs）.这些后台代码文件就是应用逻辑XAML对象的地方。你可以用代码创建UI对象，并把它们添加到你的可见的元素树当中去。此外，你可以在你的后台代码中创建类（并且所有的代码文件都可以包括在你的项目中）通过XAML进行存取。举个例子，你可以定义你自己的控件并且在XAML中实例化它们。更多的信息请参照： XAML Namescopes (Silverlight 2)、 XAML and Mapping Custom XML Namespace Values (Silverlight 2)
下面的示例是添加把正方形颜色从红色改变为蓝色的Click事件。
在Xaml中，添加Click事件到Button和一个 x:Name 属性给Rectangle。x:Name 允许你在你的后台代码中使用 Rectangle。
|
XAML |
|
<Button Height="25" Width="100" Grid.Column="0" Grid.Row="0" Click="Button_Click"/> <Rectangle x:Name="rect1" Fill="Red" Width="150" Height="100" Grid.Column="1" Grid.Row="1"/>
|
在后台代码中定义Click事件。更多使用事件的信息请参照. Events Overview (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189018(VS.95).aspx ] .
|
C# |
|
private void Button_Click(object sender, RoutedEventArgs e) { rect1.Fill = new SolidColorBrush(Colors.Blue); }
|
The following illustration shows how this code renders.
多动态语言
Silverlight包括有动态语言运行时（DLR），动态语言运行时可以使用户使用多种动态语言技术比如：Python and Ruby去编写一个Silverlight应用程序。多动态语言被封装成源代码，不需要编译装配，代码可以直接生成并且在运行时候编译。它们可以更为灵活的跟设计风格进行交互。Silverlight包括三种动态语言：IronPython,IronRuby,和 Managed Jscript。更多信息：Dynamic Languages in Silverlight 2。
图像技术
Silverlight提供许多为添加有趣味的可见的组件在你的应用程序中。你可可以用画图，金属质感，轨迹效果和一些复杂的几何图形。定义的几何图形区域可以通过画刷填充的效果，比如 图片，多层颜色，或回形针效果。更多信息请看Shapes and Drawing (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189073(VS.95).aspx ] , Geometries (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189068(VS.95).aspx ] , and Brushes (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189003(VS.95).aspx ] .
你能在你的应用程序当中增加图片和图片效果。Silverlight 也包括了Deep Zoom,能允许你轻松的缩放和上传大图片。更多信息请参照：Imaging (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189005(VS.95).aspx ] and Deep Zoom [ http://msdn.microsoft.com/en-us/library/cc645050(VS.95).aspx ] .
下面的示例用线性渐变画刷填充正方形。
|
XAML |
|
<Rectangle x:Name="rect1" Width="150" Height="100" Grid.Column="1" Grid.Row="1"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset="0" Color="LightBlue"/> <GradientStop Offset="0.4" Color="Blue"/> <GradientStop Offset="0.8" Color="Purple"/> <GradientStop Offset="1.0" Color="Lavender"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
|
The following illustration shows how this code renders.
多媒体与动画
添加了静态的图片，你可能还要添加动画、语音、视频到你的应用程序当中，让它变得更为生动长更具有交互性。更多信息请参照：Animation Overview (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx ] and Audio and Video Overview (Silverlight 2) [ http://msdn.microsoft.com/en-us/library/cc189078(VS.95).aspx ]
下面示例在先前的示例基础上使正方形增加和收缩直到点击
|
XAML |
|
<Grid ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions>
<Grid.Resources> <Storyboard x:Name="AnimateRectangle"> <DoubleAnimation Storyboard.TargetName="rect1" Storyboard.TargetProperty="Height" From="0" To="100" AutoReverse="True" Duration="0:0:02" RepeatBehavior="Forever"/> <DoubleAnimation Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width" From="0" To="100" AutoReverse="True" Duration="0:0:04" RepeatBehavior="Forever"/> </Storyboard> </Grid.Resources>
<Button Height="25" Width="100" Grid.Column="0" Grid.Row="0" Content="Stop" Click="Button_Click"/> <Rectangle x:Name="rect1" Width="150" Height="100" Grid.Column="1" Grid.Row="1" Loaded="OnLoaded"> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset="0" Color="LightBlue"/> <GradientStop Offset="0.4" Color="Blue"/> <GradientStop Offset="0.8" Color="Purple"/> <GradientStop Offset="1.0" Color="Lavender"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Button Height="25" Width="100" Grid.Column="0" Grid.Row="1" Content="Start" Click="Button_Click_1"/>
</Grid>
|
|
C# |
|
private void OnLoaded(object sender, RoutedEventArgs e) { AnimateRectangle.Begin(); }
private void Button_Click(object sender, RoutedEventArgs e) { AnimateRectangle.Pause();
} private void Button_Click_1(object sender, RoutedEventArgs e) { AnimateRectangle.Resume(); } |
数据
许多Silverlight应用程序都同数据打交道。你能使用DataGrid和ListBox这样的控件显示数据集。为了在UI和呈现出来，你可以用Data Binding。如果你联接UI到你的对象之上，更新对象将自动传递到你的UI上面。
数据可能进入你的应用程序可能是来自不同的源，如来自RSS聚合，但是它仍是XML格式。为了解析XML数据Silverlight 含有XmlReader和LINQ。LINQ优势在于你解析小型数据时。更多信息来自：Parsing XML Data in Silverlight
网络
基于silverlight的类库
其它相关主题
l 动态语言
图像技术
