共用方式為


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

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

重要

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

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

使用設計工具

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

注意

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

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

  1. 在 WPF Designer中,選擇 Grid 控制項。

  2. 將指標放在側邊滑軌的外側邊緣。 指標會變為十字型游標並顯示格線,指出將加入資料列的位置。

  3. 按一下滑軌以設定資料列。

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

    提示

    您可以拖曳方格內的格線或滑軌中的格線指示區,調整資料列的大小。

  4. (選擇性) 重複步驟 2 和 3 加入多個資料列。

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

  1. 在 WPF Designer中,選擇 Grid 控制項。

  2. 將指標放在上側滑軌的頂端邊緣。 指標會變為十字型游標並顯示格線,指出將加入資料行的位置。

  3. 按一下滑軌以設定資料行。

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

    提示

    您可以拖曳方格內的格線或滑軌中的格線指示區,調整資料行的大小。

  4. (選擇性) 重複步驟 2 和 3 加入多個資料行。

使用集合編輯器

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

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

  1. 在 WPF Designer中,選擇 Grid 控制項。

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

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

  3. 按一下 [加入] 加入新的資料列。

  4. (選擇性) 設定資料列的屬性。

  5. (選擇性) 重複步驟 3 和 4 加入更多資料列。

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

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

  1. 在 WPF Designer中,選擇 Grid 控制項。

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

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

  3. 按一下 [加入] 加入新的資料行。

  4. (選擇性) 設定資料行的屬性。

  5. (選擇性) 重複步驟 3 和 4 加入更多資料行。

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

使用 XAML 編輯器

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

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

  1. 在 XAML 編輯器中,找出 Grid 項目。

  2. 加入 Grid.RowDefinitions 項目做為 Grid 項目的子系。 程式碼外觀應為:

    <Grid>
        <Grid.RowDefinitions>
        </Grid.RowDefinitions>
    </Grid>
    
  3. 加入 RowDefinition 項目。 下列標記顯示範例:

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

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

  1. 在 XAML 編輯器中,找出 Grid 項目。

  2. 加入 Grid.ColumnDefinitions 項目做為 Grid 項目的子系。 程式碼外觀應為:

    <Grid>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
    </Grid>
    
  3. 加入 ColumnDefinition 項目。 下列標記顯示範例:

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

請參閱

工作

逐步解說:建構動態配置

概念

WPF 設計工具中的對齊方式

使用絕對和動態位置進行配置

其他資源

WPF 容器控制項