comment(本記事はVisualStudio2012RC+Windows8RP環境で確認しております。製品版では動作が異なる可能性があるのでご注意ください。)今回はGridレイアウトについておさらいします。GridやCanvas、StackPanelはレイアウトを決める重要なコントロールですが、意外とちゃんと理解しないままで使っている人も多いですよね(俺だけか・・・)。Grid基礎Gridを横に区切るにはRowDefinitionsを利用します。150pxの高さで画面を区切っています。それぞれの区切りにCanvasを配置しているのですが、Grid.Rowプロパティで何番目のRowDefinitionの対応しているかを定義しています。実行すると以下のような結果が得られます。直観的な結果ではないでしょうか。縦方向への区切りを入れたい場合は同様にColumnDefinitionsで定義します。</Grid>このコードの実行結果は以下のようになります。RowDefinition(ColumnDefinition)の指定の仕方にAutoと*(スター)という指定方法があります。Autoは要素の大きさに応じて自動で幅を変える指定です。上記レイアウトの実行結果が以下です。内包するCanvasに指定したHeightプロパティに応じて高さが調整されました。以下のようにCanvasにHeightプロパティを指定しないと画面上にはGridが表示されない(高さ0として表示される)ので注意しましょう。</Grid>Auto指定で子要素の高さ指定がない場合Gridで指定した幅の残りを埋めるように拡張させる指定が*(スター)です。これはコードと実行結果を見た方がわかりやすいでしょう。</Grid>2段目のRowが画面幅に合わせて拡張されます。*は比率を指定することもできます。</Grid>上の場合、2つめのRowが2、3つめが1の比率になるように調整されます。2段目の行と3段目の行が2:1の割合で配置されたコードビハインドからの指定コードビハインドから動的にGridの定義を変更する場合は以下のように行います。以下のようなレイアウトのグリッドがあるとします。</Grid>2つめのCanvasは高さ300の指定がされているにも関わらずGridでは高さが100しかありません。実行結果は当然Canvasがはみ出してしまいます。2つめのRowにAutoの指定をしたい場合は以下のように指定します。GridLength.Auto;RowDefinitionsは配列として要素にアクセスできます。(XAML上のRowDefinitionにx:Name属性を与えて直接アクセルすることもできます)Auto指定が効いてGridが拡張されました。今度はピクセル指定をしてみましょう。XAMLコードは前述と同じとします。def;実行結果は以下です。Canvas(青)の指定は300ピクセルですがGridの幅を400ピクセルに指定したため、上下に空きが発生しました。*(スター)指定ですスクロールバーを表示する先ほどの青色のCanvasがはみ出したXAMLのケースで、Autoで自動で拡張するのではなく、高さを100ピクセルのままでスクロールバーを表示させたい場合があるでしょう。その場合はScrollViewを利用して以下のように記述します。</Grid>実行するとスクロールバーが表示されているのがわかると思います。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*Website古代魚庵という屋号でフリーランスのプログラマー兼ライター業をやっています。