WPF 和 Silverlight 設計工具概觀

更新：2011 年 3 月

WPF 和 Silverlight Designer 提供建立 WPF 和 Silverlight 應用程式的視覺化設計支援。 您可以從 [工具箱] 拖曳控制項並在 [屬性] 視窗中設定屬性，藉此建立應用程式的使用者介面。 您也可以在 XAML 編輯器中直接編輯 XAML。 下圖顯示 WPF 和 Silverlight Designer 以及其部分支援視窗。

在您第一次啟動 WPF 和 Silverlight Designer 時，[資料來源] 視窗和 [文件大綱] 視窗會摺疊在 Visual Studio 的左邊。 如果您將索引標籤顯示並固定在左邊，您會看到上一個檢視；在使用設計介面時，這種排列組合非常實用。

此主題包括下列章節：

• 設計檢視

• XAML 檢視

• 屬性視窗

• 資料來源視窗

• 文件大綱視窗

• 建置豐富的互動式使用者介面

• 透過 Expression Blend 共同作業

設計檢視

[設計] 檢視提供視覺化設計介面來建置 WPF 和 Silverlight 控制項及應用程式， 而且會顯示目前在 [XAML] 檢視中的 XAML 的呈現方式。 當您在設計介面上變更控制項時，[XAML] 檢視會更新來反映變更。 [設計] 檢視提供許多功能，可用來排列 WPF 應用程式視窗或頁面中的控制項。 下圖顯示 [設計] 檢視的部分功能。

縮放

[縮放控制] 可讓您調整設計介面的大小。 您可以從 [10%] 縮放到 [20x]。 您的縮放設定會儲存在方案的 .suo 檔。

平移

在放大設計介面，而且出現水平或垂直捲軸時，您可以平移來檢視超出螢幕範圍外的設計介面部分。 請按住空格鍵，然後拖曳設計介面進行平移。

最適檢視

[最適檢視] 按鈕可讓您將設計介面的大小調整為 [設計] 檢視中的可用螢幕大小。 這個功能適用於過度縮放大小時。

方格滑軌

方格滑軌可用來管理 Grid 控制項中的資料列和資料行。 您可以建立和刪除資料行和資料列，以及調整其相對寬度和高度。 如需詳細資訊，請參閱 HOW TO：在方格中加入資料列和資料行。

格線

格線可用來控制 Grid 資料行和資料列的寬度和高度。 您可以按一下 Grid 上面和左側的滑軌，以加入新的資料行或資料列。 如需詳細資訊，請參閱 HOW TO：在方格中加入資料列和資料行。

格線指示區

格線指示區會以三角形出現在方格滑軌中。 當您拖曳格線指示區或格線本身，相鄰資料行或資料列的寬度或高度就會隨著滑鼠移動更新。 如需詳細資訊，請參閱 HOW TO：在方格中加入資料列和資料行。

移動控制軸

移動控制軸會出現在所選面板控制項的左上角，供您移動面板。 按一下移動控制軸，然後將控制項拖曳到設計介面上所需的位置。 如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。

調整大小控點

調整大小控點會出現在選取的控制項上，讓您可以調整控制項的大小。 當您調整控制項的大小時，通常會出現寬度和高度值，以協助精確調整控制項的大小。

邊界線

邊界代表控制項邊緣及其容器邊緣之間的固定空間量。 按一下控制項的邊界線可設定其邊界。 如需詳細資訊，請參閱 HOW TO：在 WPF 設計工具中設定控制項的邊界。

邊界 Stub

當所選控制項的邉界設定為 0 時，邊界 Stub 就會出現在該控制項上。 請按一下邊界 Stub，設定邊界與容器對應邊緣的距離。 如需詳細資訊，請參閱 HOW TO：在 WPF 設計工具中設定控制項的邊界。

對齊線

對齊線可幫助您讓控制項彼此對齊。 如果啟用對齊線，當您將控制項拖曳到其他控制項的相對位置，而部分控制項的邊緣和文字水平或垂直對齊時，對齊線就會出現。 如需詳細資訊，請參閱 HOW TO：同時對齊文字基線和邊界。

資訊列

資訊列會出現在 [設計] 檢視頂端，並顯示 [設計] 檢視中發生之呈現問題的相關資訊。 在某些情況下，您可以按一下資訊列，取得問題的其他資訊。 下圖顯示展開的資訊列檢視畫面。

縮放列

當您將滑鼠指標移到有兩個以上資料行或資料列之 Grid 控制項的方格滑軌上方時，縮放列會出現在滑軌之外。 縮放列可讓您設定 Grid 資料列和資料行的固定、星號和 Auto 調整大小選項。 如需詳細資訊，請參閱 HOW TO：調整方格控制項中資料列和資料行的大小。

原始大小調整標籤

選取視窗時，原始大小調整標籤會出現在 [設計] 檢視中視窗的右下角。 原始大小調整標籤可讓您將視窗的原始大小切換為自動或固定。 如需詳細資訊，請參閱設計階段屬性。

XAML 檢視

Extensible Application Markup Language (XAML) 提供宣告式的 XML 架構詞彙來指定應用程式的使用者介面。 WPF 和 Silverlight Designer 提供 [XAML] 檢視和同步處理的 [設計] 檢視來顯示應用程式的呈現 XAML 標記。 [XAML] 檢視包括 IntelliSense、自動格式化、語法反白顯示和標記巡覽。 下圖顯示部分 XAML 功能。

分割檢視列

分割檢視列可讓您控制 [設計] 檢視和 [XAML] 檢視的相對大小。 您也可以交換檢視、將分割檢視指定成水平或垂直，並摺疊任一檢視。 如需詳細資訊，請參閱分割檢視：同時檢視 WPF 設計介面和 XAML。

標記延伸 IntelliSense

除了標準語言 IntelliSense 以外，XAML 檢視還支援標記延伸的 IntelliSense。 當您在 [XAML] 檢視中輸入左大括號 ({) 時，IntelliSense 會顯示可用的標記延伸。 在您從清單中選擇標記延伸後，IntelliSense 便會顯示可用的屬性。 如需詳細資訊，請參閱逐步解說：在 WPF 設計工具中編輯 XAML。

標記導覽

標記導覽會出現在 [XAML] 檢視中，而且可以讓您移到 [XAML] 檢視中目前所選標記的父標記。 當您將滑鼠指標移到標記導覽中的標記上方時，便會顯示該項目的縮圖預覽。 逐步解說：在 WPF 設計工具中編輯 XAML.

縮放

[縮放控制] 可讓您調整 [XAML] 檢視的大小。 您可以從 [20%] 縮放到 [400%]。

屬性視窗

[屬性] 視窗可以讓您針對 [設計] 檢視中的控制項設定屬性值。 [屬性] 視窗的範例如下圖所示。

[屬性] 視窗的頂端有各種選項。 若要變更目前所選控制項的名稱，請將游標放在 [名稱] 方塊中，並輸入名稱。 右上角會顯示目前所選控制項的縮圖預覽。 若要依分類或字母順序列出屬性，請按一下 [分類] 按鈕或 [字母順序] 按鈕。 若要依來源排序屬性，請按一下 [依屬性來源排序] 按鈕。 若要查看控制項的事件清單，請按一下 [事件] 按鈕。 若要搜尋屬性，請在 [搜尋] 方塊中，開始輸入屬性的名稱。 在您輸入文字時，[屬性] 視窗中便會顯示符合搜尋的屬性。

屬性名稱右邊的第一個資料行中包含屬性標記。 這個屬性標記指出屬性是否已套用資料繫結或資源。 按一下屬性標記便可開啟資料繫結產生器或資源選擇器，或是巡覽至資源的定義。 下圖顯示按一下樣式的屬性標記時可用的選項。

資料繫結產生器

資料繫結產生器可讓您建立資料繫結，而且不需要輸入任何 XAML。 您可以建立資源、資料內容和項目屬性的繫結。 您也可以套用值轉換子。 如需詳細資訊，請參閱逐步解說：使用 WPF 設計工具建立資料繫結和逐步解說：使用 DesignInstance 繫結至設計工具中的資料。

邊界編輯器

邊界編輯器可讓您查看每個邊界設定，以及其如何影響控制項的位置。 使用邊界編輯器，也可以變更一個控制項的邊界或編輯數個控制項的邊界。 如需詳細資訊，請參閱 HOW TO：在 WPF 設計工具中設定控制項的邊界。

資源選擇器

資源選擇器可讓您尋找資源，並將資源指派到 [屬性] 視窗中的屬性。 您也可以將硬式編碼值擷取至資源，以提高重複使用率。 如需詳細資訊，請參閱使用資源。

筆刷編輯器

筆刷編輯器可讓您在 [屬性] 視窗中建立許多不同類型的筆刷。 如需詳細資訊，請參閱 HOW TO：使用筆刷編輯器來建立筆刷。

資料來源視窗

您可以使用資料來源視窗，將資料快速整合到 WPF 應用程式中。 建立資料連接之後，您可以將資料表拖曳到設計介面，以自動產生商務邏輯和資料繫結。 您可以繫結到物件、ADO.NET 資料庫、實體資料模型或服務。 如需詳細資訊，請參閱將 WPF 控制項繫結至 Visual Studio 中的資料。

文件大綱視窗

[文件大綱] 視窗提供 XAML 文件的階層式檢視。 您可以使用 [文件大綱] 視窗來預覽、選取或刪除 XAML 項目。 [屬性] 視窗的範例如下圖所示。

如需詳細資訊，請參閱巡覽 WPF 文件的項目階層架構。

建置豐富的互動式使用者介面

在 WPF 中，Window 和 Page 類別是您向使用者顯示資訊的視覺化介面。 建置 WPF 應用程式的方式一般是在 Window 加入控制項，並建立對按一下滑鼠或按鍵盤等使用者動作的回應。 「控制項」(Control) 是一種獨立的使用者介面 (UI) 元素，可以顯示資料或接受輸入的資料。

當使用者對 Window 或其中一個控制項進行某個動作時，那個動作就會產生事件。 應用程式會回應這些事件，並在事件發生時加以處理。 如需詳細資訊，請參閱 HOW TO：建立簡單的事件處理常式。

WPF 包含各式各樣可以加入至視窗的控制項，例如會顯示文字方塊、按鈕、下拉式清單、選項按鈕，甚至是 Web 網頁的控制項。 如需可以在視窗中使用之所有控制項的清單，請參閱控制項程式庫。 如果現有控制項不符合您的需要，WPF 也支援您使用 UserControl 和 Control 類別建立自訂控制項。

使用拖放式 WPF 和 Silverlight Designer，您就可以輕鬆建立 WPF 應用程式。 只要用滑鼠指標選取控制項，然後將控制項加入至視窗中的所需位置即可。 這個設計工具提供對齊線和連續縮放等工具，使排列控制項更容易。

最後，如果您要建立個人自訂 UI 項目，System.Windows.Media 和 System.Windows.Shapes 命名空間 (Namespace) 中有大量類別可以直接在視窗中呈現線條、圓圈和其他形狀。

有關建立視窗和控制項的說明

如需如何使用這些功能的逐步資訊，請參閱下列說明主題。

透過 Expression Blend 共同作業

WPF 將內容與展示的部分完全分開處理，可讓軟體開發人員和圖形設計人員合作開發應用程式的外觀和行為。 WPF 和 Silverlight Designer 專為軟體開發人員最佳化，而 Expression Blend 則專為圖形設計人員最佳化。 如需詳細資訊，請參閱與 Expression Blend 共同作業。

請參閱

概念

適用於 Windows Form 開發人員的 WPF 設計工具

與 Expression Blend 共同作業

其他資源

WPF 設計工具

控制項程式庫

WPF 中的 XAML

變更記錄