silverlight是什么，能做什么
silverlight用XAML来做前端界面，用.NET或者JS作为程序脚本支持，在浏览器内外运行的应用。可以认为和FLASH 和ADOBE AIR有很大的功能重叠。
当然他能做大部分flash或者air程序的工作。
silverlight知识层次
包括控件、布局、多媒体、XAML基础、属性和事件、数据、网络、调试等等。
SL的界面可以用XAML和C#（或者其他）写。一般都用XAML，所以要先介绍XAML。
0.预防针
本文将按照个人的语言习惯将同一类object称作一个标签集。
此外，用VS2008或2010新建一个SL工程，可以看到每个XAML下都有一个同名CS文件，这是XAML对应的控制类。此外，SL还有资源树，类似于QT中的资源文件，可以设定一个唯一关键字访问资源。
1.XAML基础
XAML是一种标记语言，就是包装过的XML。每个XML开头都有声明命名空间。所以
1.1 Namespace
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文件中的类名。
x:Name 为一个控件之类的提供唯一标示
xmls开头的行定义默认的XAML命名空间，只需要复制粘贴就行了，和XML一样这些都是固定的。注意如果要用到SL SDK的类，需要声明xmls:sdk
1.2 XAML语法
因为XAML是封装XML，所以就是那些，用<name></name>, <name/>,<name property="XXX"/>这些。当然，属性除了可以在XAML中直接定义，也可以在对应的CS文件里定义。
2.控件
查看silverlight支持的控件，或者按照功能分类的基本控件
2.1 基本控件列表
按钮：Button,HyberlinkButton(单击打开链接),RepeatButton（按下状态下不断发送单击事件）
选择：checkBox,ComboBox,ListBox,RadioBox,Slider
日期选择：Calendar,DataPicker
文本显示：TextBlock,RickTextBox
可编辑文本：RichTextBox AutoCompleteBox（自动完成，带下拉菜单，类似浏览器地址栏）, TextBox, PasswordBox
进度条：ProcessBar
数据表：DataGrid, TreeView, DataPager
多媒体：Image ,InkPresenter（绘画板）, MediaElement, MultiScaleImage
HTML加载：WebBrowser
布局：Border,Canvas,Grid..........
对话框：Open/SaveFileDialog, ChildWindow, Popup
等等控件
如果你熟悉图形界面编程，大多数控件都和其他UI库没差别。
2.2 控件的外观
空间通常都有比如Height, Width, Background等属性，对于panel，还有margin之类的。可以用XML的属性设置方法设，或者在对应的CS中设置。这些都很简单。
也可以在空间中添加<style>子标签进行大量style定义。
也可以通过将Style声明为资源（resources）为多个同类控件定制统一外观。方法是：
在XAML文件的布局中声明这个布局的resources属性，添加style标签，用TargetType说明控件类型，并用x:key定义一个关键字。用Setter定义详细的控件，setter有两个属性，property和value。
在需要应用该style的空间上添加一个style属性，值就是该style对应的key
< 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} " />
2.3 深层定制控件
Style定义的内容有限，使用templates可以更深层定制一个控件。声明方法跟style一样。
可以作为某控件的一个标签
< Button.Template >
< ControlTemplate TargetType ="Button" >
<!-- Define the ControlTemplate here. -->
</ ControlTemplate >
</ Button.Template >
</ Button >
或者作为一个资源,只是标签是ControlTemplate，其他和style一样。
当然template也可以作为style的一个setter定义在style中，这种方式也更常用。这时property是template
< StackPanel.Resources >
< Style TargetType ="Button" x:Key ="newTemplate" >
< Setter Property ="Template" >
< Setter.Value >
< ControlTemplate TargetType ="Button" >
......
控件通常是用更小的部件拼接成的，比如说button有一个矩形区域和一个border，这些部件称作FrameElement. Template必须声明一个Root FrameElement（一般是Border?）下列代码演示对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两组。下面代码演示了添加方法：
< Border x:Name = " RootElement " >
< VisualStateManager.VisualStateGroups >
< VisualStateGroup x:Name = " CommonStates " >
< VisualState x:Name = " Normal " />
......
此外VisualStateGroup还有一个Transitions属性，可以包含VisualTransition子标签。因为默认的动画是延迟一秒，如果想自定义动画时间，可以使用这个标签。VisualTransition包含From,To,GeneratedDuration，分别是状态转换的两边和 时间值。该标签可以用StoryBoard子标签定义一个详细的动画。
GeneratedDuration ="0:0:1.5" >
使用templates最方便的就是修改默认template,可以避免很多麻烦。
3. 布局
SL的Panel控件包括
- canvas: 在该区域内使用坐标值定义子控件的位置，这也是唯一允许控件重叠的布局
- StackPanel：横向或者纵向排列控件（Orientation属性）
- Grid：类似图标的布局，有raw和column
空间之间的距离有margin属性，这些都很简单，参见MSDN
4. 事件处理
事件响应的简单实现是，在支持事件的空间标签上添加相应的属性，比如button支持click时间，就在button标签中添加click属性，click的值是处理函数（slot）的函数名，函数在XAML对应的CS文件中实现。
也可以在cs文件中使用buttonName.click+="functionName";添加处理函数。处理函数的形参是固定的：object sender,RoutedEventArgs e
5. 多媒体
5.1图形
5.1.1 Shape
Shape是一种UI元素，可以用在各种Panel里面。包括Ellipse、Line、Path、Polygon、Polyline 和 Rectangle。
所有的Shape元素公用的三个属性是Stroke,StrokeThickness和Fill，分别是轮廓定义，轮廓粗细和填充。其坐标用X1,X2....等属性定义，坐标以Shape元素被定义的位置为坐标原点。
代码
<!-- 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属性，其值是一个用特殊语法标记的字符串，查看语法
5.1.2 形状变换
Transform标签集可以用于2D图形变换，包括括旋转 (RotateTransform)、缩放 (ScaleTransform)、斜切 (SkewTransform) 和转换 (TranslateTransform)。就Shape而言，所有Shape都有一个RenderTransform属性，可以接受Transform标签集作为其子标签。如果要应用多个Tramsform则需要添加TransformGroup标签。
代码
< Rectangle Width ="50" Height ="50"
Fill ="RoyalBlue" >
< Rectangle.RenderTransform >
< RotateTransform Angle ="45" />
</ Rectangle.RenderTransform >
</ Rectangle >
</ Grid >
5.2 Brush
就像任何绘图软件一样，除了能画形状，还需要定制一种画笔，可以产生一个填充区域（你也可以把line看做一个填充区域吧= =）。Brush标签集有SolidColorBrush（有一个Color属性，用于定义任何shape的fill属性），LinearGradientBrush（线性渐变）和RadialGradientBrush（辐射渐变）和ImageBrush，VideoBrush。
注意颜色可以有透明值，Color属性支持ARGB颜色（#AARRGGBB）。
思考一下在PS中渐变是怎么产生的，首先线性渐变需要一个渐变方向（角度），其次可以设置多个位置，设置它们的颜色（我称之为关键颜色），程序会产生从一个颜色到另一个的渐变。在SL中，线性渐变的角度由StartPoint 和 EndPoint定义，他们都是point值，且只能取0-1之间的小数。比如从(0,0) 到(1,1)将定义一个对角线渐变。而关键颜色值通过GradientStop定义，该标签有两个属性，Color和Offset（基于StartPoint的偏移值）
代码
2 <!-- This rectangle is painted with a horizontal linear gradient. -->
3 < Rectangle Width ="200" Height ="100" >
4 < Rectangle.Fill >
5 < LinearGradientBrush StartPoint ="0,0.5" EndPoint ="1,0.5" >
6 < GradientStop Color ="Yellow" Offset ="0.0" />
7 < GradientStop Color ="Red" Offset ="0.25" />
8 < GradientStop Color ="Blue" Offset ="0.75" />
9 < GradientStop Color ="LimeGreen" Offset ="1.0" />
10 </ LinearGradientBrush >
11 </ Rectangle.Fill >
12 </ Rectangle >
13 </ StackPanel >
而对于辐射渐变，我们需要一个椭圆区域，所以需要X,Y轴长和圆心，在该区域内设定一个渐变核心点，然后以之为中心展开渐变，对应了RadialGradientBrush的GradientOrigin、Center、RadiusX 和 RadiusY属性。
ImageBrush有ImageSource和Stretch（有Fill, None、Uniform 或 UniformToFil四个可选值）两个属性定义一个图像填充笔刷。顾名思义，就不多说了。
5.3 Deep Zoom
简单说就是SL提供的一种图像缩放技术。使用Deep Zoom Composer创建dzi格式的图像或图像序列，然后在SL中加载。SL提供了一些相关API，如果你很感兴趣可以看看Deep Zoom
5.4 动画
用StoryBoard标签为一个UI组件提供一组动画，每一个动画可以用XXAnimation标签标示，比如创建一个变化值为小数的动画，就用DoubleAnimation. Animation标签集有From,To,Duaration, AutoReverse, RepeatBehaviour等属性。此外，Animation还可以指定其作用对象（TargetName）以及作用属性（TargetProperty）。StoryBoard也可以作为一个panel元素的元素（和Style,templates一样），通过x:Name访问，或者通过事件处理函数中调用动画的begin函数触发。
下面有个简单的实例：
代码
< 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子集，可以为动画进行缓冲、反弹等等效果
代码
< 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.5 音频和视频
使用MediaElement标签即可，
6. SL高级特性
这里高级指适合看MSDN的部分= =
L支持Array,List<T>,Dictionary<key,value>等数据结构。SL插件为应用程序提供1MB的本地存储空间。查看如何存储
SL提供了API允许HTTP请求，查看cookies等，查看网络通信特性
至此笔记暂时完结，稍后有空可能完善修改一下。
扫一扫
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
