操作說明：使用 GridSplitter 調整資料行的大小

  • 發行項

這個範例顯示如何使用垂直 GridSplitter，在不變更 Grid 維度的情況下轉散布 Grid 中兩個資料行之間的空間。

範例

如何建立重疊資料行邊緣的 GridSplitter

若要指定會調整 Grid 中相鄰資料行大小的 GridSplitter，請將 Column 附加屬性設定為您想調整大小的其中一個資料行。 如果您的 Grid 有多個資料列，請將 RowSpan 附加屬性設定為資料列的數目。 然後將 HorizontalAlignment 屬性設定為 Left 或 Right (所設定的對齊方式取決於您要調整大小的兩個資料行)。 最後，將 VerticalAlignment 屬性設定為 Stretch。

<GridSplitter Grid.Column="1" 
              Grid.RowSpan="3" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="true"
              Width="5"/>

沒有自己資料行的 GridSplitter，可能會被 Grid 中的其他控制項遮蔽。 如需有關如何防止此問題的詳細資訊，請參閱確保 GridSplitter 是可見的。

如何建立佔有資料行的 GridSplitter

若要指定會在 Grid 中佔據資料行的 GridSplitter，請將 Column 附加屬性設定為您想調整大小的其中一個資料行。 如果您的 Grid 有多個資料列，請將 RowSpan 附加屬性設定為資料列的數目。 然後將 HorizontalAlignment 設定為 Center、將 VerticalAlignment 屬性設定為 Stretch，並將包含 GridSplitter 資料行的 Width 設定為 Auto。

下列範例顯示如何定義會佔據一個資料行並調整其兩端資料行大小的垂直 GridSplitter。

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

另請參閱