Gridパネル[Auto][XAML]

2017年9月4日

C#

Gridパネルを利用した基本的なレイアウトの方法を説明します。

 

スポンサーリンク

 

 

Gridパネルは、行と列による格子状のレイアウトを構成していくコントロールです。その格子に沿ってボタンなどの各種コントロールを配置していくことができます。このようにコントロールを配置するためのコントロールをコンテナーと呼びます。コンテナーコントロールには他にもStackPanel、GridView、SplitViewなどがあります。

 

下記例のコードは全て、ウィンドウサイズを300px(高さ)× 300px(横)に設定しています。

 

 

<Grid.ColumnDefinitions>で列を、<Grid.RowDefinitions>で行を定義しています。

 

<Grid.ColumnDefinitions>の子要素である<ColumnDefinition />の数が実際の列数となります。またそのプロパティとして、Widthを指定することによって、各列の幅を設定できます。

 

同様に、<Grid.RowDefinitions>の子要素である<RowDefinition />の数が実際の行数となります。そのプロパティとして、Heightを指定することによって、各行の高さを設定できます。

 

 

*とAuto


 

HeightおよびWidthには数値の他に「*(スター)」を利用して高さや幅を指定することができます。下記の例では1列目は50px、2列/3列目は残りの幅(300-50=250px)をちょうど二分割するように設定しています。

 

 

 

次の例では残りの幅(300-50=250px)を1:2に設定しています。このように*(スター)を利用することによって、固定サイズではない残りの領域を比率として設定することができます。

 

 

 

またHeightおよびWidthに「Auto」を指定すると、その子要素の内容に依存した高さと横の指定ができます。この具体例については本記事の最後に説明します。

 

 

 

Buttonコントロールを配置


 

次にGrid上に具体的にボタン(Buttonコントロール)を配置してみます。

 

 

Gridつまり格子状にコントロールを配置するには、どの行および列に配置するのかを指定する必要があります。行はGrid.Rowプロパティ、列はGrid.Columnプロパティを利用します。

 

15行目

上記コードでは3つのボタンを配置しています。例えば3つ目のボタンは、0から数えて2番目の行(Grid.Row=”2″)、同様に0から数えて1番目の列(Grid.Column=”1″)にボタンを配置しています。この様に親のコントロールに対して指定するプロパティを添付プロパティと呼びます。

 

 

複数の行や列をまたがってボタンを配置する


 

次に先ほど配置したボタンを、複数のグリッドにまたがって配置してみます。この場合、Grid.RowSpanプロパティおよびGrid.ColumnSpanプロパティを利用します。

 

 

13行目
Grid.Row=”0″ Grid.Column=”0″の領域を起点として、その下(次の行)の領域であるGrid.Row=”0″ Grid.Column=”1″の2行分を1つまとめています。

 

15行目
同じくGrid.Row=”2″ Grid.Column=”1″の領域を起点として、その横(隣の列)の領域であるGrid.Row=”2″ Grid.Column=”2″の2列分を1つにまとめています。

 

 

最後に、上述した<RowDefinition />のHeightプロパティにAutoを設定してみます。

 

 

 

10行目

HeightプロパティにAutoを設定しています。この領域に3つ目のボタン(15行目)をHeight=”80″に設定して配置しています。このようにAutoを指定された<RowDefinition  />の高さおよび横幅は、その子要素の内容に依存するようになります。

 

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー