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