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

  • 發行項

這個範例示範如何使用水準 GridSplitter 來重新分配 中 Grid 兩個數據列之間的空間，而不變更 的 Grid 維度。

範例

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

若要指定 ，請將附加屬性設定 Row 為您要調整大小的 Grid 其中一個資料列，以調整 GridSplitter 相鄰資料列的大小。 Grid如果您的資料行超過一個，請設定 ColumnSpan 附加屬性以指定資料行數目。 然後將 設定 VerticalAlignment 為 Top 或 Bottom （您設定的對齊方式取決於您要調整大小的兩個數據列）。 最後，將 HorizontalAlignment 屬性設定為 Stretch 。

下列範例示範如何定義調整相鄰資料列大小的水準 GridSplitter 。

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

GridSplitter不佔用其本身資料列的 Grid ，可能會被 中的其他控制項遮蔽。 如需有關如何防止此問題的詳細資訊，請參閱確保 GridSplitter 是可見的。

如何建立佔有資料列的 GridSplitter

若要指定 GridSplitter 中佔用資料列的 Grid ，請將 Row 附加屬性設定為您要調整大小的其中一個資料列。 Grid如果您的資料行超過一個，請將 ColumnSpan 附加屬性設定為欄數。 然後將 設定為 ，將 屬性設定 VerticalAlignment 為 Stretch ，並將包含 GridSplitter 的資料列的 設定 Height 為 Auto 。 HorizontalAlignmentCenter

下列範例示範如何定義佔據資料列的水準 GridSplitter ，並調整其任一端的資料列大小。

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

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

另請參閱