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 |
<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的类库