前言

???這段時(shí)間的開發(fā)不會(huì)用到Blend，到年底才會(huì)大量用到，本來(lái)打算到時(shí)候在寫B(tài)lend相關(guān)的筆記，不過(guò)看到一些朋友還比較感興趣，所以這里提前整理了一下。

???首先，我希望你記住下面幾點(diǎn)：

Blend并不完全是為Designer設(shè)計(jì)的，玩得最好的一定是Programmer

必須了解Behavior，Blend很多特性基于Behavior



Expression Blend的技術(shù)發(fā)展歷史

2007

??? Blend的第一個(gè)版本就可以進(jìn)行基本的動(dòng)畫設(shè)計(jì)。它通過(guò)提供一個(gè)Object and Timeine面板來(lái)進(jìn)行動(dòng)畫的設(shè)計(jì)，這和Flash有些類似。在程序中，一段動(dòng)畫就是一個(gè)Timeline對(duì)象。

??? 那么TimeLine對(duì)象是怎樣實(shí)現(xiàn)動(dòng)畫效果的呢？

??? 我們首先看一下抽象類TimeLine的定義：

namespace System.Windows.Media.Animation
{
??? public abstract class Timeline : DependencyObject
??? {
??????? public bool AutoReverse { get; set; }
??????? public TimeSpan? BeginTime { get; set; }
??????? public Duration Duration { get; set; }
??????? public FillBehavior FillBehavior { get; set; }
??????? public RepeatBehavior RepeatBehavior { get; set; }
??????? public double SpeedRatio { get; set; }

??????? public event EventHandler Completed;
??? }
}

??? 我們查看MS文檔的描述：時(shí)間線表示時(shí)間段。它提供的屬性可以讓您指定該時(shí)間段的長(zhǎng)度（Duration），開始時(shí)間（BeginTime），重復(fù)次數(shù)（RepeatBehavior），該時(shí)間段內(nèi)時(shí)間進(jìn)度的快慢（SpeedRatio）等等。從TimeLine派生的類可以提供動(dòng)畫功能（例如DoubleAnimation，ColorAnimation等）。

????一些時(shí)間線類：

System..::..Object
??System.Windows..::..DependencyObject
????System.Windows.Media.Animation.Timeline
??????System.Windows.Media.Animation.ColorAnimation
??????System.Windows.Media.Animation.ColorAnimationUsingKeyFrames
??????System.Windows.Media.Animation.DoubleAnimation
??????System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames
??????System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames
??????System.Windows.Media.Animation.PointAnimation
??????System.Windows.Media.Animation.PointAnimationUsingKeyFrames
??????System.Windows.Media.Animation.Storyboard ? 現(xiàn)在我們仿佛有了一點(diǎn)能實(shí)現(xiàn)動(dòng)畫的基礎(chǔ)了，然而光靠TimeLine還是不行的，看具體定義我們知道DoubleAnimation定義了一個(gè)Double屬性的開始值和結(jié)束值，而ColorAnimation定義了一個(gè)Color屬性的其實(shí)顏色和最終顏色，可它們?cè)鯓雍鸵粋€(gè)控件關(guān)聯(lián)，以及怎樣播放呢？TimeLine并沒(méi)有定義這些。 這就要了解神奇的StoryBoard： namespace System.Windows.Media.Animation
{
??? public sealed class Storyboard : Timeline
??? {
??????? public static readonly DependencyProperty TargetNameProperty;
??????? public static readonly DependencyProperty TargetPropertyProperty;

??????? public TimelineCollection Children { get; }

??????? public void Begin();
??????? public void Pause();
??????? public void Resume();

??????? public void Stop();
??? }
}

??? 這里看雖然StoryBoard同樣繼承與TimeLine，但卻比其他兄弟類多了一些屬性：Begin，Pause，Resume，Stop，還有一個(gè)TimeLine的集合屬性，以及兩個(gè)附加屬性TargetName和TargetProperty。

??? 原來(lái)，StoryBoard才是真正和UI線程打交道的類，它的原理大概就是這樣：一個(gè)StoryBoard對(duì)象包含一些TimeLine元素，每個(gè)TimeLine對(duì)象如DoubleAnimation定義動(dòng)畫，并用StoryBoard的兩個(gè)附加屬性來(lái)描述作用于哪個(gè)元素的哪個(gè)屬性，當(dāng)調(diào)用StoryBoard對(duì)象的Begin()方法時(shí)，UI線程會(huì)根據(jù)TimeLine的描述，找到對(duì)應(yīng)元素的屬性，時(shí)間線內(nèi)不斷修改其屬性值，這樣就實(shí)現(xiàn)了動(dòng)畫。

????值得注意的是，StoryBoard本身也是繼承自TimeLine。有人不明白，StoryBoard主要用于實(shí)現(xiàn)動(dòng)畫而不是定義動(dòng)畫，為什么它也要繼承自TimeLine呢？其實(shí)這是一種很好的設(shè)計(jì)模式（后面會(huì)寫一篇架構(gòu)和設(shè)計(jì)模式的文章，標(biāo)題暫定《誰(shuí)是架構(gòu)師？》），從某種程度上我們可以把StoryBoard視為一些特定動(dòng)畫的集合，UI線程將這一些動(dòng)畫一起執(zhí)行，然而我們可以把這個(gè)動(dòng)畫集合也視為一個(gè)特定的動(dòng)畫，所以StoryBoard也繼承自TimeLine，這樣你可以把一個(gè)StoryBoard對(duì)象作為另一個(gè)StoryBoard對(duì)象的子元素。

??? Blend的Objects and TimeLine面板實(shí)現(xiàn)的就是上述功能。在面板上點(diǎn)擊新建就會(huì)在XAML中新增一個(gè)StoryBoard對(duì)象，選擇不同的時(shí)間之后沒(méi)改變一個(gè)元素的某個(gè)屬性，都會(huì)增加對(duì)應(yīng)屬性類型的TimeLine對(duì)象，這就實(shí)現(xiàn)了用Blend對(duì)動(dòng)畫的編輯。

??? 然而一個(gè)控件通常有許多狀態(tài)，在不同的狀態(tài)下會(huì)有不同的動(dòng)畫組，在第一版本中Blend幾乎是無(wú)能為力的，所幸的是微軟的Silverlight以及Blend的技術(shù)發(fā)展非常快！

?

2008

??? 如前面描述，一個(gè)控件有非常復(fù)雜的狀態(tài)，如果全靠這樣一個(gè)一個(gè)修改屬性值，軟件開發(fā)將會(huì)變得非常痛苦而低效。在Blend SP1中，Blend Team革命性的提出了VSM（Visual State Manager）試圖狀態(tài)管理器，一個(gè)控件可以有很多狀態(tài)，一個(gè)狀態(tài)到另一個(gè)狀態(tài)有很多屬性值需要發(fā)生改變，這樣就需要啟動(dòng)一個(gè)StoryBoard過(guò)渡不同的狀態(tài)。而VSM則管理不同的狀態(tài)，所以他們有以下關(guān)系：

?

??? 給自己的控件添加狀態(tài)非常簡(jiǎn)單，在Blend中有一個(gè)State面板：

???

??? 狀態(tài)分為狀態(tài)組VisualStateGroup以及狀態(tài)VisualState，一個(gè)VisualStateGroup包含多個(gè)VisualState，其理解的很好的一個(gè)例子是看Button控件：

??? CommonStates(VisualStateGroup)

??????? Normal

??????? MouseOver

??????? Pressed

??????? Disabled

??? FocusStates(VisualStateGroup)

??????? Unfocused

??????? Fouces

??? 狀態(tài)統(tǒng)一由VisualStateManager管理，VisualManager類有一個(gè)附加屬性VisualStateManager.VisualStateGroups，我們看Button默認(rèn)模板的定義：

??? <ControlTemplate TargetType="Button">
??????<Grid>
??????<VisualStateManager.VisualStateGroups>
??????<VisualStateGroup x:Name="CommonStates">

????????? <VisualStateGroup.Transitions>
??? ????????? <VisualTransition To="MouseOver"? GeneratedDuration="0:0:0.5"/>
??????? ?</VisualStateGroup.Transitions>
?????????<VisualState x:Name="Normal"/>
?????????<VisualState x:Name="MouseOver">
????????????<Storyboard>
?????????????? <DoubleAnimation Duration="0" To="1"

????????????????????????????????????????? Storyboard.TargetProperty="Opacity"

??????????????????????????????????????????Storyboard.TargetName="BackgroundAnimation"/>
???????????????<ColorAnimation Duration="0" To="#F2FFFFFF"

??????????????????????????????????????? Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"?????????

??????????????????????????????????????? Storyboard.TargetName="BackgroundGradient"/>
?????????????? <ColorAnimation Duration="0" To="#CCFFFFFF"

??????????????????????????????????????? Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"

??????????????????????????????????????? Storyboard.TargetName="BackgroundGradient"/>
?????????????? <ColorAnimation Duration="0" To="#7FFFFFFF"

??????????????????????????????????????? Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"

??????????????????????????????????????? Storyboard.TargetName="BackgroundGradient"/>
????????????</Storyboard>
??????????</VisualState>

???? .......

??? 其中VisualStateGroup還包含一個(gè)Transitions屬性，Transitions是VisualTransition的集合，VisualTransition表示控件從一個(gè)狀態(tài)過(guò)渡到另一個(gè)狀態(tài)時(shí)發(fā)生的可視行為，其包含一個(gè)StoryBoard對(duì)象，當(dāng)控件在VisualStateGroup中定義的各種狀態(tài)之間過(guò)渡時(shí)將應(yīng)用Transitions中的VisualTransition對(duì)象。

??? 通過(guò)上面的分析我們不難分析出VSM的整個(gè)邏輯：

??? 附加屬性VisualStateManager.VisualStateGroups可以被放置于任何控件；可以通過(guò)VisualStateGroup來(lái)設(shè)置控件的狀態(tài)組，每個(gè)狀態(tài)組之間的過(guò)渡可視行為通過(guò)設(shè)置VisualStateGroup.Transitions來(lái)實(shí)現(xiàn)，Transitions實(shí)際上就是一些StoryBoard的集合，可以在定義各個(gè)子控件的屬性改變；每個(gè)VisualStateGroup包含一些VisualState，VisualState包含StoryBoard屬性，當(dāng)過(guò)渡到這個(gè)VisualState時(shí)會(huì)觸發(fā)這段動(dòng)畫。

??? 狀態(tài)之間的過(guò)渡控制我們可以通過(guò)VisualStateManager.GotoState()方法來(lái)控制。s

??? 所以，VSM能讓你實(shí)現(xiàn)很復(fù)雜的動(dòng)畫處理，可以說(shuō)有了VSM之后，Blend才開始變得強(qiáng)大。

?

2009

??? Blend的強(qiáng)大，得益于兩個(gè)東西：第一是VSM，第二是Behavior。

??? 2009年，Blend進(jìn)行了4個(gè)方面的增強(qiáng)：

????? EasingFunction

????? GoToStateBehavior

??????FluidMoveBehavior

????? FluidLayout

??? EasingFunction（緩動(dòng)函數(shù)）是個(gè)很重要的增強(qiáng)。以前的StoryBoard在運(yùn)行時(shí)，只能根據(jù)屬性的初始值和結(jié)束值進(jìn)行線性改變，這樣的動(dòng)畫有時(shí)候不夠生動(dòng)，比如我們可能希望在前半段時(shí)間內(nèi)改變快一點(diǎn)，或者在某個(gè)時(shí)間段回退一下，這些都可以通過(guò)EasingFunction來(lái)實(shí)現(xiàn)。它本質(zhì)上根據(jù)一個(gè)二次方程決定屬性值的漸變，這使得我們的動(dòng)畫生動(dòng)得多。

??? 每一個(gè)TimeLine的實(shí)現(xiàn)類幾乎都定義了EasingFunction屬性，微軟也提供了一些基本的EasingFunction，如：

• BackEase：在某一動(dòng)畫開始沿指示的路徑進(jìn)行動(dòng)畫處理前稍稍收回該動(dòng)畫的移動(dòng)。

• BounceEase：創(chuàng)建彈回效果。

• CircleEase：創(chuàng)建使用循環(huán)函數(shù)加速和/或減速的動(dòng)畫。

• CubicEase：創(chuàng)建使用公式 f(t) = t³ 加速和/或減速的動(dòng)畫。

• ElasticEase：創(chuàng)建表示彈簧在停止前來(lái)回振蕩的動(dòng)畫。

• ExponentialEase：創(chuàng)建使用指數(shù)公式加速和/或減速的動(dòng)畫。

• PowerEase：創(chuàng)建使用公式 f(t) = t^p（其中，p 等于 Power 屬性）加速和/或減速的動(dòng)畫。

• QuadraticEase：創(chuàng)建使用公式 f(t) = t² 加速和/或減速的動(dòng)畫。

• QuarticEase：創(chuàng)建使用公式 f(t) = t⁴ 加速和/或減速的動(dòng)畫。

• QuinticEase：創(chuàng)建使用公式 f(t) = t⁵ 加速和/或減速的動(dòng)畫。

• SineEase：創(chuàng)建使用正弦公式加速和/或減速的動(dòng)畫。

??? 我們看一個(gè)例子：

?????<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>
????在Blend中設(shè)置EasingFunction的圖示：

???

?

??? GotoStateBehavior是一個(gè)Behavior，它用于控制我們前面VSM描述的狀態(tài)的轉(zhuǎn)換，在Asset面板的Behaviors中，即可以看到GotoStateBehavior控件，可以將其選擇拖動(dòng)到任何一個(gè)控件，即可利用Blend實(shí)現(xiàn)狀態(tài)轉(zhuǎn)換的邏輯。在Properties面板進(jìn)行設(shè)置，設(shè)置觸發(fā)事件，要轉(zhuǎn)換的狀態(tài)等：

???

??? 如我們拖動(dòng)到Button控件上，會(huì)產(chǎn)生如下代碼：

??? <Button x:Name="button" Content="Button">
??????? ?<i:Interaction.Triggers>
??????? ??? <i:EventTrigger EventName="Click">
??????? ?????? <ei:GoToStateAction StateName="VisualState"/>
???????????</i:EventTrigger>
??????? </i:Interaction.Triggers>
????</Button>???

??? GoToStateAction本身是繼承自IAttachedObject，這和我們前面講的Behavior的原理是一樣，這也是Blend利用Behavior的一個(gè)例子。

?

??? FluidMoveBehavior：

??? StoryBoard能夠做到屬性值改變過(guò)程的過(guò)渡。然而還有一種場(chǎng)景，那就是Silverlight中控件可以隨著界面大小的調(diào)整而重新布局，這是通過(guò)控件的MeasureOverride和ArrangeOverride方法來(lái)實(shí)現(xiàn)。一般情況下，到界面重新布局時(shí)，控件瞬間被安排到新的位置，然而有時(shí)候我們希望看到這個(gè)重新排列的過(guò)程。

??? 我們可以自己寫邏輯實(shí)現(xiàn)這一功能，但是非常復(fù)雜。Behavior的用途是什么，就是重用，所以Blend小組開發(fā)了這個(gè)Behavior。

??? FluidMoveBehavior也位于Asset面板中的Behaviors部分，拖動(dòng)FluidMoveBehavior到一個(gè)WPF WarpPanel控件，配置的屬性即可：

???
??? 可以設(shè)置AppliesTo屬性為Children，這一當(dāng)Grid的尺寸大小發(fā)生改變時(shí)，可以看到起內(nèi)部元素重新排列的過(guò)程，你還可以設(shè)置緩動(dòng)函數(shù)來(lái)設(shè)置這段動(dòng)畫的變化效果。如下圖：

???

?

??? 最后要介紹的是FluidLayout，它通常用于在兩種狀態(tài)之間過(guò)渡的時(shí)候，控件屬性的更改沒(méi)有應(yīng)用動(dòng)畫效果，而又希望平滑過(guò)渡的效果。例如，當(dāng)控件從一種狀態(tài)變?yōu)榱硪环N狀態(tài)時(shí)，Grid.Row有1變?yōu)?，并且Grid.Rowspan由1變?yōu)?，這一只要開啟FluidLayout就能看到變換過(guò)程。你可以在States面板中設(shè)置FluidLayout：

???

??? 很簡(jiǎn)單，只要點(diǎn)擊"Turn on FluidLayout"就能開啟狀態(tài)之間的過(guò)渡效果，當(dāng)然同樣可以設(shè)置緩動(dòng)函數(shù)EasingFunction。

?

2010

??? .......

?

暫停

??? 2010 Blend 4發(fā)布，這自然包含一些新特性，由于時(shí)間及篇幅關(guān)系，我打算到下一篇續(xù)寫B(tài)lend 4的一些功能。

??? Blend 4基本上沒(méi)有新增知識(shí)點(diǎn)，主要都是圍繞Behavior提供的一些很酷的功能。

??? 所以，對(duì)于Blend，只要掌握了VSM和Behavior，我想其他的都不是問(wèn)題了。

??? 預(yù)告后面的內(nèi)容是，一個(gè)Blend Team據(jù)說(shuō)花了4年時(shí)間研究的功能FluidMoveTagSetBehavior，這是一個(gè)很有意思的特性。相信你和我一樣會(huì)非常感興趣，還有PathListBox，它能實(shí)現(xiàn)更酷的效果，當(dāng)然還有其他東東，到時(shí)候再揭曉了。

????

??? Blend并不難，而且我們看到它并不是為Designer設(shè)計(jì)的，它的許多概念都需要Programer的思維。所以其實(shí)我們是很容易去學(xué)習(xí)和利用的。多摸幾次就熟悉了。

??? 這里主要是講理論的，后面可能會(huì)再寫一篇操作的，看時(shí)間了，相信有了理論之后，再看一面操作，就可以了。

??? 這里打一個(gè)廣告，筆者現(xiàn)在辭職全職創(chuàng)業(yè)，手頭有一個(gè)計(jì)劃是和Silverlight以及Windows Azure有關(guān)的，我的QQ群（6183299）會(huì)大力分享這些方面的技術(shù)，包括ASP.NET，Silverlight，Windows Azure，WCF，Expression Blend，WCF RIA Service等等新技術(shù)，因?yàn)檫@些都是我們會(huì)用到的技術(shù)，希望在交流學(xué)習(xí)中能找到志同道合者一起創(chuàng)業(yè)。歡迎加入...

?

源代碼下載：

???? 這篇是在Blend 4發(fā)布的時(shí)候?qū)懙囊黄坛痰幕A(chǔ)上改寫的

?????原教程下載：http://files.cnblogs.com/hielvis/Behavior2.rar

???? 源代碼：???? http://files.cnblogs.com/hielvis/SLBlendDemo.rar

?????你需要安裝VS2010，Silverlight 4 Toolkit

轉(zhuǎn)載于:https://blog.51cto.com/elviscode/408993

總結(jié)

以上是生活随笔為你收集整理的Hello,Expression Blend 4 (含Demo教程和源码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。