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

更新 : 2007 年 11 月

この例では、Grid の寸法を変更せずに Grid 内の列の間で領域を再配分するために垂直 GridSplitter を作成する方法を示します。

使用例

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

Grid 内の隣接する列のサイズを変更する GridSplitter を指定するには、サイズを変更する列の 1 つに Column添付プロパティを設定します。Grid に複数の行がある場合は、RowSpan 添付プロパティに行の数を設定します。次に、HorizontalAlignment プロパティを Left または Right に設定します (どちらの配置に設定するかはサイズを変更する 2 列によって異なります)。最後に、VerticalAlignment のプロパティを Stretch に設定します。

隣接する列のサイズを変更するための垂直 GridSplitter を定義する方法を次の例に示します。サンプル全体については、「行と列のサイズを変更する GridSplitter のサンプル」を参照してください。

<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 を定義する方法を次の例に示します。サンプル全体については、「行と列のサイズを変更する GridSplitter のサンプル」を参照してください。

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


...


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

参照

参照

GridSplitter

その他の技術情報

GridSplitter のサンプル

GridSplitter に関する「方法」トピック