Nibblestutotials.net教程 – Blend & Silverlight2系列之States – Part1

這一部分將教給你Blend 2 SP1中可視化狀態管理的基礎知識。在這篇教程中我們將展示怎樣簡單的建立與觸發狀態。

要完成本聯絡，你需要安裝Expression Blend 2 SP1或以上版本

第一部分： 建立與觸發狀態

本文的代碼可以由此下載

1. 建立一個新的Silverlight2.0項目

1. 開啟Expression Blend 2 SP1或以上版本。
2. 選擇 檔案>建立項目… 開啟建立項目對話方塊（見圖）。
3. 選擇Silverlight 2應用程式這項。

 

1. 向項目中添加一幅映像

將圖片由你下載的項目中匯入到新項目中。如果你還沒有下載項目，請你使用頁面上方的連結下載。

要添加圖片，你可以右擊項目名稱並從操作功能表中選擇添加現有項…。瀏覽並選擇映像。你也可以將圖片由Windows Explorer拖到Blend中。

 

1. 插入並配置圖片

1. 在項目面板檔案下，雙擊此圖片(image01.png)來將圖片插入到畫板。
2. 改變布局屬性到（請參考左側圖片）：

   - Width=620 / Height=420

   - Horizontal Alignment=Center

   - Vertical Alignment=Center

   - Reset Margins或set it to Margin=0,0,0,0

    3) 更改Scale Transform到X=0.5，Y=0.5。

 

1. 建立狀態組

    

要開始建立你的狀態，你首先需要建立一個狀態組。

1. 點擊狀態面板中的添加狀態組。
2. 將其重新命名為MouseInteraction並按Enter。

實際上，給狀態組起什麼名字並不重要。它不改變狀態的功能。

 

1. 建立一般狀態

第一個狀態是一般狀態：

1. 點擊添加狀態建立一個新狀態（參考圖片）。
2. 重新命名新狀態為Normal。

 

1. 建立點擊狀態

現在我們可以建立一個狀態來展開圖片。

1. 重複第5步的說明來建立一個新狀態並將其重新命名為Click。（參見圖片）

 

1. 更改點擊狀態的屬性

現在更改Scale Transform。

1. 在Click狀態仍然被選中的情況下，將Scale Transform更改為X=1, Y=1。

在（左側）元素樹中有一個紅圈表明這幅圖片的屬性有改動。你剛剛建立了兩個狀態，現在你可以點擊Normal/Click來查看它們分別是什麼樣。

但是想讓它們工作，我們還需要添加一小段代碼來觸發這些狀態。

 

1. 給映像添加滑鼠事件

1. 在圖片上點擊。
2. 開啟屬性面板中的事件。
3. 在MouseLeftButtonDown事件中輸入goClick，在MouseLeftButtonUp事件中輸入goNormal。

如果你安有Visual Studio 2008你將在Page.xaml.cs中看到兩個新函數。如果你沒有安裝Visual Studio，你需要將這些函數粘貼到相同的檔案。

 

1. 添加代碼使狀態工作

1. 將下列代碼添加到goClick：

   VisualStateManager.GoToState(this, "Click", true);

2. 將下列代碼添加到goNormal：

   VisualStateManager.GoToState(this, "Normal", true);

這段代碼非常簡單。它只是將名為Click或Normal的狀態設定為true。（參見圖片）

儲存檔案。

 

1. 添加動畫

當你運行程式時，你會看到變化在一瞬間完成，從一個狀態到另一個狀態的變化過程沒有動畫。

要添加動畫，你只需要改變轉換的值。

1. 在預設轉換間隔中輸入0.3作為值（參見圖）

再次運行程式來查看區別。