Blend for Visual Studio 2013

      軟體開發中為了使設計師和程式員“並行”工作並直接參与到程式的開發中來。

1、在網路程式Team Dev中，草圖設計後，設計師們可以使用HTML、CSS、JavaScript直接產生UI，程式員則在這個UI產生的同時實現它背後的功能邏輯。

2、而案頭開發WPF中，微軟創造了一種新的開發語言XAML——可擴充應用程式標記語言。它在案頭開發及富媒體網路程式開發中扮演了HTML+CSS+JavaScript的角色，成為設計師和程式員之間溝通的樞紐。

現在，設計師和程式員們一起工作、共同維護軟體的版本，只是他們使用的工具不同-——設計師們使用Blend（微軟Expression設計工具套件中的一個）來設計UI，程式員則使用Visual Studio開發後台邏輯代碼。

Blend使用起來很像Photoshop等設計工具，因此可以最大限度地發揮出設計師的特長。使用它，設計師不但可以製作出絢麗多彩的靜態UI，還可以讓UI包含動畫。雖然程式員們也能做出這些東西，但從專業性、時間開銷以及技術要求上顯然是划不來的。更重要的是，這些絢麗的UI和動畫都會以XAML的形式直接儲存進項目，無需轉化就可以直接編譯，節省了大量的時間和成本。

3、Blend for Visual Studio 2013

Blend for Visual Studio一直以來都是WPF開發人員的主要工具。長久以來，該軟體一直作為從Visual Studio分離出來的獨立產品來銷售，屬於Expression套件。從Visual Studio 2012開始，Blend for Visual Studio被發布為Visual Studio的附贈應用程式。令人遺憾的是，Blend for Visual Studio的第一次迭代就拋棄了XAML開發人員，完全將重點放在使用HTML/JavaScript開發Windows 8應用程式的人們身上。

這個情況已成定局，而Blend for Visual Studio 2013現在重新為XAML開發人員提供協助。

後面的章節將詳細介紹Blend for Visual Studio 2013的許多功能，下面是該工具的一些主要優點。

以緊湊的布局徹底控制UI。Blend for Visual Studio 2013的能力遠超Visual Studio的XAML功能。雖然我不是UI設計師，但Blend for Visual Studio 2013能夠使我的UI更加漂亮，而且速度比Visual Studio更快（不論是在設計方面還是在Visual Studio的XAML模式方面）。

可以輕鬆地嚮應用程式/頁面添加動畫、漸層效果和樣式。

能夠向頁面（為更新布局）和狀態記錄快速添加狀態。

能夠通過許多布局和形狀因素查看頁面（該功能很像模擬器，但無法運行頁面——WinJS/ HTML開發人員仍舊能夠因此受益）。

此外，Visual Studio和Blend for Visual Studio 2013還會使檔案保持同步。如果你使用這兩個工具同時開啟了一個項目，當你在一個程式中更改（並儲存了）應用/頁面後，另一個程式會提示你重新載入該項目。你應確保儲存了更改，因為在這兩個程式中同時作出更改並且沒有儲存會導致並發問題。

在Blend for Visual Studio中開啟項目

Visual Studio和Blend for Visual Studio可以非常好地協同工作。要在Blend for Visual Studio中開啟項目，可右鍵WPF項目中的.sh檔案，開啟檔案，並選擇“Blend for Visual Studio 2013”選項，開啟。

螢幕會顯示如下畫面

螢幕中會顯示很多視窗，但至少都處於預設布局中（這非常像Visual Studio，你可以根據需要調整布局）。下面詳細介紹這些布局元素。

“項目”、“資產”、“狀態”和“裝置”選項卡

該視窗的左上方有“項目”、“資產”、“狀態”和“裝置”選項卡，下面是這些選項卡的作用。

“項目”選項卡顯示解決方案中的所有檔案（非常像Visual Studio中的方案總管）。其中沒有特別重要的功能。

“資產”選項卡列出了可添加到頁面中的所有資產。可以將之視為增強Visual Studio工具箱。使用該選項卡除了可以向頁面添加控制項和面板外，還可以添加（和更改）樣式、操作和媒體。

使用“狀態”選項卡可以向頁面添加視覺狀態管理器XAML代碼和視覺狀態組。使用該選項卡還可以輕鬆為視覺狀態添加過渡效果。

使用“裝置”選項卡可以更改解決方案、方向和串連邊界（後面幾章將詳細介紹這些內容）。使用該選項卡還可以更改主題（在明暗之間）和最小寬度。

物件與時間軸

“物件與時間軸”面板（左下角）含有文檔大綱，使用該面板可以添加和修改故事板（與視覺狀態管理器一同使用）。

頁面設計器、標記和代碼

工作區的中心地區是設計器和代碼編輯器。與Visual Studio類似，可以使用分割檢視查看所有設計或標記。還可以將代碼檔案載入到中央窗格中。當你獲得類似Intellisense的功能時，無法使用Visual Studio所有的強大功能，如導航和重構。此外，也不能使用已經安裝到Visual Studio中的外掛程式，如Telerik JustCode。

“屬性”、“資源”和“資料”選項卡

工作區的右側是“屬性”、“資源”和“資料”選項卡，下面是它們的作用。

我曾經花了很多時間研究“屬性”選項卡。除了“名稱”“布局”等簡單項目以及Width和Height等屬性外，還含有大量在標記中難以手動設定的屬性。使用“屬性”面板可以設定“畫筆”、“轉換”和“互動”等選項。

“資源”選項卡含有所有應用程式和頁面級資源，其中還有用於編輯和添加資源的選項。

使用“資料”選項卡可以設定頁面的資料環境、建立樣本資料和各種資料資源。使用該選項卡可以協助你在設計時觀察添加資料後的頁面外觀，而無需每次都不得不通過運行應用程式進行觀察。

Blend for Visual Studio是一種功能極為強大的工具，若是詳細介紹它的功能，就會佔用整整一本書的篇幅。我在開發應用程式時會同時開啟Visual Studio和Blend for Visual Studio，並且會根據需要完成的工作在這兩個工具之間切換。去探索Blend for Visual Studio吧，找出最適合自己項目的功能。