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

  • [アーティクル]

この例からは、垂直 GridSplitter を正しく作成することで、Grid の寸法を変更することなく、Grid 内の 2 つの列間のスペースを再配分する方法がわかります。

例

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

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

関連項目