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