WPF学习笔记(03) - 华丽的HelloWorld
上次的HelloWorld根本不能發揮WPF的威力，這次我們來做一個真正體驗WPF魅力的程序。不過我們要請來一款重量級的設計工具——Microsoft Expression Blend 2。
Blend用于設計人員進行專業和復雜的界面設計工作，可以與Visual Studio相輔相成，替代Visual Studio的界面編輯器，至于程序功能設計方面依然由Visual Studio擔此重任。
?
1、打開工程文件
使用上次的工程文件，對上次的HelloWorld進行界面改良。打開Expression Blend 2，在項目一頁中選擇項目，再選擇打開項目，打開上次的解決方案文件。或者在文件菜單中選擇打開項目/解決方案。
?
不錯，我們上次設計的窗口已經顯示出來了。需要留意的是左面“對象和時間線”窗格，這里列出了控件元素樹（體驗了UI元素的包含關系），我們可以在里面選擇我們要修改的控件。右面是屬性區，不要怕太復雜，其實和VS里面的屬性表是基本相同的，不過提供了很多方便修改效果的工具（比如類似PS的顏色盤）。還有看到設計區滾動條旁邊的設計/XAML按鈕嗎？這里可以在界面和代碼之間進行切換。
?
?
2、修改Hello World文字效果
大家一定注意到Hello World的TextBlock不見了，原因是我們設計了默認隱藏，我們要先把它顯示出來，再添加效果。首先，在“對象和時間線”窗格選擇textBlock1，然后在右面的“屬性”窗格中尋找Visibility屬性，然后改為Visible。如下圖所示：
???????
大家一定注意到我們修改一項屬性后，旁邊會有一個小白色方塊出現，這表示這項屬性在XAML代碼中出現了。如果我們需要把該屬性改為默認的話，只需要按這個小方塊，然后選擇“重置”就OK了。
好了，現在我們要為文字添加效果了，來個發光文字怎么樣？首先，我們在屬性窗格，點擊外觀的框下面的下拉箭頭，然后在BitmapEffect一欄里，點擊“新建”按鈕旁的下拉箭頭，選擇外發光，在滑出的設置框中隨便設置顏色和參數吧，看看效果如何，還不錯嘛。
???????
?
3、修改窗口背景
白白的背景不怎么好看，現在來改一改背景，但不要單調的，幸好WPF的著色支持復雜的漸變效果，這下我們可以搞些顏色豐富生動的界面了。
首先點擊空白處，選擇整個Windows對象，然后再屬性窗格，選擇Blackground屬性，下面我們將選擇漸變畫筆（畫筆是一種著色模式）。你可以像使用PS一樣定制下方的漸變條，增刪滑塊和修改顏色。
???????
?
4、修改按鈕的模樣
其實這個按鈕還是系統按鈕的老樣子，能不能想一些播放器和游戲之類的軟件有自己模樣的按鈕呢？在WPF不單可以，而且實現并不復雜，不過需要一定的XAML代碼構成的知識，并且對WPF的可視化元素有一定的了解，不過時間還多著呢，可以慢慢學習嘛，我們先來給這個Button修改一段代碼，讓大家體會一下效果吧。
切換到XAML代碼編輯器，大家參照下面的代碼修改你的界面（下面列出了Grid元素下的代碼）：
<Grid><Grid.Resources><ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"><Border x:Name="Border" Background="White" CornerRadius="4"><ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="Border" Property="Background" Value="Gold" /></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="Border" Property="Background" Value="Orange" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Grid.Resources><TextBlock Margin="103,64,107,0" Name="textBlock1" Text="Hello, World!!" FontSize="24" TextDecorations="None" VerticalAlignment="Top" Visibility="Visible" ><TextBlock.BitmapEffect><OuterGlowBitmapEffect GlowColor="#FF73F2FF" GlowSize="12" Opacity="0.795"/></TextBlock.BitmapEffect></TextBlock><Button Height="37" Margin="103,0,118,47" Name="button1" VerticalAlignment="Bottom" Click="button1_Click" Template="{StaticResource ButtonTemplate}" FontSize="18" FontWeight="Bold">Say Hello</Button></Grid>切換回設計界面，怎么樣，雖然這個按鈕比較簡單，不怎么好看，但至少改變了那個老模樣了，花點心思還是可以做出漂亮的按鈕的。
?
5、添加動畫效果
這個效果就震撼了，WPF有Storyboard功能，幫助大家構建復雜的動畫效果，以前編程序，搞個動畫效果像登天般困難，現在可以像做Flash動畫那樣做了。不會Flash？不用怕，一下子就可以上手了。
我們需要做到的是，在點擊按鈕后，出現HelloWorld，為了讓這個過程更加動態和柔和，我們建立像PowerPoint的文字漸現上升效果。首先點擊目標button1，因為這個是動畫觸發器。在左上角的“觸發器”框中點擊“+事件”。選擇在引發button1 Click時，然后點擊右面的“+”號添加新的操作。這是Blend會詢問你是否需要新建故事板(storyboard)。故事板是所有UI元素活動的時間線，可以看作“一場動畫”。確定后元素樹的時間線出現了，如下圖所示。
?????
我們現在開始建立動畫。建立動畫的基本要領就是確定關鍵幀，然后在關鍵幀上設置對象的外觀屬性，關鍵幀與關鍵幀之間的過程是屬性值漸變的過程。對于設計者而言，設計后關鍵幀就行了，中間的過程變化將會由程序自動生成。如果你有Flash動畫制作經驗的話，這個簡直小菜一碟。
如下圖所示，我們點擊時間旁邊的 再開始的時候添加一個關鍵幀。然后把HelloWorld往下移動一點，然后把外觀屬性框中的Opacity（透明度）屬性調到0%。
?????????
接著拖動時間線里面黃色拉桿上的三角形，在1秒的位置新建一個關鍵幀，然后點擊這個關鍵幀的橢圓小標記。拖動HelloWorld上移一點（雖然看不見，但仍可以拖動，會出現藍色邊框作為標記），然后把外觀屬性框中的Opacity（透明度）屬性調到100%。????
?
??????????
動畫建立完畢了，可以點擊時間線上的播放按鈕預覽動畫。最后點擊+號旁邊的 關閉時間線。
?
6、運行
?
?
?
最后我們還需要把textBlock的Visibility屬性，然后改為Hidden。這樣就完成了。
激動人心的時刻終于來臨了，快點按F5，進行調試運行。怎么樣，這個HelloWorld夠華麗的嘛！
?
7、一點說明
有沒有試過在使用Blend時，切換會Visual Studio，它會馬上詢問你是否更新代碼或者界面。對，兩個工具是可以互相更新的，確保同時修改一個項目時不會出現混亂。
源文件可以在這里下載：Masson_WPF_02HelloWorld_v2_source.rar
轉載于:https://www.cnblogs.com/masson/archive/2009/09/17/1568346.html
總結
以上是生活随笔為你收集整理的WPF学习笔记(03) - 华丽的HelloWorld的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 找工作的真相
- 下一篇： 三维图----2（房子）