逐步解說：建構動態配置

在動態位置中，排列子項目的方式是指定他們相對於父項目該如何排列以及該如何換行。 您也可以設定在展開視窗和控制項的內容時，要自動展開視窗和控制項。 如需詳細資訊，請參閱使用絕對和動態位置進行配置。

WPF Designer for Visual Studio 提供的許多 Panel 控制項可以支援動態位置。 藉由將面板控制項加入為另一個面板控制項的子項目，即可以結合面板控制項。 您可以使用下列面板控制項，在應用程式中動態定位項目：

• Grid

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

重要

可能的話，最好是使用動態配置。動態配置是最具彈性的，能適應內容的變更 (例如當地語系化)，並最能讓使用者掌控他們的環境。如需絕對配置的範例，請參閱逐步解說：根據絕對位置建構配置。

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

• 建立 WPF 應用程式

• 設定預設的 Grid 面板控制項。

• 將控制項加入面板中。

• 測試配置。

下圖顯示應用程式的顯示方式。

注意

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

必要條件

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

• Visual Studio 2012 RC

建立專案

第一個程序是要建立應用程式的專案。

若要建立專案

1. 在 Visual Basic 或 Visual C# 中，建立名為 DynamicLayout 的新 WPF 應用程式專案。 如需詳細資訊，請參閱 HOW TO：建立新的 WPF 應用程式專案。

   注意

   在這個逐步解說中，您將不會撰寫任何程式碼。您為專案選擇的語言是應用程式中用於程式碼後置 (Code-Behind) 頁面的語言。

   MainWindow.xaml 隨即在 WPF Designer中開啟。

2. 在 [設計] 檢視中選取視窗。 如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。

3. 在 [屬性] 視窗中，為 Window 設定下列屬性：

   屬性	值
   Width	400
   Height	200
   SizeToContent	WidthAndHeight

   提示

   您也可以在 [設計] 檢視中使用調整大小控點來調整視窗的大小。

4. 在 [檔案] 功能表上，按一下 [全部儲存]。

設定預設的方格面板控制項

根據預設，新的 WPF 應用程式包含具有 Grid 面板的 Window。 在這個程序中，您會方格中加入 4 個資料列和 4 個資料行。 您要將每個資料行寬度設為 *，這樣可用寬度會在 4 個資料行間平均分配。 您要將 3 個資料列的高度設為 Auto，這樣他們的大小會依據內容而決定。 另外，您要將 1 個資料列的高度設為 *，這樣這個資料列會使用剩餘的可用高度。

若要加入面板控制項

1. 在 [設計] 檢視中選取方格。

2. (選擇性) 在 [屬性] 視窗中，找出 ShowGridLines 屬性並選取核取方塊。

   應用程式執行時，格線會出現在視窗中。 這樣在偵錯時非常有用，但在實際執行程式碼 (Production Code) 中則應該要清除 ShowGridLines 屬性核取方塊。

3. 在 [屬性] 視窗中，找出 [ColumnDefinitions] 屬性，然後按一下屬性值資料行中的省略符號按鈕。

   [集合編輯器] 對話方塊隨即出現。

   1. 按 4 次 [加入] 以加入 4 個資料行。

   2. 將第 1 個資料列的 Width 屬性設為 Auto。

   3. 將第 2 個資料列的 Width 屬性設為 *。

   4. 將第 3 個資料列的 Width 屬性設為 Auto。

   5. 將第 4 個資料列的 Width 屬性設為 Auto。

   6. 按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

      現在方格中有 4 個資料行，但只有出現 1 個資料行。 Width 屬性設定為 Auto 的資料行會暫時隱藏，因為他們沒有任何內容。 對於這個逐步解說，這是沒問題的。 在未來如果要避免這種情況，您可以在工作時使用星號大小，並於完成時變更為 Auto。

4. 在 [屬性] 視窗中，找出 [RowDefinitions] 屬性，然後按一下屬性值資料行中的省略符號按鈕。

   [集合編輯器] 對話方塊隨即出現。

   1. 按 4 次 [加入] 以加入 4 個資料列。

   2. 將第 1 個資料列的 Height 屬性設為 Auto。

   3. 將第 2 個資料列的 Height 屬性設為 Auto。

   4. 將第 3 個資料列的 Height 屬性設為 *。

   5. 將第 4 個資料列的 Height 屬性設為 Auto。

   6. 按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

      現在方格中有 4 個資料列，但只有出現 1 個資料列。 Height 屬性設定為 Auto 的資料列會暫時隱藏，因為他們沒有任何內容。 對於這個逐步解說，這是沒問題的。 在未來如果要避免這種情況，您可以在工作時使用星號大小，並於完成時變更為 Auto。

5. 在 [檔案] 功能表上，按一下 [全部儲存]。

將控制項加入面板中

接下來，您會將控制項加入面板中，並使用 Grid 的 Column 和 Row 附加屬性以動態定位控制項。

若要將控制項加入面板中

1. 從 [工具箱] 的 [通用] 群組中，將 Label 控制項拖曳到 Grid。

2. 在 [屬性] 視窗中，為 Label 設定下列屬性：

   屬性	值
   內容	姓名：
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,20,10,10

3. 從 [工具箱] 的 [通用] 群組中，將 Label 控制項拖曳到 Grid。

4. 在 [屬性] 視窗中，為 Label 設定下列屬性：

   屬性	值
   內容	Password:
   Grid.Column	0
   Grid.ColumnSpan	1
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	23
   HorizontalAlignment	Stretch
   VerticalAlignment	Top
   Margin	20,10,10,10

5. 從 [工具箱] 的 [通用] 群組中，將 TextBox 控制項拖曳到 Grid。

6. 在 [屬性] 視窗中，為 TextBox 設定下列屬性：

   屬性	值
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	0
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,20,20,10

7. 從 [工具箱] 的 [通用] 群組中，將 TextBox 控制項拖曳到 Grid。

8. 在 [屬性] 視窗中，為 TextBox 設定下列屬性：

   屬性	值
   Grid.Column	1
   Grid.ColumnSpan	3
   Grid.Row	1
   Grid.RowSpan	1
   Width	Auto
   Height	Auto
   HorizontalAlignment	Stretch
   VerticalAlignment	Stretch
   Margin	10,10,20,10

9. 從 [工具箱] 的 [通用] 群組中，將 Button 控制項拖曳到 Grid。

10. 在 [屬性] 視窗中，為 Button 設定下列屬性：

    屬性	值
    內容	OK
    Grid.Column	2
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	10,10,6,20

11. 從 [工具箱] 的 [通用] 群組中，將 Button 控制項拖曳到 Grid。

12. 在 [屬性] 視窗中，為 Button 設定下列屬性：

    屬性	值
    內容	Cancel
    Grid.Column	3
    Grid.ColumnSpan	1
    Grid.Row	3
    Grid.RowSpan	1
    Width	75
    Height	23
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	6,10,20,20

13. 在 [檔案] 功能表上，按一下 [全部儲存]。

測試配置

最後，您會執行應用程式，並確認在使用者調整視窗大小時，以及控制項的內容展開超過控制項的大小時，配置會動態變更。

若要測試配置

1. 按一下 [偵錯] 功能表上的 [開始偵錯]。

   應用程式會啟動且視窗會出現。

2. 在 [名稱] 文字方塊中，隨機輸入以填寫文字方塊。 當您到達文字方塊的結尾處時，文字方塊和視窗都會展開，以配合您的輸入文字。

3. 關閉視窗。

4. 按一下 [偵錯] 功能表上的 [開始偵錯]。

   應用程式會啟動且視窗會出現。

5. 同時調整視窗的水平和垂直大小。

   資料行會均等展開以使用可用的空間。 文字方塊會自動縮放以配合展開的資料行。 3 個資料列會維持高度，而第 4 個資料列會使用可用的空間展開。

6. 關閉視窗。

7. 在 [設計] 檢視中選取 [名稱] 標籤。

8. 在 [屬性] 視窗中，將 Content 屬性變更為「請在此輸入您的全名：」。

   在 [設計] 檢視中，標籤會展開以配合文字。

9. 按一下 [偵錯] 功能表上的 [開始偵錯]。

   應用程式會啟動且視窗會出現。 標籤控制項會顯示較長的文字。

10. 關閉視窗。

整合在一起

下面是已完成的 MainWindow.xaml 檔案：

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

後續步驟

您可以使用下列面板取代本逐步解說中的 Grid 面板，以透過實驗了解如何使用動態配置達成各種效果：

• DockPanel

• WrapPanel

• StackPanel

• UniformGrid

請參閱

工作

HOW TO：建構動態配置

逐步解說：使用 WPF 設計工具建立可調整大小的應用程式

概念

WPF 設計工具中的對齊方式

版面配置

WPF 和 Silverlight 設計工具概觀

其他資源

配置逐步解說