silverlight學習總結【完】

以下內容是個人理解，不保證正確性。且假設使用C#，并且有一定的相關知識和XML基礎。

?

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

<UserControl x:Class="MySilverlight.Page"
 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:key 為資源樹中的內容提供唯一標示
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

?

<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}"/>

2.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. 布局

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元素被定義的位置為坐標原點。

?

<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屬性，其值是一個用特殊語法標記的字符串，查看語法

5.1.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>

?

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的偏移值）

?

<StackPanel>
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>
<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.5 音頻和視頻

使用MediaElement標簽即可，

6.?SL高級特性

????這里高級指適合看MSDN的部分= =

L支持Array,List<T>,Dictionary<key,value>等數據結構。SL插件為應用程序提供1MB的本地存儲空間。查看如何存儲

SL提供了API允許HTTP請求，查看cookies等，查看網絡通信特性

?

至此筆記暫時完結，稍后有空可能完善修改一下。

?