パネルクイズ XAML

#wpdev_jp #win8dev_jp

さて、ちょっとしたクイズをしてみましょう。非常に簡単です。

XAMLというか、SIlverlight, WPF, WinRT など XAML を使うプラットフォームには、いくつかのパネルコントロールがあります。それぞれ特性を持ったパネルコントロールですが、これらを正しく使うことで、さまざまな解像度などの環境の変化にも柔軟に対応できるアプリケーションを構築することができます。

さて、では各ケースで適したパネルを選んでみましょう。

問題

UIで下記のレイアウトをしたい場合、どのパネルを使うのが適切でしょう？（Grid, StackPanel, Canvas, ScrollViewer, Border, ViewBox）

Q1. 等分

A1. Grid

Grid を使います。等分ができるのはGrid。 <RowDifinition Width="*"/> を数だけならべて

Q2. コンテンツを右と左に

A2. Grid

左寄せと右寄せ、両方使うなら Gridです。Stackでは左か右どちらかしか使えません。

Q3．3つのタイトルを並べてセンターに

A3 StackPanel でまとめ、それをGridで包む

Grid で3分割して、真ん中は幅Auto,左右は同じ幅(無指定）にするのが模範解答ですね。Stack でまとめて、Gridで包むと、真ん中の文字がセンターに来ない。

並べるだけなら、StackPanel。StackPanel はよせて使うよりもこうやって並べるために使うものだと思ったほうがいい。そして、Gridでまとめてセンタリング。

Grid と Stack の大きな違いは、個々のアイテムが重なってしまう可能性があるか無いかと、隣接出来るか出来ないかという点。

Q4．左にメニュー

A4 Grid

左に固定幅を取りたいならGridです。<RowDifinition Width="200"/> <RowDifinition Width="*"/> みたいに

Q5．ECOボタン

A5. Border

角丸のサイズを角ごとに指定できるのはBorderだけです。

Q6. Path で描かれたキャラクター

A6 Canvas + ViewBox

PathのキャラクターはとにかくCanvas。Gridでやるとちょっとしたサイズ変更で崩壊します。 さらに、Canvas を ViewBox で囲むことで拡大縮小に対応できます。

この辺がしっかりわかっていると、画面を見ただけで使うパネルの種類が自然と出てきます。

これからの 高解像度時代に柔軟に対応するためにはパネルの使い分けをしっかりマスターしましょう。