首页 > 代码库 > Silverlight 之 浅析

Silverlight 之 浅析

一、silverlight定义及作用

      silverlight用XAML来做前端界面,用.NET或者JS作为程序脚本支持,在浏览器内外运行的应用。可以认为和FLASH 和ADOBE AIR有很大的功能重叠。当然他能做大部分flash或者air程序的工作。

二、silverlight知识层次

      包括控件、布局、多媒体、XAML基础、属性和事件、数据、网络、调试等等。

      Silverlight的界面可以用XAML和C#(或者其他)写。一般都用XAML,所以要先介绍XAML。

      用2010新建一个SL工程,可以看到每个XAML下都有一个同名CS文件,这是XAML对应的控制类。此外,SL还有资源树,类似于QT中的资源文件,可以设定一个唯一关键字访问资源。

1.XAML基础

      XAML是一种标记语言,就是包装过的XML。每个XML开头都有声明命名空间。所以

(1)Namespace

<UserControl    x:Class="SilverlightTest.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >    <Grid Background="OldLace"> </Grid> </UserControl> 

      简单地来说,UserControl代表了这个XAML继承自 UserControl 类,该类提供基本的UI。随后的 x:Class 表示这个XAML对应的CS文件中的类名。

扩展:[1]x:key:为资源树中的内容提供唯一标示 ;    [2]x:Name:为一个控件之类的提供唯一标示。

      xmls开头的行定义默认的XAML命名空间,只需要复制粘贴就行了,和XML一样这些都是固定的。注意如果要用到 Silverlight SDK 的类,需要声明xmls:sdk。

(2)XAML语法

      因为XAML是封装XML,所以就是那些,用<name></name>, <name/>,<name property="XXX"/>这些。当然,属性除了可以在XAML中直接定义,也可以在对应的CS文件里定义。

2. 控件

      查看silverlight支持的控件,或者按照功能分类的基本控件。

(1) 基本控件列表

[1]按钮:Button,HyberlinkButton(单击打开链接),RepeatButton(按下状态下不断发送单击事件)

[2]选择:checkBox,ComboBox,ListBox,RadioBox,Slider

[3]日期选择:Calendar,DataPicker

[4]文本显示:TextBlock,RickTextBox

[5]可编辑文本:RichTextBox AutoCompleteBox(自动完成,带下拉菜单,类似浏览器地址栏), TextBox, PasswordBox

[6]进度条:ProcessBar

[7]数据表:DataGrid, TreeView, DataPager

[8]多媒体:Image ,InkPresenter(绘画板), MediaElement, MultiScaleImage

[9]HTML加载:WebBrowser

[10]布局:Border,Canvas,Grid..........

[11]对话框:Open/SaveFileDialog, ChildWindow, Popup

      ......等等控件。如果你熟悉图形界面编程,大多数控件都和其他UI库没差别。

(2)控件的外观

[1]控件通常都有比如Height, Width, Background等属性,对于panel,还有margin之类的。可以用XML的属性设置方法设,或者在对应的CS中设置。这些都很简单。

[2]也可以在控件中添加<style>子标签进行大量style定义。

[3]也可以通过将Style声明为资源(resources)为多个同类控件定制统一外观。方法是:

      在XAML文件的布局中声明这个布局的resources属性,添加style标签,用TargetType说明控件类型,并用 x:key 定义一个关键字。用Setter定义详细的控件,setter有两个属性,property和value。

在需要应用该style的控件上添加一个style属性,值就是该style对应的key。

<StackPanel.Resources>    <Style TargetType="Button" x:Key="myButtonStyle">    <Setter Property="Background" Value="Purple" />    <Setter Property="Foreground" Value="#9900FF" />    <Setter Property="Height" Value="50" />    <Setter Property="Width" Value="100" />    <Setter Property="Margin" Value="5" />    <Setter Property="HorizontalContentAlignment" Value="Center" />    <Setter Property="VerticalContentAlignment" Value="Center" />    <Setter Property="Cursor" Value="Hand" />    <Setter Property="FontSize" Value="14" />    </Style></StackPanel.Resources><Button x:Name="button3" Width="130" Content="Click Me Instead!" Style="{StaticResource myButtonStyle}"/>

(3)深层定制控件

      Style定义的内容有限,使用 templates 可以更深层定制一个控件。声明方法跟style一样。

      可以作为某控件的一个标签:

<Button Content="Button1">  <Button.Template>    <ControlTemplate TargetType="Button">      <!--Define the ControlTemplate here.-->    </ControlTemplate>  </Button.Template></Button> 

      或者作为一个资源,只是标签是ControlTemplate,其他和style一样。

      当然template也可以作为style的一个setter定义在style中,这种方式也更常用。这时property是template

<StackPanel>  <StackPanel.Resources>    <Style TargetType="Button" x:Key="newTemplate">       <Setter Property="Template">        <Setter.Value>          <ControlTemplate TargetType="Button">......

      控件通常是用更小的部件拼接成的,比如说button有一个矩形区域和一个border,这些部件称作FrameElement. Template必须声明一个Root FrameElement(一般是Border?)下列代码演示对button外观的定制:

<ControlTemplate TargetType="Button">    <Border x:Name="RootElement">        <Border.Background>            <SolidColorBrush x:Name="BorderBrush" Color="Black"/>        </Border.Background>......

      ControlTemplate当然就是template声明,用 x:Name 声明了Border是一个rootElement。

      注意到代码中的TemplateBinding(模板绑定)标签,意思就是说这个属性将留给使用附加有该template的控件的用户决定,而不由templates定义死。有些属性是由ControlTemplate的父类继承的,无需声明模板绑定,比如FontSize等。

      此外,Button还有各种状态,点击,鼠标悬浮,按下等等,要对不同的状态定制,可以使用VisualState标签。不同的states组成VisualStateGroups。就Button而言有CommonStates和FocusStates两组。下面代码演示了添加方法:

<ControlTemplate TargetType="Button">  <Border x:Name="RootElement">    <VisualStateManager.VisualStateGroups>      <VisualStateGroup x:Name="CommonStates">        <VisualState x:Name="Normal" />......

      此外VisualStateGroup还有一个Transitions属性,可以包含VisualTransition子标签。因为默认的动画是延迟一秒,如果想自定义动画时间,可以使用这个标签。VisualTransition包含From,To,GeneratedDuration,分别是状态转换的两边和 时间值。该标签可以用StoryBoard子标签定义一个详细的动画。 

<VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:1.5">

      使用templates最方便的就是修改 默认template,可以避免很多麻烦。

3. 布局

      Silverlight的Panel控件包括:

(1)canvas: 在该区域内使用坐标值定义子控件的位置,这也是唯一允许控件重叠的布局。

(2)StackPanel:横向或者纵向排列控件(Orientation属性)。

(3)Grid:类似图标的布局,有raw和column。

      控件之间的距离有margin属性,这些都很简单,参见MSDN。

4. 事件处理

      事件响应的简单实现是,在支持事件的控件标签上添加相应的属性,比如button支持click事件,就在button标签中添加click属性,click的值是处理函数(slot)的函数名,函数在XAML对应的CS文件中实现。

      也可以在cs文件中使用 buttonName.click+="functionName"; 添加处理函数。处理函数的形参是固定的:object sender,RoutedEventArgs e。

 5. 多媒体

(1)图形

[1]Shape:是一种UI元素,可以用在各种Panel里面。包括Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。

      所有的Shape元素公用的三个属性是Stroke,StrokeThickness和Fill,分别是轮廓定义,轮廓粗细和填充。其坐标用X1,X2....等属性定义,坐标以Shape元素被定义的位置为坐标原点。

<Canvas Height="300" Width="300"> <!-- Draws a diagonal line from (10,10) to (50,50)    and moves it 100 pixels to the right. -->  <Line X1="10" Y1="10" X2="50" Y2="50"    StrokeThickness="10"    Canvas.Left="100">    <Line.Stroke>      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"         RadiusX="0.5" RadiusY="0.5">        <RadialGradientBrush.GradientStops>          <GradientStop Color="Red" Offset="0" />          <GradientStop Color="Blue" Offset="0.5" />        </RadialGradientBrush.GradientStops>      </RadialGradientBrush>    </Line.Stroke>  </Line>

      Line就是直线,Ellipse是椭圆,Path:路径。path有一个Data属性,其值是一个用特殊语法标记的字符串。

[2]形状变换

      Transform标签集可以用于2D图形变换,包括括旋转 (RotateTransform)、缩放 (ScaleTransform)、斜切 (SkewTransform) 和转换 (TranslateTransform)。就Shape而言,所有Shape都有一个RenderTransform属性,可以接受Transform标签集作为其子标签。如果要应用多个Tramsform则需要添加TransformGroup标签。

<Grid x:Name="LayoutRoot" Background="White">  <Rectangle Width="50" Height="50"    Fill="RoyalBlue">    <Rectangle.RenderTransform>      <RotateTransform Angle="45" />    </Rectangle.RenderTransform>  </Rectangle></Grid>

(2) Brush

      就像任何绘图软件一样,除了能画形状,还需要定制一种画笔,可以产生一个填充区域。Brush标签集有SolidColorBrush(有一个Color属性,用于定义任何shape的fill属性),LinearGradientBrush(线性渐变)和RadialGradientBrush(辐射渐变)和ImageBrush,VideoBrush。

      注意颜色可以有透明值,Color属性支持ARGB颜色(#AARRGGBB)。

      思考一下在PS中渐变是怎么产生的,首先线性渐变需要一个渐变方向(角度),其次可以设置多个位置,设置它们的颜色,程序会产生从一个颜色到另一个的渐变。在 Silverlight 中,线性渐变的角度由StartPoint 和 EndPoint定义,他们都是point值,且只能取0-1之间的小数。比如从(0,0) 到(1,1)将定义一个对角线渐变。而关键颜色值通过GradientStop定义,该标签有两个属性,Color和Offset(基于StartPoint的偏移值)

<StackPanel>  <!-- This rectangle is painted with a horizontal linear gradient. -->  <Rectangle Width="200" Height="100">    <Rectangle.Fill>      <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">        <GradientStop Color="Yellow" Offset="0.0" />        <GradientStop Color="Red" Offset="0.25" />        <GradientStop Color="Blue" Offset="0.75" />        <GradientStop Color="LimeGreen" Offset="1.0" />      </LinearGradientBrush>    </Rectangle.Fill>  </Rectangle> </StackPanel>

      而对于辐射渐变,我们需要一个椭圆区域,所以需要X,Y轴长和圆心,在该区域内设定一个渐变核心点,然后以之为中心展开渐变,对应了RadialGradientBrush的GradientOrigin、Center、RadiusX 和 RadiusY属性。

      ImageBrush有ImageSource和Stretch(有Fill, None、Uniform 或 UniformToFil四个可选值)两个属性定义一个图像填充笔刷。

(3) Deep Zoom

      简单说就是 Silverlight 提供的一种图像缩放技术。使用Deep Zoom Composer创建dzi格式的图像或图像序列,然后在 Silverlight中 加载。Silverlight提供了一些相关API,如果你很感兴趣可以看看Deep Zoom。

(4) 动画

      用StoryBoard标签为一个UI组件提供一组动画,每一个动画可以用XXAnimation标签标示,比如创建一个变化值为小数的动画,就用DoubleAnimation. Animation标签集有From,To,Duaration, AutoReverse, RepeatBehaviour等属性。此外,Animation还可以指定其作用对象(TargetName)以及作用属性(TargetProperty)。StoryBoard也可以作为一个panel元素的元素(和Style,templates一样),通过x:Name访问,或者通过事件处理函数中调用动画的begin函数触发。

下面有个简单的实例:

<StackPanel>  <StackPanel.Resources>    <!-- Animates the rectangle‘s opacity. -->    <Storyboard x:Name="myStoryboard">      <DoubleAnimation        Storyboard.TargetName="MyAnimatedRectangle"        Storyboard.TargetProperty="Opacity"        From="1.0" To="0.0" Duration="0:0:1"         AutoReverse="True" RepeatBehavior="Forever" />    </Storyboard>  </StackPanel.Resources>  <Rectangle    x:Name="MyAnimatedRectangle"    Width="100" Height="100" Fill="Blue" /></StackPanel>

      Animation还提供了一个XXXAnimation.EasingFunction子集,可以为动画进行缓冲、反弹等等效果

<StackPanel.Resources>        <Storyboard x:Name="myStoryboard">            <DoubleAnimation From="30" To="200" Duration="00:00:3"                 Storyboard.TargetName="myRectangle"                 Storyboard.TargetProperty="Height">                <DoubleAnimation.EasingFunction>                    <BounceEase Bounces="2" EasingMode="EaseOut"                                 Bounciness="2" />                </DoubleAnimation.EasingFunction>            </DoubleAnimation>        </Storyboard>    </StackPanel.Resources>

      关键帧动画则用XXXAnimationUsingKeyFrames标签集定义。他没有from,to标签,而是从一个关键帧用制定方法变化到下一个关键帧,变化方法由关键帧标签说明。关键帧标签有三种:DiscreteDoubleKeyFrame、LinearDoubleKeyFrame 和 SplineDoubleKeyFrame。分别是均匀变化,突然出现和加速出现(?)

(5)音频和视频

      使用MediaElement标签即可,

6. Silverlight高级特性

      Silverlight支持Array,List<T>,Dictionary<key,value>等数据结构。SL插件为应用程序提供1MB的本地存储空间。

      Silverlight提供了API允许HTTP请求,查看cookies等,查看网络通信特性。

Silverlight 之 浅析