コントロールの配置の基本2

前回の記事で、コントロールの配置について少し触れました。

デザイン画面で適当にドラッグして配置すると、画面サイズを変えた時にレイアウトが崩れたりすることがあります。

ということで、今回はWPFのレイアウトの基本についてもう少し詳しく見ていきたいと思います。

まずは、前回のデザイン画面を見てみます。

と言っても、今回は下半分のXAML部分を見ていきます。


前回にも書きましたが、XAMLはデザインの状態をXMLで表現したものになっています。
（XMLについて知らない場合は…ググってきてください（笑　）

前回のものは以下のようになっていました。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Grid>
        <Button Content="Button"
                Margin="213,145,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="75" />
    </Grid>
</Window>

まぁ、色々書かれているわけですが、余計なものを消してシンプルにすると…

<Window>
    <Grid>
        <Button />
    </Grid>
</Window>

という形になっています。

上記の場合ですと、Windowという要素の子要素にGrid要素があり、さらにその子要素にButton要素があります。

Gridというのが何かはとりあえず置いておいて、Windowの中にButtonがある、というのがなんとなくわかったと思います。

このようにXAML上では、XMLでWindowの構造を親子階層で記述されたものになっています。

基本的なルールは

• <○○>が開始で、/を入れた</○○>で終了（上記のWindowとGridが該当）
• 子がない場合は<○○ />と省略可能（上記のButtonが該当）

です。

そして、”余計なもの” として消したものはその要素（コントロール）のプロパティ（設定）を表しています。
（Windowのx:Classとか、xmlns～とかの上3行は、今はおまじないみたいなものと思っておいてください。）

なるほど、じゃあWindowのタグの中にいっぱい子として追加していけば良いんだね！

と思ってしまいそうですがここで注意。

なんと…Windowは子を一つしか持てません。

このように、実はコントロールによっては子を一つしか持てなかったり複数持てたりするものがあります。

でも、Windowにボタンとか、いっぱい置けますよね？

なぜだろう・・・


理由は、実は先ほど話をスルーしたGridが活躍しているからです。

Gridは複数の子が持てるパネルという種類のコントロールです。

ボタンのように、それ自身が何かあるわけではなく、各コントロールを配置する入れ物のような存在です。

ですので、一般的な画面の場合、

Windowの子にパネルを配置し、その中に各コントロールを配置する

というのが、WPFのレイアウトの基本になります。


実は例外もあり、さらにはパネルという種類のコントロールもGrid以外にもいくつかあります。


長くなりそうなので、今日はこの辺で。
 
次の記事では他のパネルについて具体例を出しながら見ていきます。