共用方式為


逐步解說:設計階段期間在 Windows Form 上排列 Windows Presentation Foundation 內容

更新:2007 年 11 月

本逐步解說會示範如何使用 Windows Form 的配置功能 (例如錨定和對齊線) 排列 Windows Presentation Foundation (WPF) 控制項。

在這個逐步解說中,您會執行下列工作:

  • 建立專案。

  • 建立 WPF 控制項。

  • 將 WPF 控制項裝載到配置面板中。

  • 使用對齊線來對齊 WPF 控制項。

  • 錨定和停駐 WPF 控制項。

注意事項:

根據您目前使用的設定或版本,您所看到的對話方塊與功能表命令可能會與 [說明] 中描述的不同。若要變更設定,請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊,請參閱 Visual Studio 設定

必要條件

您需要下列元件才能完成此逐步解說:

  • Visual Studio 2008。

建立專案

第一步是建立 Windows Form 專案。

注意事項:

裝載 WPF 內容時,只支援 C# 和 Visual Basic 專案。

若要建立專案

建立 WPF 控制項

在將 WPF 控制項加入專案後,即可在表單上予以排列。

若要建立 WPF 控制項

  1. 將新的 WPF UserControl 加入至專案。使用控制項型別的預設名稱 UserControl1.xaml。如需詳細資訊,請參閱逐步解說:設計階段期間在 Windows Form 上建立新的 Windows Presentation Foundation 內容

  2. 在 [設計] 檢視下,確定已選取 UserControl1。如需詳細資訊,請參閱 HOW TO:在設計介面上選取並移動項目

  3. 在 [屬性] 視窗中,將 WidthHeight 屬性的值設定為 200。

  4. Background 屬性的值設定為 Blue。

  5. 建置專案。

將 WPF 控制項裝載到配置面板中

您可以使用與其他 Windows Form 控制項相同的方式,在配置面板中使用 WPF 控制項。

若要將 WPF 控制項裝載到配置面板中

  1. 在 Windows Form 設計工具中開啟表單 Form1。

  2. 在 [工具箱] 中,將 TableLayoutPanel 控制項拖曳到表單上。

  3. TableLayoutPanel 控制項的智慧標籤面板上,選取 [移除最後一個資料列]。

  4. TableLayoutPanel 控制項調整為較寬與較高的大小。

  5. 在 [工具箱] 中,按兩下 [UserControl1],在 TableLayoutPanel 控制項的第一個儲存格中建立 UserControl1 的執行個體。

    UserControl1 的執行個體會裝載到名為 elementHost1 的新 ElementHost 控制項中。

  6. 在 [工具箱] 中,按兩下 [UserControl1],在 TableLayoutPanel 控制項的第二個儲存格中建立另一個執行個體。

  7. 在 [文件大綱] 視窗中,選取 [tableLayoutPanel1]。如需詳細資訊,請參閱文件大綱視窗

  8. 在 [屬性] 視窗中,將 Padding 屬性的值設定為 10, 10, 10, 10。

    兩個 ElementHost 控制項的大小都會調整配合新的配置。

使用對齊線來對齊 WPF 控制項

對齊線讓控制項能在表單上輕易對齊。您也可以使用對齊線來對齊 WPF 控制項。如需詳細資訊,請參閱逐步解說:使用對齊線排列 Windows Form 上的控制項

若要使用對齊線來對齊 WPF 控制項

  1. 從 [工具箱],將 UserControl1 的執行個體拖曳到表單上,並將其放置到 TableLayoutPanel 控制項下方的空間。

    UserControl1 的執行個體會裝載到名為 elementHost3 的新 ElementHost 控制項中。

  2. 使用對齊線,將 elementHost3 的左邊對齊 TableLayoutPanel 控制項的左邊。

  3. 使用對齊線,將 elementHost3 的大小調整為與 TableLayoutPanel 控制項同寬度。

  4. 將 elementHost3 向 TableLayoutPanel 控制項移動,直到中央對齊線出現在兩個控制項之間。

  5. 在 [屬性] 視窗中,將 Margin 屬性的值設定為 20, 20, 20, 20。

  6. 將 elementHost3 移動離開 TableLayoutPanel 控制項,直到中央對齊線再度出現。現在,中央對齊線表示的是 20 的邊界。

  7. 將 elementHost3 向右移,直到其左邊與 elementHost1 的左邊對齊為止。

  8. 變更 elementHost3 的寬度,直到其右邊與 elementHost2 的右邊對齊為止。

錨定和停駐 WPF 控制項

在表單上所裝載的 WPF 控制項,具有與其他 Windows Form 控制項相同的錨定和停駐行為。

若要錨定和停駐 WPF 控制項

  1. 選取 elementHost1。

  2. 在 [屬性] 視窗中,將 Anchor 屬性設定為 Top, Bottom, Left, Right。

  3. TableLayoutPanel 控制項調整成更大的大小。

    elementHost1 控制項會調整大小填滿儲存格。

  4. 選取 elementHost2。

  5. 在 [屬性] 視窗中,將 Dock 屬性的值設定為 Fill

    elementHost2 控制項會調整大小填滿儲存格。

  6. 選取 TableLayoutPanel 控制項。

  7. 將它的 Dock 屬性的值設為 Top

  8. 選取 elementHost3。

  9. 將它的 Dock 屬性的值設為 Fill

    elementHost3 控制項會調整大小填滿表單上的剩餘空間。

  10. 調整表單的大小。

    所有三個 ElementHost 控制項都會適當地調整大小。

    如需詳細資訊,請參閱 HOW TO:錨定和停駐 TableLayoutPanel 控制項中的子控制項

請參閱

工作

HOW TO:錨定和停駐 TableLayoutPanel 控制項中的子控制項

HOW TO:在設計階段將控制項對齊表單邊緣

逐步解說:使用對齊線排列 Windows Form 上的控制項

參考

ElementHost

WindowsFormsHost

其他資源

移轉和互通性

使用 Windows Presentation Foundation 控制項

WPF 設計工具