XAML-GridPanel

グリッドパネルは、行と列で構成される柔軟な領域を提供します。グリッドでは、子要素を表形式で配置できます。 Grid.Row および Grid.Column プロパティを使用して、特定の行および列に要素を追加できます。

デフォルトでは、グリッドパネルは1行1列で作成されます。 RowDefinitions および ColumnDefinitions プロパティを使用して、複数の行と列を作成できます。行の高さと列の幅は、次の3つの方法で定義することができます-

固定値-固定サイズの論理ユニット（1/96インチ）を割り当てる
自動-その特定の行/列のコントロールに必要なスペースだけが必要です。
スター（）*-自動および固定サイズがいっぱいになると、残りのスペースが必要になります。

Gridクラスの階層継承は次のとおりです-

グリッド階層

プロパティ

以下は、Gridクラスで一般的に使用されるプロパティです。

Sr.No.	Property & Description
1	Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。（Panelから継承）
2	Children このPanelの子要素のUIElementCollectionを取得します。（Panelから継承されます。）
3	ColumnDefinitions Gridのこのインスタンスで定義されたColumnDefinitionオブジェクトのリストを取得します。
4	Height 要素の推奨される高さを取得または設定します。（FrameworkElementから継承されます。）
5	ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。
6	ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。
7	Margin 要素の外側の余白を取得または設定します。（FrameworkElementから継承されます。）
8	Name 要素の識別名を取得または設定します。この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。（FrameworkElementから継承されます。）
9	Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。
10	Parent この要素の論理的な親要素を取得します。（FrameworkElementから継承されます。）
11	Resources ローカルに定義されたリソースディクショナリを取得または設定します。（FrameworkElementから継承されます。）
12	RowDefinitions Gridのこのインスタンスで定義されたRowDefinitionオブジェクトのリストを取得します。
13	Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。（FrameworkElementから継承されます。）
14	Width 要素の幅を取得または設定します。（FrameworkElementから継承されます。）

方法

以下に一般的に使用されるグリッドクラスのメソッドを示します。

Sr.No.	Method & Description
1	GetColumn 指定されたFrameworkElementからGrid.Column XAML添付プロパティの値を取得します。
2	GetColumnSpan 指定されたFrameworkElementからGrid.ColumnSpan XAML添付プロパティの値を取得します。
3	GetRow 指定されたFrameworkElementからGrid.Row XAML添付プロパティの値を取得します。
4	SetColumn 指定されたFrameworkElementのGrid.Column XAML添付プロパティの値を設定します。
5	SetRow 指定されたFrameworkElementのGrid.Row XAML添付プロパティの値を設定します。
6	SetRowSpan 指定されたFrameworkElementのGrid.RowSpan XAML添付プロパティの値を設定します。

例

次の例は、子要素をグリッドに追加して表形式で指定する方法を示しています。グリッドの最初の列にテキストブロックが追加され、グリッドの2番目の列にテキストボックスが追加されるXAML実装を次に示します。

<Window x:Class = "XAMLGrid.Window1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "Window1" Height = "300" Width = "604">

   <Grid x:Name = "FormLayoutGrid" Background = "LightGray">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "Auto"/>
         <ColumnDefinition/>
      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <TextBlock Grid.Row = "0" Grid.Column = "0" Text = "Name"
         Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center"
         Width = "100"/>

      <TextBox Grid.Row = "0" Grid.Column = "1" Margin = "10"/>
      <TextBlock Grid.Row = "1" Grid.Column = "0" Text = "ID" Margin = "10"
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/>

      <TextBox Grid.Row = "1" Grid.Column = "1" Margin = "10"/>
      <TextBlock Grid.Row = "2" Grid.Column = "0" Text = "Age" Margin = "10"
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/>

      <TextBox Grid.Row = "2" Grid.Column = "1" Margin = "10"/>
   </Grid>

</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます。

グリッド出力

上記のサンプルコードを実行し、他のプロパティも試してみることをお勧めします。

レイアウトのネスト

レイアウトのネストとは、別のレイアウト内でレイアウトパネルを使用することです。たとえば、グリッド内でスタックパネルを定義します。この概念は、アプリケーションで複数のレイアウトを活用するために広く使用されています。

例

次の例では、グリッド内でスタックパネルを使用します。次のXAMLコードを見てみましょう-

<Window x:Class = "XAMLNestingLayouts.Window1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "Window1" Height = "300" Width = "604">

   <Grid Background = "LightGray">
      <Grid.RowDefinitions>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

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

      <Label Content = "Employee Info" FontSize = "15" FontWeight = "Bold"
         Grid.Column = "0" Grid.Row = "0"/>

      <StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal">
         <Label Content = "Name"  VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtName" Text = "Muhammad Ali"
            VerticalAlignment = "Center" Width = "200"></TextBox>
      </StackPanel>

      <StackPanel Grid.Column = "0" Grid.Row = "2" Orientation = "Horizontal">
         <Label Content = "ID" VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtCity" Text = "421" VerticalAlignment = "Center"
            Width = "50"></TextBox>
      </StackPanel>

      <StackPanel Grid.Column = "0" Grid.Row = "3" Orientation = "Horizontal">
         <Label Content = "Age" VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtState" Text = "32" VerticalAlignment = "Center"
            Width = "50"></TextBox>
      </StackPanel>

      <StackPanel Grid.Column = "0" Grid.Row = "4" Orientation = "Horizontal">
         <Label Content = "Title" VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtCountry" Text = "Programmer"
            VerticalAlignment = "Center" Width = "20></TextBox>
      </StackPanel>
   </Grid>

</Window>

上記のコードをコンパイルして実行すると、次の出力が生成されます-

ネスティングレイアウト

上記のサンプルコードを実行し、他のいくつかのネストレイアウトを試すことをお勧めします。

Xaml-gridpanel

目次

XAML-GridPanel

プロパティ

方法

例

レイアウトのネスト

例