方法 : グリッドに行と列を追加する
[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]
Windows Presentation Foundation (WPF) の Grid コントロールでは、グリッドベースのレイアウトを作成することにより、コントロールの位置をすばやく簡単に決定したり調整したりできます。 デザイン時に、WPF Designerで Grid コントロールに行と列を追加できます。既定では、新しい行と列は Star サイズ変更を使用します。
重要
行または列にコンテンツを追加する前に行または行のサイズを Auto に設定すると、この行または列はデザイナーに表示されません。このため、正しい行または列にコントロールを配置することが難しくなります。これ以降、このような動作を回避するには、作業中はスター サイズ変更を使用し、作業の終了時に Auto に変更します。
ここでは、Grid に行と列を追加する 3 つの方法を示します。 グリッドから行と列を削除することもできます。 詳細については、「方法 : グリッドから行と列を削除する」を参照してください。
デザイナーの使用
WPF Designerで Grid コントロールを選択すると、レールが上側と左側に表示されます。 このレールを使用して、Grid に直接行と列を追加できます。 XAML ビューは、新しい行と列で自動的に更新されます。
注意
FlowDirection プロパティが RightToLeft に設定されている場合、行のレールは Grid の右側に表示されます。
デザイナーを使用してグリッドに行を追加するには
WPF Designerで、Grid コントロールを選択します。
サイド レールの外側の縁の上にポインターを置きます。 ポインターが十字カーソルに変わり、行が追加される位置を示すグリッド線が表示されます。
レールをクリックして行を設定します。
グリッド線がその場所に固定され、グリッド線インジケーターがグリッド線の端のレール上に表示されます。
ヒント
グリッド内のグリッド線またはレール内のグリッド線インジケーターをドラッグすることにより、行のサイズを調整できます。
(省略可能) 追加する行が複数ある場合は、手順 2. と手順 3. を繰り返します。
デザイナーを使用してグリッドに列を追加するには
WPF Designerで、Grid コントロールを選択します。
上部レールの上端の上にポインターを置きます。 ポインターが十字カーソルに変わり、列が追加される位置を示すグリッド線が表示されます。
レールをクリックして、列を設定します。
グリッド線がその場所に固定され、グリッド線インジケーターがグリッド線の端のレール上に表示されます。
ヒント
グリッド内のグリッド線またはレール内のグリッド線インジケーターをドラッグすることにより、列のサイズを調整できます。
(省略可能) 追加する列が複数ある場合は、手順 2. と手順 3. を繰り返します。
コレクション エディターの使用
コレクション エディターを使用して、Grid に行と列を追加することもできます。 コレクション エディターを使用して行と列を構成すると、デザイン ビューと XAML ビューが自動的に更新されます。
コレクション エディターを使用してグリッドに行を追加するには
WPF Designerで、Grid コントロールを選択します。
[プロパティ] ウィンドウで RowDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。
[コレクション エディター] ダイアログ ボックスが表示されます。
[追加] をクリックし、新しい行を追加します。
(省略可能) 行のプロパティを設定します。
(省略可能) 追加する行が複数ある場合は、手順 3. と手順 4. を繰り返します。
[OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。
コレクション エディターを使用してグリッドに列を追加するには
WPF Designerで、Grid コントロールを選択します。
[プロパティ] ウィンドウで ColumnDefinitions プロパティを見つけ、プロパティの値列の省略記号ボタンをクリックします。
[コレクション エディター] ダイアログ ボックスが表示されます。
[追加] をクリックし、新しい列を追加します。
(省略可能) 列のプロパティを設定します。
(省略可能) 追加する列が複数ある場合は、手順 3 と手順 4. を繰り返します。
[OK] をクリックして [コレクション エディター] を閉じ、WPF Designerに戻ります。
XAML エディターの使用
XAML に直接入力することにより、Grid に行と列を追加することもできます。 デザイン ビューは、新しい行と列で自動的に更新されます。
XAML エディターを使用してグリッドに行を追加するには
XAML エディターで、Grid 要素を見つけます。
Grid 要素の子として Grid.RowDefinitions 要素を追加します。 コードは、次のようになります。
<Grid> <Grid.RowDefinitions> </Grid.RowDefinitions> </Grid>RowDefinition 要素を追加します。 例を次に示します。
<Grid.RowDefinitions> <RowDefinition Height="100" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="5*" /> </Grid.RowDefinitions>
XAML エディターを使用してグリッドに列を追加するには
XAML エディターで、Grid 要素を見つけます。
Grid 要素の子として Grid.ColumnDefinitions 要素を追加します。 コードは、次のようになります。
<Grid> <Grid.ColumnDefinitions> </Grid.ColumnDefinitions> </Grid>ColumnDefinition 要素を追加します。 例を次に示します。
<Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="5*" /> </Grid.ColumnDefinitions>