方法 : グリッドに行と列を追加する

  • [アーティクル]

更新 : 2007 年 11 月

Windows Presentation Foundation (WPF) の Grid コントロールでは、グリッドベースのレイアウトを作成することにより、コントロールの位置をすばやく簡単に決定したり調整したりできます。デザイン時に、WPF デザイナで Grid コントロールに行と列を追加できます。既定では、新しい行と列は Star サイズ変更を使用します。

Bb514525.alert_caution(ja-jp,VS.90).gif重要 :

行または列にコンテンツを追加する前に行または行のサイズを Auto に設定すると、この行または列はデザイナに表示されません。このため、正しい行または列にコントロールを配置することが難しくなります。これ以降、このような動作を回避するには、作業中はスター サイズ変更を使用し、作業の終了時に Auto に変更します。

ここでは、Grid に行と列を追加する 3 つの方法を示します。グリッドから行と列を削除することもできます。詳細については、「方法 : グリッドから行と列を削除する」を参照してください。

デザイナの使用

WPF デザイナで Grid コントロールを選択すると、レールが上側と左側に表示されます。このレールを使用して、Grid に直接行と列を追加できます。XAML ビューは、新しい行と列で自動的に更新されます。

Bb514525.alert_note(ja-jp,VS.90).gifメモ :

FlowDirection プロパティが RightToLeft に設定されている場合、行のレールは Grid の右側に表示されます。

デザイナを使用してグリッドに行を追加するには

  1. WPF デザイナで、Grid コントロールを選択します。

  2. サイド レールの外側の縁の上にポインタを置きます。ポインタが十字カーソルに変わり、行が追加される位置を示すグリッド線が表示されます。

  3. レールをクリックして行を設定します。

    グリッド線がその場所に固定され、グリッド線インジケータがグリッド線の端のレール上に表示されます。

    Bb514525.alert_note(ja-jp,VS.90).gifヒント :

    グリッド内のグリッド線またはレール内のグリッド線インジケータをドラッグすることにより、行のサイズを調整できます。

  4. (省略可能) 追加する行が複数ある場合は、手順 2. と手順 3. を繰り返します。

デザイナを使用してグリッドに列を追加するには

  1. WPF デザイナで、Grid コントロールを選択します。

  2. 上部レールの上端の上にポインタを置きます。ポインタが十字カーソルに変わり、列が追加される位置を示すグリッド線が表示されます。

  3. レールをクリックして、列を設定します。

    グリッド線がその場所に固定され、グリッド線インジケータがグリッド線の端のレール上に表示されます。

    Bb514525.alert_note(ja-jp,VS.90).gifヒント :

    グリッド内のグリッド線またはレール内のグリッド線インジケータをドラッグすることにより、列のサイズを調整できます。

  4. (省略可能) 追加する列が複数ある場合は、手順 2. と手順 3. を繰り返します。

コレクション エディタの使用

コレクション エディタを使用して、Grid に行と列を追加することもできます。コレクション エディタを使用して行と列を構成すると、デザイン ビューと XAML ビューが自動的に更新されます。

コレクション エディタを使用してグリッドに行を追加するには

  1. WPF デザイナで、Grid コントロールを選択します。

  2. [プロパティ] ウィンドウで RowDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディタ] ダイアログ ボックスが表示されます。

  3. [追加] をクリックし、新しい行を追加します。

  4. (省略可能) 行のプロパティを設定します。

  5. (省略可能) 追加する行が複数ある場合は、手順 3. と手順 4. を繰り返します。

  6. [OK] をクリックして [コレクション エディタ] を閉じ、WPF デザイナに戻ります。

コレクション エディタを使用してグリッドに列を追加するには

  1. WPF デザイナで、Grid コントロールを選択します。

  2. [プロパティ] ウィンドウで ColumnDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。

    [コレクション エディタ] ダイアログ ボックスが表示されます。

  3. [追加] をクリックし、新しい列を追加します。

  4. (省略可能) 列のプロパティを設定します。

  5. (省略可能) 追加する列が複数ある場合は、手順 3 と手順 4. を繰り返します。

  6. [OK] をクリックして [コレクション エディタ] を閉じ、WPF デザイナに戻ります。

XAML エディタの使用

XAML に直接入力することにより、Grid に行と列を追加することもできます。デザイン ビューは、新しい行と列で自動的に更新されます。

XAML エディタを使用してグリッドに行を追加するには

  1. XAML エディタで、Grid 要素を見つけます。

  2. Grid 要素の子として Grid.RowDefinitions 要素を追加します。コードは、次のようになります。

    <Grid>
    <Grid.RowDefinitions>
    </Grid.RowDefinitions>
</Grid>

  3. RowDefinition 要素を追加します。例を次に示します。

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

XAML エディタを使用してグリッドに列を追加するには

  1. XAML エディタで、Grid 要素を見つけます。

  2. Grid 要素の子として Grid.ColumnDefinitions 要素を追加します。コードは、次のようになります。

    <Grid>
    <Grid.ColumnDefinitions>
    </Grid.ColumnDefinitions>
</Grid>

  3. ColumnDefinition 要素を追加します。例を次に示します。

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>

参照

処理手順

チュートリアル : 動的レイアウトの構築

概念

WPF デザイナでの整列

絶対配置と動的配置によるレイアウト

その他の技術情報

WPF コンテナ コントロール