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

發行項
05/28/2012

您可以使用 GridSplitter 控制項結合 Grid 容器控制項，建立可由使用者在執行階段重新調整大小的視窗配置。例如，在將 UI 分成幾個區域的應用程式中，使用者可以視想要看到哪些區域的詳細內容，而拖曳分隔器將區域放大。在這個逐步解說中，您會建立信差樣式應用程式的配置。

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

建立 WPF 應用程式
設定預設的方格面板。
加入水平 GridSplitter。
加入停駐面板及控制項。
加入方格面板及控制項。
測試應用程式。

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

可調整大小的應用程式

注意

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

必要條件

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

Visual Studio 2012 RC

建立專案

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

若要建立專案

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

注意

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

MainWindow.xaml 隨即在 WPF Designer中開啟。
在 [檔案] 功能表上，按一下 [全部儲存]。

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

根據預設，新的 WPF 應用程式包含具有 Grid 面板的 Window。若要遵循最佳做法，您要將這個 Grid 專門用於 GridSplitter。方格的計劃如下：

資料列 1：配置的第一部分為 Dock 面板。

資料列 2：GridSplitter。

資料列 3：配置的其餘部分為 Grid 面板。

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

在 [設計] 檢視中，選取 Grid。如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。
在 [屬性] 視窗中，找出 RowDefinitions 屬性，然後按一下屬性值資料行中的省略符號按鈕。

[集合編輯器] 隨即出現。
按三次 [加入] 加入三個資料列。
將第 2 個資料列的 Height 屬性設為 Auto。
將第 3 個資料列的 [MinHeight] 屬性設為 70。
按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

現在方格中有三個資料列，但只顯示兩個資料列。 Height 屬性設定為 Auto 的資料列會暫時隱藏，因為該資料列沒有任何內容可顯示。對於這個逐步解說，這是沒問題的。在未來如果要避免這種情況，您可以在工作時使用星號大小，並於完成時變更為 Auto。
在 [檔案] 功能表上，按一下 [全部儲存]。

加入水平 GridSplitter

接著，您要加入 GridSplitter。

若要加入水平 GridSplitter

在 [設計] 檢視中，選取 Grid。
從 [工具箱] 中拖曳一個 GridSplitter 控制項至 Grid。

在 [屬性] 視窗中，為 GridSplitter 設定下列屬性：

屬性	值
ResizeDirection	Rows
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Width	Auto
Height	10
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

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

加入停駐面板和控制項

接下來，您要加入 DockPanel 並設定應用程式上半部的配置。 DockPanel 內含 Label 和 RichTextBox。您要設定 Label 和 RichTextBox 的顏色，在您移動 GridSplitter 時，反白顯示應用程式上半部的大小。

若要加入停駐面板及控制項。

在 [設計] 檢視中，選取 Grid。
從 [工具箱] 中拖曳一個 DockPanel 控制項至 Grid。

在 [屬性] 視窗中，為 DockPanel 設定下列屬性：

屬性	值
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
LastChildFill	True (已核取)
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

從 [工具箱] 中拖曳 Label 控制項至 DockPanel。

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

屬性	值
背景	Blue (#FF0000FF)
Foreground	White (#FFFFFFFF)
內容	Display
DockPanel.Dock	Top
Width	Auto
Height	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

在 [設計] 檢視中，選取 DockPanel。

提示

因為有多個控制項覆蓋著方格，您可以使用 TAB 鍵、[文件大綱] 視窗或 [XAML] 檢視，以方便選取 DockPanel。如需詳細資訊，請參閱 HOW TO：在設計介面上選取並移動項目。
從 [工具箱] 中拖曳一個 RichTextBox 控制項至 DockPanel。

在 [屬性] 視窗中，為 RichTextBox 設定下列屬性：

屬性	值
背景	LightBlue (#FFADD8E6)
DockPanel.Dock	Bottom
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	True (已核取)

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

加入方格面板及控制項

接下來，您要加入 Grid 並設定應用程式下半部的配置。 Grid 內含 Button 和 RichTextBox。您要設定 RichTextBox 的顏色，在您移動 GridSplitter 時，反白顯示應用程式下半部的大小。

若要加入方格面板及控制項

在 [設計] 檢視中，選取 Grid。
從 [工具箱] 中拖曳一個 Grid 控制項至 Grid。
在 [屬性] 視窗中，為新的 Grid 設定下列屬性：

屬性

值

Grid.Column

0

Grid.ColumnSpan

1

Grid.Row

2

Grid.RowSpan

1

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

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

[集合編輯器] 隨即出現。
按兩次 [加入] 加入兩個資料行。
將第二個資料行的 [Width] 屬性設定為 [Auto]。
按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。
從 [工具箱] 中拖曳一個 Button 控制項至 Grid。
在 [屬性] 視窗中，為 Button 設定下列屬性：

屬性

值

內容

OK

Grid.Column

1

Grid.ColumnSpan

1

Grid.Row

0

Grid.RowSpan

1

Width

60

Height

60

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

5
從 [工具箱] 中拖曳 RichTextBox 控制項至 Grid。

屬性	值
內容	OK
Grid.Column	1
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	60
Height	60
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	5

在 [屬性] 視窗中，為 RichTextBox 設定下列屬性：

屬性	值
背景	PaleGoldenrod (#FFEEE8AA)
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0
IsReadOnly	False (未核取)

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

測試應用程式

最後的程序是測試應用程式。

若要測試應用程式

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

應用程式會啟動且 [MainWindow] 隨即出現。
同時調整視窗的水平和垂直大小。

應用程式的上半部和下半部可以展開及收合，以使用可用的空間。
拖曳分隔器以重新調整應用程式各部分的大小。讓應用程式的其中一個部分看起來比其他部分小。
再次調整視窗大小。

應用程式的上半和下半部可以視分隔器所位在的位置，按比例展開及收合。
盡可能將分隔器拖曳至離應用程式頂端遠一點的位置。

應用程式的上半部會消失，只顯示下半部。
盡可能將分隔器拖曳至離應用程式底部遠一點的位置。

應用程式的下半部還是會顯示。這是因為您將第三個資料列的 [MinHeight] 屬性設定為 70。

注意

70 = 60 (按鈕的高度) + 5 (按鈕的上邊界) + 5 (按鈕的下邊界)

關閉視窗。

整合在一起

下面是已完成的 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="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="70" />
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Name="DockPanel1">
            <Label DockPanel.Dock="Top" Height="23" Width="Auto" Background="Blue" Foreground="White" Name="Label1">Display</Label>
            <RichTextBox DockPanel.Dock="Bottom" Height="Auto" Width="Auto" Background="LightBlue" IsReadOnly="True" Name="RichTextBox1" />
        </DockPanel>
        <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
        <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Name="Grid1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Margin="5" Width="60" Height="60" Name="Button1">OK</Button>
            <RichTextBox Grid.Column="0" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="RichTextBox2" />
        </Grid>
    </Grid>
</Window>

後續步驟

您在此逐步解說中所建立的應用程式，內含一個水平分隔視窗。您可以嘗試改用垂直分隔視窗，建立同樣的應用程式。

您所建立的應用程式只是用來示範配置的技巧。您可以加入程式碼，嘗試讓應用程式具備功能性。例如，您可以將程式碼加入至按鈕 Click 事件，此事件會將文字從底部的文字方塊複製至頂端的文字方塊。

請參閱

共用方式為