HOW TO：在方格中加入資料列和資料行

發行項
05/28/2012

Windows Presentation Foundation (WPF) Grid 控制項可讓您透過建立方格架構之配置的方式，迅速輕鬆地定位和對齊控制項。在設計階段，您可以在 WPF Designer中將資料列和資料行加入至 Grid 控制項。根據預設，新的資料列和資料行會使用 Star 縮放。

重要

如果您在將內容加入至資料列或資料行之前，就先將其大小設定為 Auto，在設計工具中就看不到該資料列或資料行。這樣就很難將控制項定位在正確的資料列或資料行中。如果要避免這種情況，您可以在工作時使用星號大小，並於完成時變更為 Auto。

本主題探討您可以將資料列及資料行加入至 Grid 的三種方法。您也可以移除方格中的資料列及資料行。如需詳細資訊，請參閱 HOW TO：從方格移除資料列和資料行.

使用設計工具

在 WPF Designer中，當您選取 Grid 控制項時，滑軌會顯示在頂端和左側。您可以使用滑軌，將資料列及資料行直接加入至 Grid。 [XAML] 檢視會自動更新為新的資料列和資料行。

注意

如果 [FlowDirection] 屬性設定為 [RightToLeft]，則資料列的滑軌就會顯示在 Grid 的右側。

若要使用設計工具將資料列加入至方格

在 WPF Designer中，選擇 Grid 控制項。
將指標放在側邊滑軌的外側邊緣。指標會變為十字型游標並顯示格線，指出將加入資料列的位置。
按一下滑軌以設定資料列。

格線會就地固定，格線指示區會出現在格線末端的滑軌中。

提示

您可以拖曳方格內的格線或滑軌中的格線指示區，調整資料列的大小。
(選擇性) 重複步驟 2 和 3 加入多個資料列。

若要使用設計工具將資料行加入至方格

在 WPF Designer中，選擇 Grid 控制項。
將指標放在上側滑軌的頂端邊緣。指標會變為十字型游標並顯示格線，指出將加入資料行的位置。
按一下滑軌以設定資料行。

格線會就地固定，格線指示區會出現在格線末端的滑軌中。

提示

您可以拖曳方格內的格線或滑軌中的格線指示區，調整資料行的大小。
(選擇性) 重複步驟 2 和 3 加入多個資料行。

使用集合編輯器

您也可以使用集合編輯器，將資料列及資料行加入至 Grid。當您使用集合編輯器設定資料列及資料行時，[設計] 檢視及 [XAML] 檢視會自動更新。

若要使用集合編輯器將資料列加入至方格

在 WPF Designer中，選擇 Grid 控制項。
在 [屬性] 視窗中，找出 [RowDefinitions] 屬性，然後按一下屬性值資料行中的省略符號按鈕。

[集合編輯器] 對話方塊隨即出現。
按一下 [加入] 加入新的資料列。
(選擇性) 設定資料列的屬性。
(選擇性) 重複步驟 3 和 4 加入更多資料列。
按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

若要使用集合編輯器將資料行加入至方格

在 WPF Designer中，選擇 Grid 控制項。
在 [屬性] 視窗中，找出 [ColumnDefinitions] 屬性，然後按一下屬性值資料行中的省略符號按鈕。

[集合編輯器] 對話方塊隨即出現。
按一下 [加入] 加入新的資料行。
(選擇性) 設定資料行的屬性。
(選擇性) 重複步驟 3 和 4 加入更多資料行。
按一下 [確定] 關閉 [集合編輯器]，並返回 WPF Designer。

使用 XAML 編輯器

您也可以在 XAML 編輯器中輸入，以手動方式將資料列及資料行加入至 Grid。 [設計] 檢視會自動更新為新的資料列和資料行。

若要使用 XAML 編輯器將資料列加入至方格

在 XAML 編輯器中，找出 Grid 項目。
加入 Grid.RowDefinitions 項目做為 Grid 項目的子系。程式碼外觀應為：
```
<Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>
```

加入 RowDefinition 項目。下列標記顯示範例：

<Grid.RowDefinitions>
    <RowDefinition Height="100" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="5*" />
</Grid.RowDefinitions>

若要使用 XAML 編輯器，將資料行加入至方格

在 XAML 編輯器中，找出 Grid 項目。
加入 Grid.ColumnDefinitions 項目做為 Grid 項目的子系。程式碼外觀應為：
```
<Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>
```

加入 ColumnDefinition 項目。下列標記顯示範例：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

請參閱

共用方式為