silverlight 入門----《二》

開發與設計

3.1 XAML

eXtensible Application Markup Language

Silverlight（WPF）的靈魂人物

XAML是以XML為base的Markup Language

必須是well-formed XML

XAML Tag對應.NET Framework Class類別

XAML element表示CLR類別物件

因此XAML具備物件導向及繼承的特性

XAML是Case sensetive

XAML Attribute值是強型別

XAML能做的，Code-Behind都能做

類似HTML的DOM， XAML會建立ElementTree

3.2

4 silverlight開發設計基礎

4.1Canvas

4.1.1Canvas

進入到Silverlight或是WPF領域,我們不得不認識最重要的一個物件–Canvas.

Canvas是Silverlight中最基本的佈局物件,他是一個容器,是一個用來放置其它物件的畫布.如果與Flash對比的話,Canvas相當於一個MovieClip,如果和XHTML對比的話,Canvas等同於DIV.進一步..Canvas是每一個Silverlight的Page或User Control的根物件,就像HTML的標籤,頂級是一個<HTML>一樣,Silverlight中的頂級就是一個Canvas,如:

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>

Canvas的基本屬性:

屬性名	說明
Width	寬度
Height	高度
Background	背景色
Opacity	透明度(0~1)
OpacityMask	透明度蒙板
RenderTransform	變形
Visibility	可視性
Cursor	滑鼠遊標圖形

設置相關屬性可以在XAML中如上一個代碼所示直接寫出值來就可以,或是在C#中動態賦值,如:

this.Visibility = Visibility.Collapsed;

這句話等同於Flash程式設計中的visible=0,值得注意的中,由於Silverlight採用C#程式設計,所以很多屬性不再像傳統指令碼語言那樣,提供一些數值,而是可以使用相關的集合進行方法,如可視性有一個屬性集合叫Visibility,在這個集合中可以訪問到一些可視性的屬性值,這樣做增進了程式碼的邏輯性,更健壯、易讀。所以，下面的語句可以設置Canvas的遊標，當滑鼠移上時，會自動產生手形，同樣訪問的是Cursors這個屬性集合：

this.Cursor = Cursors.Hand;

上面幾行代碼都用的是this，寫在C# code behind檔中的話，this就是指這個Page本身了，因為page的根是一個Canvas，所以我們的this指的就是整個Silverlight畫面.

事件

在Silverlight中,給對象加事件非常簡單..應該說在C#下:

public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();

this.MouseEnter += new MouseEventHandler(Page_MouseEnter);
}

void Page_MouseEnter(object sender, MouseEventArgs e)
{
throw new NotImplementedException();
}

使用VS2008的時候,我們通過代碼感應,選中MouseEnter事件後,我們只需要手動打一個+=,然後根據VS的提示,按一下鍵盤上的tab鍵,VS便自動幫我們完成整個事件的語法,並建立事件的處理方法(event handler),所以後面那個Page_MouseEnter方法是VS幫我們生成的,非常方便,MouseEnter等同於Flash中的RollOver事件,也就是滑鼠移上,所以這個時候我們可以在滑鼠移上時做一些相應的操作了.取消一個事件訂閱更簡單,只需要在要取消的代碼運行位置,寫上:

this.MouseEnter -= Page_MouseEnter;

這個事件便取消訂閱了.需要注意的是+=操作是可以累加的..如果你不小心在二個位置,或是程式運行的時候,動態+=了二次同一個事件..那麼這個事件接收是會運行二次的.當然這種累加也能為我們帶來很多方便的地方,比如在MouseEnter事件中有二種不同的操作,有時候二個都需要,有時候需要一個,就可以做二個事件處理方法,然後做二次+=不同的事件處理方法就行,如果有一個不需要,就-=一下,另一個還能保留下來.其它事件在VS編輯器中都可以通過.的代碼感應展開,不重複了.Canvas好象就沒什麼了,現在的Canvas從代碼感應中能找到屬性方法事件加起來也就40個上下,基本上很簡單,試試就能瞭解了.

3.2 Shape

Silverlight XAML 支援一些可以編入複雜物件的圖案。支援的基本圖案包括矩形 (Rectangle)、橢圓形 (Ellipse)、直線 (Line)、多邊形 (Polygon)、多線段 (PolyLine) 及路徑 (Path)。這些圖案名稱都簡單易懂。多線段 (PolyLine) 可讓您定義一串的接連線段。路徑 (Path) 可讓您定義在畫布上的非直線形路徑 (類似塗鴉)。

4.2.1 Line

Line 是用來畫線段的用x1,y1,x2,y2 來定位線段的起始點，結束點，及線段的長度(x1,y1) , (x2,y2)。

屬性名	說明
x1,y1	設起始點(x,y) 的位置
x2,y2	設結束點(x,y) 的位置
Stroke	設定畫線段的顏色值
StrokeTyickness	設定畫線段的寬度

示例 Demo

4.2.2Ellipse

Ellipse 用於畫圓或橢圓，畫圓或畫橢圓是通過設定 Width ,Height 的值來確定。當這兩值相等時是畫圓，否則是橢圓。

屬性名	說明
Width	設width值
Height	設 Height值
Stroke	設定畫線段的顏色值
StrokeTyickness	設定畫線段的寬度
Fill	設定填充顏色

示例 Demo

4.2.3Recltangle

Recltangle 用於畫矩形。

屬性名	說明
Width	設width值
Height	設 Height值
Stroke	設定畫矩形邊框的顏色值
StrokeTyickness	設定畫矩形邊框的寬度
Fill	設定矩形填充顏色值
RadiusX	設定邊角的圓滑度值
RadiusY	設定邊角的圓滑度值

示例 Demo

4.2.4Polygon

Polygon 用畫多邊形，如三角形，矩形，平行四邊形等等多邊形。 Points 是它重要的屬性。它是用來設定多邊形各個點的(x,y)一組值，每組值之間用空格間隔，它是近逆時針順序來設定。如畫一個三個形ABC，三點的(x,y)值分別為 A(100,100) ,B(50,200),C(150 ,200)。

其設定值為：Points="100,100 50,200 150,200" 。

<PolygonCanvas.Left="0" Points="10,10 10,110 110,110 110,10,50,30" Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>

<PolygonCanvas.Left="0" Points="100,100 66.7,125 66.7,175 100,200 133.3,175 133.3,125" Stroke="Black" StrokeThickness="2" Fill="LightBlue"/>

示例 Demo

4.2.5 Polyline

示例 Demo

4.2.6 Path

<PathData="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" Stroke="Black" Fill="SlateBlue" Canvas.Left="10" Canvas.Top="10" />

<PathData="M 10,100 C 10,300 300,-200 250,100z" Stroke="Red" Fill="Orange" Canvas.Left="10" Canvas.Top="10" />

<PathData="M 0,200 L100,200 50,50z" Stroke="Black" Fill="Gray" Canvas.Left="150" Canvas.Top="70" />

示例 Demo

4.3Brushes

筆刷 (Brushes) 會決定在螢幕上的物件的塗繪方式。物件的內容是使用填滿 (Fill) 來塗繪，外框則是使用筆劃 (Stroke)。您可使用單色筆刷、漸層色筆刷及圖樣筆刷。單色筆刷的實作是使用 fill 屬性 (Attribute) 上的固定色彩 (例如上述範例使用的 Fill="Black") 或使用 SolidColorBrush 當做附加屬性 (Property)，色彩可以根據名稱 (支援 141 種具名色彩) 或根據十六進位的 RGB 定義來指定

<EllipseHeight="90" Width="90" Canvas.Left="10" Canvas.Top="10"

Fill="black"/>

<EllipseHeight="90" Width="90" Canvas.Left="110" Canvas.Top="10"

Fill="#000000"/>

<EllipseHeight="90" Width="90" Canvas.Left="10" Canvas.Top="110"

Fill="#ff000000"/>

<EllipseHeight="90" Width="90" Canvas.Left="110" Canvas.Top="110">

<Ellipse.Fill>

示例 Demo

4.3.1SolidColorBrush

示例 Demo

4.3.2LinearGradientBrush

<RectangleWidth="140" Height="70" Canvas.Left="10" Canvas.Top="10">

<Rectangle.Fill>

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<RectangleWidth="140" Height="70" Canvas.Left="155" Canvas.Top="10">

<Rectangle.Fill>

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<EllipseWidth="100" Height="100" Canvas.Left="350" Canvas.Top="-10">

<Ellipse.Fill>

<GradientStopColor="red" Offset="0.0"/>

<GradientStopColor="Green" Offset="0.5"/>

<GradientStopColor="Blue" Offset="0.0"/>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

<EllipseWidth="100" Height="100" Canvas.Left="480" Canvas.Top="-10">

<Ellipse.Fill>

<LinearGradientBrushStartPoint="0.5,0" EndPoint="0.8,0">

<GradientStopColor="red" Offset="0.0"/>

<GradientStopColor="Green" Offset="0.5"/>

<GradientStopColor="Blue" Offset="0.0"/>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

示例 Demo

4.3.3RadialGradientBrush

<RectangleWidth="140" Height="70" Canvas.Left="10" Canvas.Top="120">

<Rectangle.Fill>

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

<RectangleWidth="140" Height="70" Canvas.Left="155" Canvas.Top="120">

<Rectangle.Fill>

<RadialGradientBrushGradientOrigin="1,0">

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

<RectangleWidth="140" Height="70" Canvas.Left="350" Canvas.Top="120" StrokeThickness="10">

<Rectangle.Stroke>

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</LinearGradientBrush>

</Rectangle.Stroke>

<Rectangle.Fill>

<RadialGradientBrushGradientOrigin="1,0">

<GradientStopColor="Yellow" Offset="0.0" />

<GradientStopColor="Red" Offset="0.25" />

<GradientStopColor="Blue" Offset="0.75" />

<GradientStopColor="LimeGreen" Offset="1.0" />

</RadialGradientBrush>

</Rectangle.Fill>

</Rectangle>

示例 Demo

4.3.4 ImageBrush

<RectangleHeight="180" Width="90" Canvas.Left="10" Canvas.Top="10" Stroke="Black" StrokeThickness="1">

<Rectangle.Fill>

<ImageBrushImageSource="Images/01.jpg"/>

</Rectangle.Fill>

</Rectangle>

<RectangleHeight="180" Width="90" Canvas.Left="110" Canvas.Top="10" Stroke="Black" StrokeThickness="1">

<Rectangle.Fill>

<ImageBrushImageSource="Images/01.jpg" Stretch="Uniform"/>

</Rectangle.Fill>

</Rectangle>

示例 Demo

4.3.5 VisualBrush

<MediaElementCanvas.Left="10" Canvas.Top="10" x:Name="media" Source="SampleVideo.wmv" Width="320" Height="180" />

<RectangleWidth="320" Height="180" Canvas.Left="10" Canvas.Top="126">

<Rectangle.Fill>

<VideoBrushSourceName="media" ></VideoBrush>

</Rectangle.Fill>

<Rectangle.OpacityMask>

<LinearGradientBrushStartPoint="0.5,0" EndPoint="0.5,1">

<GradientStopColor="#AA000000" Offset="1" />

<GradientStopColor="#00000000" Offset="0" />

</LinearGradientBrush>

</Rectangle.OpacityMask>

<Rectangle.RenderTransform>

<ScaleTransformScaleY="-1" />

<TranslateTransformY="242" />

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

示例 Demo

4.4 Image

支援兩種圖片格式

*.jpg（Joint Photographics Experts Group ,JPEG）

*.png（Portable Network Graphics）

示例 Demo

圖片輪播示例Demo

4.5 TextBlock

使用 TextBlock 標記便可以 XAML 呈現文字。這可讓您控制文字的各個面向，例如內容、字型、大小及換行…等等。

TextBlock：為一段文字區塊。

Glyphs：文字雕刻。

Run：在TextBlock中的個別獨立執行的文字。

Brush：Brush為各種筆刷。

在Web開發中，經常設計精美的頁面在用戶端顯示卻大打折扣，其中的一個原因就是用戶端的機器沒有我們所使用的字體。這樣的情況不會在Silverlight中出現了，Silverlight中提供了Downloader這個物件可以支援動態的從伺服器上下載資料。這樣我們可以適時地從伺服器上下載需要的字體。它不但能下載單個的字體，也能下載包含在壓縮包中的一組字體。下面就的代碼演示了如何下載字體並將字體應用到TextBlock物件上。

1 找到C:"WINDOWS"Fonts"simhei.ttf,把此文件copy 到專案的目錄下

2 通過對象下載字體simhei.ttf

_downloader = newDownloader();

_downloader.Completed += newEventHandler(_downloader_Completed);

_downloader.Open("GET", newUri(HtmlPage.DocumentUri, "simhei.ttf"));

_downloader.Send();

void _downloader_Completed(object sender, EventArgs e)

{

userName.SetFontSource(_downloader);

// 指定要使用的字體名稱

userName.FontFamily = "Simhei";

}

Xaml 文件：

<Canvasx:Name="parentCanvas"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Loaded="Page_Loaded"

x:Class="SilverlightSurface.MyControl;assembly=ClientBin/SilverlightSurface.dll"

Width="640"

Height="480"

Background="White"

<TextBlockx:Name="userName" Canvas.Left="50" Canvas.Top="100" Text="你好, 你好嗎？"></TextBlock>

</Canvas>

4.6MediaElement

支援的影音格式

Audio聲音：MP3、WMA（Windows Media Audio）。

Video影片：WMV（Windows Media Video 9）。

主要屬性及方法

3.6.1暫停鈕
MediaElement.Pause();

3.6.2播放鈕
MediaElement.Play();

3.6.3停止

MediaElement.Stop();

3.6.4重設影片
MediaElement.Source=VideoURL;

3.6.5設定進度
MediaElement.Position='00:00:30';

3.6.6設定音量

MediaElement.Volume

3.6.7影片播放時間

MediaElement. NaturalDuration.TimeSpan.TotalSeconds (秒)

MediaElement. NaturalDuration.TimeSpan.TotalMinutes（分）

AutoPlay：當設置為true時，媒體將自動播放。默認為true。

IsMuted：當設置為true時，媒體將靜音。默認為false。

Stretch：明確媒體怎樣填充MediaElement對象。默認為Fill，其餘的有None, Uniform, UniformToFill。

Volume：設置音量的大小。從0到1。最響是1，默認為0.5。

Xaml文件:

<MediaElement Source="numbers.wmv" Name="myMediaElement"

Width="450" Height="250" LoadedBehavior="Manual" UnloadedBehavior="Stop" Stretch="Fill"

MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded"/>

< Canvas HorizontalAlignment="Center" Width="450" Orientation="Horizontal">

<TextBlock Foreground="White" VerticalAlignment="Center" Margin="5" >Volume</TextBlock>

<Slider Name="volumeSlider" VerticalAlignment="Center" ValueChanged="ChangeMediaVolume"

Minimum="0" Maximum="1" Value="0.5" Width="70"/>

</ Canvas >

Xaml.cs代碼:

void OnMouseDownPlayMedia(object sender, MouseButtonEventArgs args)

{

myMediaElement.Play();//播放載入好的視頻檔.

InitializePropertyValues();

}

void OnMouseDownPauseMedia(object sender, MouseButtonEventArgs args)

{

myMediaElement.Pause();//暫停播放

}

// Stop the media.

void OnMouseDownStopMedia(object sender, MouseButtonEventArgs args)

{

myMediaElement.Stop();//停止播放,再次播放會從頭開始

}

private void ChangeMediaVolume(object sender, RoutedPropertyChangedEventArgs<double> args)

{

myMediaElement.Volume = (double)volumeSlider.Value;//更改音量

}

private void ChangeMediaSpeedRatio(object sender, RoutedPropertyChangedEventArgs<double> args)

{

myMediaElement.SpeedRatio = (double)speedRatioSlider.Value;//更改播放速度

}

//播放開始調用的事件

private void Element_MediaOpened(object sender, EventArgs e)

{

//設置播放進度條的最大值

timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;

}

//播放結束調用事件

private void Element_MediaEnded(object sender, EventArgs e)

{

myMediaElement.Stop();

}

//播放進度

private void SeekToMediaPosition(object sender, RoutedPropertyChangedEventArgs<double> args)

{

int SliderValue = (int)timelineSlider.Value;

TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);

myMediaElement.Position = ts;//這裡跳轉到播放的哪個地方

}

//點擊開始時設置播放的音量和播放速度

void InitializePropertyValues()

{

myMediaElement.Volume = (double)volumeSlider.Value;

myMediaElement.SpeedRatio = (double)speedRatioSlider.Value;

}

示例 Demo

4.7 RenderTransform

RenderTransform 屬性讓你可以使用transform物件對一個元素進行旋轉,傾斜,縮放及偏移操作.共有下面幾種不同的transform物件:

RotateTransform：將一個物件旋轉特定的角度。

SkewTransform：將一個物件相對於X軸或Y軸進行傾斜

ScaleTransform：將一個物件在水準或垂直方向進行放大或縮小。

TranslateTransform：將一個物件在水準或垂直方向進行移動。

MatrixTransform 矩陣變換

TransformGroup 多重變換

4.7.1 RotateTransform

屬性名稱	說明
CenterX	縮放x輸中心點
CenterY	縮放y輸中心點
Angle	旋轉角度（正值----順時針）

示例 Demo

4.7.2 SkewTransform

屬性名稱	說明
CenterX	縮放x輸中心點
CenterY	縮放y輸中心點
AngleX	x輸方向旋轉角度
AngleY	y輸方向旋轉角度

示例Demo

示例 Demo

4.7.3 ScaleTransform

水準或垂直方向進行放大或縮小

屬性名稱	說明
CenterX	縮放x輸中心點
CenterY	縮放y輸中心點
ScaleX	x輸方向縮放值
ScaleY	y輸方向縮放值

示例Demo

示例 Demo

4.7.4 TranslateTransform

屬性名稱	說明
X	x輸方向移動值
Y	y輸方向縮放值

示例 Demo

4.7.5 MatrixTransform

參考：http://www.cnblogs.com/zhouyinhui/archive/2007/07/07/809553.html

到此，我們已經瞭解了MatrixTransform的基本原理，下面來看一個對稱效果的具體例子：

屬性名稱	說明
Matrix

示例 Demo

4.7.6 TransformGroup

TransformGroup是一種特殊類型.使用它,可以對一個物件應用多用操作.

示例 Demo

4.8 Storyboard

Storyboard.TargetName 目標名稱

Storyboard.TargetProperty

Duration（Duration="0:0:1"）。指定了動畫效果從它的起始值到結束值的變化所用的時間長度

創建一個EventTrigger

　　EventTrigger會在被它被觸發時執行一個動作。從它的名字可以看出，觸發它的是一個事件，一個由它的RoutedEvent屬性指定的事件。因為您希望這個EventTrigger開始一個動畫，那麼使用一個BeginStoryBoard物件作為它的動作。

　　您也需要決定是由哪個事件來觸發這個動畫。在這裡非常簡單，因為EventTrigger只支持一個事件，Loaded事件，因此我們將RoutedEvent屬性設為Canvas.Loaded（最終我們會使用別的東西來觸發這個動畫）。這樣，當Canvas載入時我們的動畫就會被開啟。下麵是到此為止的標記。

創建一個Storyboard和一個動畫

　　一個Storyboard可以用於描述和控制一個或多個動畫。在這個例子裡，我們只用了一個動畫。在Silverlight中，您通過把動畫應用到物件的屬性上來添加動畫效果。使用一個DoubleAnimation把一個動畫效果運用在Ellipse的Canvas.Left屬性上。您使用了DoubleAnimation因為這個被操作的屬性，Canvas.Left，是一個Double類型（一個雙精度浮點數）的屬性。

　　為了使動畫生效，需要為它指定一個目標名稱（Storyboard.TargetName="ellipse"）、一個目標屬性（Storyboard.TargetProperty="(Canvas.Left)"）、一個變換的值（To="300"）和一個Duration（Duration="0:0:1"）。這個Duration屬性指定了動畫效果從它的起始值到結束值的變化所用的時間長度。0:0:1表示這個Duration為1秒鐘。

Silverlight 動畫類型

1顏色的動畫（ColorAnimation）

2點的動畫效果（PointAnimation）

3 DoubleAnimation

當您對顏色添加動畫效果時，請記住一個顏色和SolidColorBrush的區別。當您為一個形狀的Stroke和Fill屬性指定一個顏色名或者十六進位值時，Silverlight會將其轉換為使用SolidColorBrush的方式。當您要為一個形狀的Stroke或Fill添加動畫時，您需要操作設置該屬性的SolidColorBrush物件的Color。通常，當您要使用一個動畫操作一個包含畫刷的屬性時，最好是使用複雜的語法來聲明那個畫刷，而不是使用一個顏色名或者十六進位值，這樣您就可以為它添加一個名字了。

　　下面的例子為兩個Ellipse添加了動畫效果。第一個Ellipse的屬性使用一個SolidColorBrush顯式設置了Fill屬性。在例子裡為SolidColorBrush提供了一個名字，並操作了它的Color屬性。第二個動畫就有些複雜了，因為第二個Ellipse的Fill屬性被設置為一個顏色名。當這個標記被執行時，系統會創建一個SolidColorBursh，我們只能間接地為屬性添加動畫。

Timeline的屬性

　　Storyboard和DoubleAnimation都是Timeline類型的對象。Timeline有許多有用的屬性：

Storyboard.TargetName：您操作的物件的名稱。如果您不指定一個Storyboard.TargetName的值，Timeline會使用它父Timeline的Storyboard.TargetName。如果您不不指定任何父Timeline的Storyboard.TargetName屬性，Timeline則會找到使用EventTrigger來啟動它的那個物件。

Storyboard.TargetProperty：您操作的屬性。如果您不指定Storyboard.TargetProperty，Timeline會使用它父Timeline的Storyboard.TargetProperty。這個屬性所使用的語法由它操作的屬性類型決定：指定附加屬性時所用的語法："(ownerType.propertyName)"。例如："(Canvas.Top)"指定了Canvas.Top屬性。指定其它類型屬性時所用的語法："proeprtyName"。例如："Opacity"指定了Opacity屬性。

BeginTime：Timeline開始的時間。請注意您在使用的語法，因為在這裡預設的單位是“天”（簡單地將該屬性設為2，則表示BeginTime為2天！）。使用下面的語法來指定小時，分鐘和秒：“小時:分鐘:秒”。例如，“0:0:2”將BeginTime設為2秒（0小時，0分鐘，2秒）。如果您不指定BeginTime，這個屬性的值將預設為0秒。

Duration：Timeline執行一次所需的時間長度。對於一個動畫來說，這表示它從起始值進行到結束值所用的時間長度。Duration屬性使用與BeginTime相同的語法。再強調一下，請注意不要在您想表示“秒”的時候卻設成了“小時”！Duration能夠被設為兩個特殊的值：“Forever”和“Automatic”。該屬性的預設值為“Automatic”。如果您想瞭解有關這兩個特殊值的詳細資訊，請參考Silverlight SDK中的Duration相關章節。

FillBehavior：指定了Timeline會停止之後會做什麼。這個屬性可以使用兩個值：Stop或HoldEnd。“Stop”會再Timeline結束時將被操作的屬性設為它的起始值；“HoldEnd”說明被操作的屬性將再結束時保持最後的值不變。該屬性預設值為“HoldEnd”。

RepeatBehavior：說明Timeline在重複的次數。這個屬性能夠被設為三種類型的值：重複次數，一個時間段，以及一個特殊值“Forever”。 “Forever”使Timeline不斷地重複。一個時間段表示Timeline運行的時間長度。例如，將一個Duration為2.5秒的動畫的

RepeatBehavior設為“0:0:5”會使動畫重複兩次。重複次數指定了Timeline運行的數。您使用下面的語法來指定重複次數：重複次數x。例如，“4x”表示Timeline重複四次。

該屬性預設值為“1x”，表示時間線只會執行一次。

　　DoubleAnimation，ColorAnimation和PointAnimation都有From和To兩個屬性，用於指定被操作屬性的起始值和結束值。如果沒有制動From屬性的值，起始值則為被操作屬性的當前值。此外您可以使用By屬性來設定偏移量的大小，而不是使用To屬性來設置屬性的結束值。

在同一個物件上添加多個動畫，您可以使用多個動畫操作同一個物件的同一個屬性。如果您想讓讓動畫依次執行，那麼可以將動畫的BeginTime和Duration設為合適的值。下面的示例將兩個動畫應用到了同一個屬性上，第二個動畫將在第一個動畫結束以後開始。

<Storyboard

Storyboard.TargetName="e1"

Storyboard.TargetProperty="(Canvas.Left)">

</Storyboard>

示例Demo

4.8 公共屬性

4.8.1 Opacity屬性

　　Opacity屬性能夠讓您控制一個UIElement物件的alpha值或者透明的程度。您可以為Opacity設置一個0到1之間的數，該值越接近0.0，該物件就越接近完全透明，當Opacity屬性為0時，物件就完全不可見了。預設的Opactiy屬性的值為1.0，意味著物件完全不透明。下面的例子創建了兩個不同透明程度的形狀。

<Canvas Width="300" Height="300"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Rectangle Opacity="1.0" Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>

<Rectangle Opacity="0.6" Height="100" Width="100" Canvas.Left="70" Canvas.Top="70"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />

</Canvas>

4.8.2OpacityMask屬性

　　OpacityMask屬性能夠讓您控制一個UIElement不同部分的alpha值。例如，您可以使用OpacityMask使一個元素從右往左淡入或淡出。OpacityMask屬性具有一個Brush物件，這個畫刷將元素和畫刷的每一個圖元的alpha通道進行映射，以確定元素上對應圖元的透明結果。如果畫刷的某一部分是透明的，那麼元素的那一部分會變得透明。

　　您可以為OpacityMask使用不同類型的畫刷，不過LinearGradientBrush，RadialGradientBrush和ImageBrush最為常用。

　　下面的示例將一個應用了LinearGradientBrush的opacity mask作用在一個Rectangle物件上。

<Canvas Width="300" Height="300"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Rectangle Height="100" Width="100" Canvas.Left="30" Canvas.Top="30"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue">

<Rectangle.OpacityMask>

</LinearGradientBrush>

</Rectangle.OpacityMask>

</Rectangle>

</Canvas>

4.8.3Clip屬性

　　Clip屬性能夠使您有選擇則繪製元素的一部分。使用Clip屬性時，您需要提供一個Geometry物件用於描述繪製區域，任何超過繪製區域的部分都會被隱藏，或者說是“被修剪（clipped）”了。

　　下面的示例使用了一個RectangleGeometry作為Ellipse元素的Clip屬性。其結果是：只有Ellipse在RectangleGeometry定義的區域內的部分才被顯示出來，超出RectangleGeometry的部分則被切除了。

<Canvas Width="300" Height="300"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"

Stroke="Black" StrokeThickness="10" Fill="SlateBlue">

<Ellipse.Clip>

</Ellipse.Clip>

</Ellipse>

</Canvas>

4.8.4 RenderTransform屬性

　　RenderTransform屬性讓您可以使用Transform物件對一個元素進行旋轉，傾斜，縮放或移動。下面的清單描述了您可以使用在RenderTransform屬性上的不同的Transform物件

RotateTransform：將一個物件旋轉特定的角度。

SkewTransform：將一個物件相對於X軸或Y軸進行傾斜

ScaleTransform：將一個物件在水準或垂直方向進行放大或縮小。

TranslateTransform：將一個物件在水準或垂直方向進行移動。

　　還有另外一種變換，TransformGroup，您可以使用它將多種變換應用在單個物件上。

　　下面的示例將Transform物件應用在Rectangle元素上，展示了每個Transform物件的不同效果。

<Canvas Width="300" Height="300"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10"

Fill="Black">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10"

Fill="red">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190"

Fill="blue">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130"

Fill="Green">

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

</Canvas>

示例 Demo

posted on 2007-09-28 09:29 brake 阅读(1466) 评论(0) 编辑收藏举报