silverlight 行动起来 转自

  silverlight 行动起来

转（http://www.cnblogs.com/Wedens/articles/1308162.html）

 

本文的介绍了基于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 Copy Code

<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 Copy Code

<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# Copy Code

private void Button_Click(object sender, RoutedEventArgs e) {     rect1.Fill = new SolidColorBrush(Colors.Blue); }

The following illustration shows how this code renders.

Run this sample

 

 

 

 

多动态语言

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 Copy Code

<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 Copy Code

<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# Copy Code

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(); }

Run this sample

数据

许多Silverlight应用程序都同数据打交道。你能使用DataGrid和ListBox这样的控件显示数据集。为了在UI和呈现出来，你可以用Data Binding。如果你联接UI到你的对象之上，更新对象将自动传递到你的UI上面。

数据可能进入你的应用程序可能是来自不同的源，如来自RSS聚合，但是它仍是XML格式。为了解析XML数据Silverlight 含有XmlReader和LINQ。LINQ优势在于你解析小型数据时。更多信息来自：Parsing XML Data in Silverlight

网络

 

 

 

基于silverlight的类库

 

 

其它相关主题