WPF 設計工具概觀
更新:2007 年 11 月
本主題將說明 Windows Presentation Foundation (WPF) Designer for Visual Studio。WPF 是 Windows Vista 的使用者介面技術,與先前的檢視技術 (如 Windows Form) 不同。
WPF 設計工具提供類似於 Windows Form 設計工具的視覺化設計支援。您可以從 [工具箱] 拖曳控制項並在 [屬性] 視窗中設定屬性,藉此建立應用程式的使用者介面。您也可以在 XAML 編輯器中直接編輯 XAML。
WPF 設計工具視窗
WPF 設計工具有幾個視窗可供顯示和編輯 XAML 文件。下圖顯示 WPF 設計工具中的部分視窗。
設計檢視
[設計] 檢視提供視覺化設計介面來建置 WPF 控制項和應用程式,而且會顯示目前在 [XAML] 檢視中的 XAML 的呈現表示。
您可以從 [工具箱] 拖曳控制項到設計介面上,也可以藉由拖曳來擺放控制項的位置。有幾項設計輔助工具可協助您將控制項放在所需的位置上。當您在設計介面上變更控制項時,[XAML] 檢視會更新來反映變更。如需詳細資訊,請參閱 HOW TO:將控制項加入至 WPF 視窗和 HOW TO:在設計介面上選取並移動項目。
XAML 檢視
[XAML] 檢視提供編輯 XAML 文件的完整功能,包括 IntelliSense、自動格式化、語法反白顯示和標記巡覽。當您編輯 XAML 時,[設計] 檢視會更新來反映變更。
如需詳細資訊,請參閱逐步解說:在 WPF 設計工具中編輯 XAML。
屬性視窗
您可以使用 [屬性] 視窗,針對 [設計] 檢視中的控制項設定屬性值。
存取 [屬性] 視窗的方法是開啟 [檢視] 功能表,然後選取 [屬性視窗],或是按 CTRL+W、P 或 F4。您也能以滑鼠右鍵按一下 [設計] 檢視中的控制項,然後選取快速鍵功能表上的 [屬性]。[屬性] 視窗會顯示目前所選控制項的縮圖預覽。
若要搜尋屬性,請先在 [屬性] 視窗頂端的 [搜尋] 方塊中輸入屬性的名稱。在您輸入文字時,[屬性] 視窗中便會顯示符合搜尋的屬性。按一下 [清除] 即可移除搜尋,並顯示選取之物件的所有屬性。
從 Visual Studio 2008 Service Pack 1 開始,您可以按字母順序或依分類排序屬性。若要按字母順序排序屬性,請按一下 [屬性] 視窗頂端的 [字母順序] 按鈕。若要依分類排序屬性,請按一下 [屬性] 視窗頂端的 [分類] 按鈕。
文件大綱視窗
[文件大綱] 視窗提供 XAML 文件的階層式檢視。您可以使用 [文件大綱] 視窗來預覽、選取或刪除 XAML 項目。要存取 [文件大綱] 視窗,請開啟 [檢視] 功能表,指向 [其他視窗],然後選取 [文件大綱],或按 CTRL+ALT+T。如需詳細資訊,請參閱巡覽 WPF 文件的項目階層架構。
工具箱
[工具箱] 存放有可拖曳到設計介面的控制項。要存取 [工具箱] 視窗,請開啟 [檢視] 功能表,然後選取 [工具箱],或按 CTRL+ALT+X。
設計檢視功能
[設計] 檢視提供許多功能,可用來排列 WPF 應用程式視窗或頁面中的控制項。下圖顯示 [設計] 檢視的部分功能。
縮放控制
使用 [縮放控制] 可控制設計介面的大小。您可以從 [10%] 縮放到 [20x]。
最適檢視
使用 [最適檢視] 按鈕可將設計介面的大小調整為 [設計] 檢視中的可用螢幕大小,這個功能適用於過度縮放大小時。
方格滑軌
使用方格滑軌可管理 Grid 控制項中的資料列和資料行。您可以建立和刪除資料行和資料列,以及調整其相對寬度和高度。如需詳細資訊,請參閱 HOW TO:在方格中加入資料列和資料行。
格線
使用格線可控制 Grid 資料行和資料列的寬度和高度。您可以按一下 Grid 上面和左側的滑軌,以加入新的資料行或資料列。如需詳細資訊,請參閱 HOW TO:在方格中加入資料列和資料行。
格線指示區
格線指示區會以三角形出現在方格滑軌中。當您拖曳格線指示區或格線本身,相鄰資料行或資料列的寬度或高度就會隨著滑鼠移動更新。如需詳細資訊,請參閱 HOW TO:在方格中加入資料列和資料行。
移動控點
移動控點會出現在所選面板控制項的左上角。按一下移動控點,然後將控制項拖曳到設計介面上所需的位置。如需詳細資訊,請參閱 HOW TO:在設計介面上選取並移動項目。
調整大小控點
調整大小控點會出現在選取的控制項上。按一下並拖曳調整大小控點可變更所選項目的大小。當您調整控制項的大小時,通常會出現寬度和高度值,以協助精確調整控制項的大小。
邊界線
邊界代表控制項邊緣及其容器邊緣之間的固定空間量。按一下控制項的邊界線可設定其邊界。如需詳細資訊,請參閱 HOW TO:在 WPF 設計工具中設定控制項的邊界。
邊界 Stub
當所選控制項的邊界設為 0 時,其上會出現邊界 Stub。按一下邊界 Stub 可設定邊界與容器對應邊緣的距離。如需詳細資訊,請參閱 HOW TO:在 WPF 設計工具中設定控制項的邊界。
對齊線
使用對齊線可對齊控制項彼此。如果啟用對齊線,當您將控制項拖曳到其他控制項的相對位置,而部分控制項的邊緣和文字水平或垂直對齊時,對齊線就會出現。如需詳細資訊,請參閱 HOW TO:同時對齊文字基線和邊界。
XAML 檢視功能
Extensible Application Markup Language (XAML) 提供宣告式的 XML 架構詞彙來指定應用程式的使用者介面。WPF 設計工具提供獨特的分割檢視,其中包含 [XAML] 檢視和同步處理的 [設計] 檢視來顯示應用程式的呈現 XAML 標記。下圖顯示部分 XAML 功能。
如需詳細資訊,請參閱分割檢視:同時檢視 WPF 設計介面和 XAML。
分割檢視列
使用分割檢視列可控制 [設計] 檢視和 [XAML] 檢視的相對大小。您可以將分割檢視設成水平或垂直,而且可以摺疊任一檢視。如需詳細資訊,請參閱分割檢視:同時檢視 WPF 設計介面和 XAML。
標記導覽
您可以使用標記導覽,移至 [XAML] 檢視中目前所選標記的父標記。當您停留在標記導覽中的標記時,會顯示該項目的縮圖預覽。逐步解說:在 WPF 設計工具中編輯 XAML.
建置豐富、互動式的使用者介面
在 WPF 中,Window 和 Page 類別是您向使用者顯示資訊的視覺化介面。建置 WPF 應用程式的方式一般是在 Window 加入控制項,並建立對按一下滑鼠或按鍵盤等使用者動作的回應。「控制項」是一種獨立的使用者介面 (UI) 元素,可以顯示資料或接受輸入的資料。
當使用者對 Window 或其中一個控制項進行某個動作時,那個動作就會產生事件。應用程式會回應這些事件,並在事件發生時加以處理。如需詳細資訊,請參閱 HOW TO:建立簡單的事件處理常式。
WPF 包含各式各樣可以加入至視窗的控制項,例如會顯示文字方塊、按鈕、下拉式清單、選項按鈕,甚至是 Web 網頁的控制項。如需可以在視窗中使用之所有控制項的清單,請參閱控制項程式庫。如果現有控制項不符合您的需要,WPF 也支援您使用 UserControl 和 Control 類別建立自訂控制項。
使用拖放式 WPF 設計工具,您就可以輕鬆建立 WPF 應用程式。只要用滑鼠指標選取控制項,然後將控制項加入至視窗中的所需位置即可。這個設計工具提供對齊線和連續縮放等工具,使排列控制項更容易。
最後,如果您要建立個人自訂 UI 項目,System.Windows.Media 和 System.Windows.Shapes 命名空間 (Namespace) 中有大量類別可以直接在視窗中呈現線條、圓圈和其他形狀。
有關建立視窗和控制項的說明
如需如何使用這些功能的逐步資訊,請參閱下列說明主題。
說明 |
說明主題 |
---|---|
使用 Visual Studio 建立新的 WPF 應用程式。 |
|
在視窗中使用控制項。 |
|
建立控制項的事件處理常式。 |
|
處理視窗和視窗中控制項的事件。 |
|
巡覽 WPF 配置。 |
|
建立動態配置。 |
|
建立自訂控制項。 |
透過 Expression Blend 共同作業
WPF 將內容與展示的部分完全分開處理,可讓軟體開發人員和圖形設計人員合作開發應用程式的外觀和行為。Windows Presentation Foundation (WPF) Designer for Visual Studio 專為軟體開發人員最佳化,而 Expression Blend 則專為圖形設計人員最佳化。如需詳細資訊,請參閱與 Expression Blend 共同作業。
將應用程式部署至用戶端電腦
撰寫完應用程式之後,您必須將應用程式傳送給使用者,讓使用者能夠自行在用戶端電腦上安裝和執行。使用 ClickOnce 技術時,只需按幾下滑鼠按鍵就可以從 Visual Studio 內部署應用程式,並提供使用者指向 Web 或檔案共用上應用程式的 URL。ClickOnce 會管理應用程式中所有的項目和相依性,並確保應用程式能夠正確地安裝在用戶端電腦上。
ClickOnce 應用程式可以設定成只在使用者連線到網路時才執行,或者是設定成連線和離線時都可以執行。如果指定應用程式要支援離線作業,ClickOnce 會在使用者的 [開始] 功能表中加入應用程式的連結。以後使用者不必使用 URL 就可以開啟應用程式。
當您更新應用程式時,要將新的部署資訊清單以及新的應用程式複本發行至 Web 伺服器或檔案共用。ClickOnce 會偵測到可用的更新程式,並升級使用者的安裝;更新舊的組件並不需要自訂程式設計。如需詳細資訊,請參閱 WPF 應用程式部署。
部署 ClickOnce 應用程式
如需 ClickOnce 的完整介紹,請參閱 ClickOnce 部署概觀。如需如何使用這些功能的逐步資訊,請參閱下列說明主題。
說明 |
說明主題 |
---|---|
使用 ClickOnce 部署應用程式。 |
|
更新 ClickOnce 部署。 |
|
使用 ClickOnce 管理安全性。 |
請參閱
概念
給 Windows Form 開發人員的 WPF 設計工具注意事項