Windows app
摺疊目錄
展開目錄

使用 Blend for Visual Studio 2013 設計 Windows 市集應用程式

Blend for Visual Studio 是隨附於 Visual Studio 2013 的設計工具集合,可用來針對使用 JavaScript、VB、C# 或 C++ 建置的 Windows 市集應用程式進行視覺化設計。

當您安裝 Visual Studio 時,就會一併安裝 Blend。若要尋找 Blend,請在 [搜尋] 方塊中輸入 Blend

此外,您也可以在 Visual Studio 中以 Blend 開啟專案。在 Visual Studio 中開啟專案,然後執行下列任一步驟:

  • 按一下 [檢視] 功能表上的 [在 Blend 中開啟]。

  • 在 [方案總管] 中,以滑鼠右鍵按一下專案檔,然後按一下 [在 Blend 中開啟]。

    Visual Studio 中的 [在 Blend 中開啟] 命令

對於使用 JavaScript 建置的 Windows 市集應用程式,Blend 包含 HTML5 和 CSS3 工具套件,可讓您完成諸如快速建立 CSS3 動畫、定義及管理樣式,以及偵錯 HTML 和 CSS 等工作。如需詳細資訊,請參閱本文後面的<設計 Windows 市集應用程式 (HTML)>。

若要使用 Blend 建立您的第一個 HTML Windows 市集應用程式,請參閱使用 Blend 建立您的第一個 Windows 市集應用程式,第 1 部分:主版頁面 (HTML 和 JavaScript)

對於使用 VB、C# 或 C++ 建置的 Windows 市集應用程式,Blend 包含 XAML 工具套件,可協助您完成諸如快速套用樣式至控制項、建立及定義範本,以及繫結至範例資料等工作。如需詳細資訊,請參閱本文後面的<設計 Windows 市集應用程式 (XAML)>。

若要使用 Blend 建立您的第一個 HTML Windows 市集應用程式,請參閱使用 Blend 建立您的第一個 Windows 市集應用程式,第 1 部分:主版頁面 (XAML 和 C#)

如需 Blend 的新功能詳細資訊,請參閱 Visual Studio 部落格上的 Blend for Visual Studio 2013 中適用於 HTML 開發人員的新功能以及 Visual Studio 2013 Preview 中適用於撰寫 Windows 市集 XAML 應用程式的新功能

Visual Studio 提供開發 Windows 市集應用程式所需的工具,包括開發人員授權管理、資訊清單設計工具,以及用來提交應用程式至 Windows 市集的編碼和封裝工具。

透過搭配使用 Blend 與 Visual Studio,您可以利用 Blend 中功能強大的 HTML 和 XAML 設計工具,更快速輕鬆地自訂應用程式的外觀。您可以專注於應用程式由下而上的視覺化建置,包括應用程式的結構、配置、資料檢視,以及外觀和操作,而不需要專注於程式碼的語法。

如需搭配使用 Blend 與 Visual Studio 的詳細資訊,包括建議的工作流程和最佳做法,請參閱來回切換 Visual Studio

您可以在 Blend 中開啟及編輯用 Visual Studio 建立的 Windows 市集應用程式,也可以在 Visual Studio 中開啟及編輯用 Blend 建立的 Windows 市集應用程式。

當您在處理專案時,可以輕鬆地在 Blend 和 Visual Studio 之間來回切換。若要從 Visual Studio 切換至 Blend,在 [方案總管] 中,以滑鼠右鍵按一下專案,然後按一下 [在 Blend 中開啟]。若要從 Blend 切換至 Visual Studio,在 [專案] 面板中,以滑鼠右鍵按一下專案,然後按一下 [在 Visual Studio 進行編輯]。

提示 提示

您可在同一部電腦上同時於 Blend 和 Visual Studio 中開啟相同的專案檔案。當您在其中一項工具儲存變更到檔案,然後切換至另一項工具,系統會詢問您是否要重新載入檔案,以便檢視最新版的專案。

透過 Blend,您可以使用其中一個內建 HTML 專案範本來建立新的 Windows 市集應用程式,或開啟用 Visual Studio 建立的現有 Windows 市集應用程式。就像所有原生 Windows 應用程式,使用 HTML5、CSS3 和 JavaScript 所建置的 Windows 市集應用程式可直接存取基礎平台,並且可以與其他應用程式共用資訊。

您可以使用一組功能強大的 HTML5 和 CSS3 設計工具,快速修改應用程式的外觀,包括:

  • 建立及修改 HTML 項目:從 [資產] 面板,將 HTML 項目和 Windows 應用程式控制項拖放至畫板,然後直接在 UI 中修改階層、設定屬性及套用樣式。請參閱建立項目範本並設定其樣式

  • 檢視執行階段狀態:使用互動模式,存取及修改執行階段所特有狀態中的應用程式。使用互動模式

  • 顯示設計階段資料:繫結並顯示 Windows 市集應用程式中的資料,以便更輕鬆地修改執行階段所顯示資料的外觀。請參閱繫結至電影資料

  • 內嵌自訂字型:使用字型家族管理員,將自訂字型內嵌至 Windows 市集應用程式。請參閱內嵌自訂字型.

  • 建立 CSS3 動畫:使用內建的主要畫面格動畫時間軸,建立及編輯 CSS3 動畫。

  • 定義及管理樣式:使用 [樣式規則] 面板,快速建立 CSS 樣式,然後使用 [CSS 屬性] 面板套用樣式定義,檢視任何項目的 CSS 重疊顯示 ([Winning 屬性] 虛擬規則),或決定 Windows 8.1 如何計算每個項目的 CSS 屬性值 ([計算值] 虛擬規則)。請參閱定義 CSS 樣式規則

  • 偵錯 HTML 和 CSS:透過識別及解決 [結果] 面板中顯示的錯誤,直接在 Blend 中以視覺化方式偵錯 HTML 和 CSS。

如需 Blend 中適用於設計以 JavaScript 所建置的 Windows 市集應用程式的新功能詳細資訊,請參閱 Visual Studio 部落格

透過 Blend,您可以使用其中一個內建 XAML 專案範本來建立新的 Windows 市集應用程式,或開啟用 Visual Studio 建立的現有 Windows 市集應用程式。就像所有原生 Windows 應用程式,使用 XAML 和 VB、C# 或 C++ 所建置的 Windows 市集應用程式可直接存取基礎平台,並且可以與其他應用程式共用資訊。

您可以使用一組功能強大的 XAML 設計工具,快速修改應用程式的外觀,包括:

  • 設計自訂配置:使用功能強大的配置工具,包括範本、內建控制項、尺規、輔助線和貼齊支援,設計 Windows 市集應用程式的自訂配置。請參閱設定資料檢視的樣式

  • 建立控制項及設定樣式:將控制項拖放至設計介面,然後直接在 UI 中修改屬性以設定樣式。設定影像和元素的樣式

  • 建立及編輯控制項範本:使用範本編輯工具,建立可在專案中重複使用的自訂控制項範本。將控制項範本加入控制項程式庫,可在目前專案以外的其他專案中重複使用控制項範本。請參閱將影像變成使用者控制項

  • 建立及編輯資料範本:建立範本,以定義應用程式中顯示資料的方式。請參閱建立資料繫結並設定其樣式

  • 顯示範例資料和設計階段資料:繫結並顯示 Windows 市集應用程式中的資料,以便更輕鬆地修改執行階段所顯示資料的外觀。請參閱設定 DataContext

  • 使用行為加入互動功能:透過將內建行為拖曳至設計介面上的物件,然後配合您的需要修改屬性,在應用程式中加入互動功能。請參閱新增內建行為

  • 編輯 XAML 標記:除了不需觸及程式碼即可輕鬆建立及修改 XAML 的 UI 工具之外,Blend 也提供功能強大的 XAML 編輯器,讓您直接在 XAML 標記中快速輕鬆地進行變更。請參閱在 Blend 中偵錯 XAML.

如需 Blend 中適用於設計以 C#、C++ 和 VB 所建置的 Windows 市集應用程式的新功能詳細資訊,請參閱 Visual Studio 部落格

除了 Windows 開發人員中心提供的 Blend 文件之外,您也可以找到種類眾多的資源,有助於開始建立及設計 Windows 市集應用程式,包括:

顯示:
© 2018 Microsoft