Blend 2.5 6月份(2008 June)預覽版

Blend 2.5 6月份預覽版 (英文、日文、韓文版)

組件模板編輯支援

WPF和Silverlight撰寫程式模型最強大的一個功能是其完全定制組件的觀感的能力，這允許開發人員和設計師以微妙和戲劇性的方式對組件的UI進行精雕細琢，促成大幅度的靈活性。我曾在這裡的Silverlight組件模板部落格文章裡對這些概念討論過。


這個星期的Expression Blend 2.5六月份預覽版現在對組件模板編輯加了設計器支援，將方便你快速地改變任何組件的外觀，而不必再屈尊去修改XAML源碼。


要看組件模板編輯的實戰範例的話，在Expression Blend設計表面上拖放2個Slider組件：

我們也許會判定預設的Slider組件模板的滑塊對我們的應用來說太大，太寬了。要用組件模板編輯功能來改變它的話，我們可以在設計器上右擊其中一個 slider，選擇「編輯組件部件」上下文選單項。我們可以給我們的Slider選擇建立一個空白的組件模板（從頭做起），也可以編輯內建組件模板的複製（然後對之細調）：

在我們選擇編輯現有的組件模板的複製之後，Blend會提示我們建立並命名一個可重用的樣式資源，我們將在其中定義我們的組件模板。命名完之後，我們可以選擇將樣式儲存在應用級（在App.xaml中）或在目前頁面/使用者組件中：

在點選OK之後，我們會發現轉到了Slider組件的模板編輯模式之下，我們可以改變，細調，新增/去除Slider組件模板中的任何底層元素。注意下面，在模板編輯模式中，我們可以看到和選擇組成Slider組件模板的任何底層元素（這些元素在下面的「Objects」視窗中用紅筆圈了出來）。


想把滑塊做得窄一點的話，我們可以選擇組件模板中的「HorizontalThumb」元素，調整它的寬度（在界面裡或透過屬性網格）：

然後，我們可以使用設計器頂部的breadcrumb導航條回到我們的頁面，看組件模板的變動實施後的效果：

注意，目前只有一個Slider組件使用了剛定義的組件模板的新樣式資源。


要把同樣的樣式資源用到另外一個Silder組件上，我們可以選擇該組件，右擊，然後使用「Apply Resource（應用資源）」上下文選單，把「ScottSlider」樣式用到該組件上：

之後，2個Slider將引用同個樣式：

以後對「ScottSlider」樣式做的任何改變將會自動應用到這2個組件之上。


注意，在Silverlight 2中發佈的所有組件都支援組件模板，在Expression Blend中都支援上面那樣的編輯體驗。

Visual State Manager (VSM-視覺狀態管理器) 之支援

Silverlight 和 WPF中的組件模板支援對組件的「look（外觀）」，以及組件的「feel（感覺）」的定制。「feel」之謂，我指的是改變它交互的響應性。例如，在按下時，得到焦點時，失去焦點時，處於按下的狀態時，處於不可用（disabled）狀態時，內中有東西被選中時。。。，它是如何反應的。經常地，在使用者像這樣與組件做交互時，你要執行動畫效果。

我們在Silverlight 2 Beta2中引進的一個新東西是"Visual State Manager（視覺狀態管理器）" (VSM)，該功能將極大地方便你建造交互性的組件模板。VSM引入了你可在組件模板中利用的2個基本概念："視覺狀態(Visual States)" 和 "狀態遷移（State Transitions）"。例如，像按鈕這樣的組件為自己定義了多個視覺狀態： "Normal（正常）", "MouseOver（滑鼠游標之下）", "Pressed（按下）", "Disabled（不可用）", "Focused（取得焦點）", "Unfocused（不具焦點）"。在Blend中的模板編輯模式下，設計師現在可以輕鬆地編輯按鈕在每個特定狀態下的外觀，以及設定遷移規則來控制從一個狀態遷移到另一個狀態時動畫效果應該執行的時間。然後在執行時，Silverlight會動態地執行合適的動畫故事板來把組件從一個狀態平滑地過渡到另一個狀態。


這個模型很棒的地方是，設計師不用編寫程式碼，不用手工建立動畫故事板，也不用理解組件的對象模型就可以非常有效率。這使得學習建立交互性組件模板的曲線非常容易，意味著現有的美工可以輕鬆地參與Silverlight項目。今年稍後，我們還將往WPF中新增"Visual State Manager（視覺狀態管理器）" (VSM)的支援，讓你在Windows應用中使用同樣的方法，以及在 WPF 和 Silverlight 項目間共享組件模板。


要看這個的實戰範例，讓我們往設計表面上加一個Button組件：

然後，我們可以右擊按鈕組件，編輯它的組件模板。我們將不從現有的預設組件模板開始（就像上面的Slider範例一樣），讓我們建立一個空白的組件模板，從頭做起：

Blend會提示我們給要建立的樣式（Style）資源取一個名字，我們將它取名為「ScottButton」，點選OK。這會把設計器置於按鈕的組件編輯模式下，一開始只有一個空白的組件模板：

上面有一樣需要注意的東西是，在Blend中有一個新的「States（狀態）」視窗，這個視窗會顯示Button組件提供的所有的「Visual States（視覺狀態）」。在上面，目前被選中的是「Base(基底)」狀態，該狀態允許我們定義我們的按鈕組件模板常用的視覺樹。

然後，我們可以往我們的基底狀態中加一些向量元素，來定義象下面這樣的定制按鈕的外觀。我們可以使用由Blend提供的內建向量繪製工具支援來設計這些圖形，或者使用Expression Design 或 Adobe Illustrator來建造向量圖形，然後將其導入Blend中。下面，我們在我們的組件模板中加了4個「Path」元素，一個是帶圓角的背景（其名為 「background」），另一個帶陰影（drop shadow）（其名為「shadow」），還有一個是帶40%蔽光性的「shine」（在頂部加了一些暈光），再有一個定義了預設的內部內容（在這個情形下，是個房子的圖案）：

註：我們也可以導入一個圖片，但使用向量元素會給予我們以後對按鈕進行擴縮/轉換，在任意解析度或尺度上保持清晰觀感的靈活性（特別是在 Silverlight移動設備的場景下，螢幕的解析度大不相同或較小時，尤其有用），還允許我們對美工設計中的任何向量元素可以輕易地做動畫效果或改動。


完成設計上面的基底狀態之後，我們可以按F5在瀏覽器中執行應用：

你可以在上面看到，我們的按鈕組件現在擁有一個比較好看的外觀。儘管它有了一個新的外觀，但按鈕依然像以前那樣觸發同樣的焦點，點選，和懸浮事件，所以，使用按鈕的開發人員在操作使用了我們的新組件模板的按鈕時，不用改動任何程式碼。

但我們的新按鈕組件模板的一個缺點是，它並不是交互的。這意味著，如果按鈕獲得/失去焦點，或者滑鼠游標懸浮其上時，我得不到任何視覺反饋。點選時，我也得不到很好的按下/彈起的動畫效果。

要將交互性加到我們的按鈕上，我們將回到Blend中，再次操作我們按鈕的組件模板。之前我們把向量圖形元素加到了我們按鈕的「Base（基底）」狀態中，這允許我們定義所有視覺狀態的預設視覺外觀。我們現在將回去，進一步定制個別的按鈕視覺狀態。

例如，為實現按鈕的mouse-over行為，我們可以在「States」視窗中選擇「MouseOver」狀態，然後細調按鈕處於該狀態時的外觀。在下面，我選了組件模板中的「shine」向量元素，調整它在屬性網格中的Opacity屬性，使其在MouseOver狀態下可見度更高。注意Blend是如何在對像視窗中，自動使用紅點加亮「shine」元素，然後在該元素的下面列出了Opacity屬性的。這可以便利很快地跟蹤我們在組件模板中在 「Base（基底）」狀態和「MouseOver」狀態間所做的所有變動：

然後，我們可以在「States」視窗中選擇「Pressed」狀態，定制按鈕處於按下狀態時的外觀。我們將改變「Base（基底）」狀態的2樣東西，第一個變動是使得「shine」元素可見（就像MouseOver狀態一樣），第二個變動是稍微偏移按鈕組件的內容，同時保持影子元素不動。這會給予按鈕一個很好看的「depressed（按下)」外觀，與它的基底視覺形成很好的反差：

我們可以這樣來實現偏移變動： 在設計器中選擇background，content和shine元素，然後在屬性瀏覽器中對它們施加一個偏移顯示轉換（offset render transform）：

現在，在瀏覽器中再次執行我們的應用的話，我們會發現我們的按鈕在使用時有交互的視覺反饋了。下面是我們按鈕的「Normal（正常）」外觀：

將滑鼠游標懸浮於按鈕之上，會造成象下面這樣的發光效果：

點選按鈕會導致它按下去，隱藏影子（在鬆開滑鼠游標按鈕時，它會彈回來）：

注意，我們不用編寫任何程式碼或XAML來改變我們按鈕的觀感，新的視覺狀態管理器功能會自動地為我們處理視覺狀態間的過渡。

在預設情形下，在你從一個視覺狀態移動到另一個視覺狀態時，Silverlight會動態地為你構建和執行過渡Storyboard（提供了2個狀態間的平滑過渡動畫效果），你不需編寫任何程式碼就可以讓這一切發生（註：如果你想的話，你還是能降低層次（drop down），加一個定制的Storyboard過渡，但在大多數情形下，你大概可以使用自動的Storyboard過渡）。

Silverlight的自動過渡功能中你可以利用的一個特性是，定制視覺狀態過渡發生所花的時間，你可以這麼做，點選視覺狀態右邊的箭頭，設定一個規則來控制當從一個特定狀態移到另一個狀態時，過渡動畫效果應該執行的時間。

例如，我們可以加如下的規則來表示，我們要它花0.2秒鐘的時間來從"Normal"過渡到"MouseOver"視覺狀態：

然後，我們可以像這樣來設定這個規則，在Normal->MouseOver間過渡時花0.2秒鐘：

然後，我們可以點選"MouseOver"狀態，設定一個規則，導致從MouseOver->Normal的過渡花0.4秒鐘：

現在，當我們重新執行應用時，對MouseOver場景，我們將有一個慢了一點的動畫過渡，給我們的應用新增了一種稍微更加平滑和更為精緻的感覺。我們不用編寫一行程式碼就可以促成這個效果。 隨Silverlight 2發佈的所有組件都有對象上面這樣的組件模板和視覺狀態管理器之定制的內建支援。

想進一步瞭解新的視覺狀態管理器和組件模板編輯功能的話，請看一下 這裡 和 這裡的教學, 以及這裡, 這裡 和 這裡的相關錄像。


本文章來自於神魂顛倒論壇 http://bbs.flash2u.com.tw


原文網址:http://bbs.flash2u.com.tw/dispbbs_225_84661.html