方法: GridSplitter を使用して行のサイズを変更する

  • [アーティクル]

この例からは、水平 GridSplitter を使用することで、Grid の寸法を変更することなく、Grid 内の 2 つの行間のスペースを再配分する方法がわかります。

例

行の端に重なって表示される GridSplitter を作成する方法

Grid 内で隣接する行のサイズを変更する GridSplitter を指定するには、サイズを変更する行の 1 つに Row 添付プロパティを設定します。 Grid に複数の列がある場合は、ColumnSpan 添付プロパティを設定して列の数を指定します。 次に、VerticalAlignment を Top または Bottom に設定します (どちらの配置にするかは、サイズを変更する 2 つの行によって決まります)。 最後に、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 を作成する方法

Grid 内の行を占有する GridSplitter を指定するには、サイズを変更する行の 1 つに Row 添付プロパティを設定します。 Grid に複数の列がある場合、ColumnSpan 添付プロパティを列の数に設定します。 次に VerticalAlignment を Center に設定し、HorizontalAlignment プロパティを Stretch に設定し、GridSplitter が含まれる行の Height を Auto に設定します。

次の例では、ある行を占有し、その両側の行のサイズを変更する水平 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"/>

関連項目