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

さて、WPFで画面レイアウトを考えるとき、デザイン画面で適当にボタン等を配置していくこともできますが、これでは不都合が出ることがあります。

たとえば、ボタンをこんな感じで真ん中に置いてみたとします。

真ん中あたりに置けてますね。

では実行してみます。

うん、ばっちり！

でも、つい出来心で最大化なんてしてしまうと…

だいぶ左上にボタンが…

なぜこんなことになるのでしょうか。



では、もう一度デザイン画面を見てみましょう。

ボタンの上と左に数字書いてますよね？
145と213。

実はこれは上に145の余白、左に213の余白を取るという意味です。

下のXMLの部分（これをXAMLと言いますが）も解説します。
ButtonタグにあるMarginが余白のプロパティを表していまして、左,上,右,下という時計回りの順で余白の設定をします。
（それ以外は、Contentはボタンの中に入れるもの、HorizontalAlignmentは水平方向の寄せる位置、VerticalAlignmentは垂直方向の寄せる位置、Widthはボタンの横幅です）

つまり、デザインのウィンドウサイズではたまたま真ん中ですが、画面を最大化しても上に145の余白、左に213の余白を取るだけなのでボタンが左上に表示されるわけです。

デザイン画面にドラッグ＆ドロップでコントロールを配置すると、こういった感じで配置されてしまうので、画面のサイズの変化に対応するものを作るには仕組みをそこそこ把握して配置する必要があります。

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