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子标签定义一个详细的动画。

使用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等，查看网络通信特性。