どんな画面でも同じレイアウトを

#win8dev_jp #wpdev_jp

Windows Phone は複数の解像度でも縦横比はほぼ同じです。そして開発時は論理サイズで指定するのでどのデバイスでもほぼ同じ表示を実現することができます。

しかし、Windows 8ではそうはいきません。縦横比も異なったり、実解像度も異なる。dpi の違いで拡大縮小が発生する。その割にはフォントサイズや図形のサイズは絶対指定ができるようになっています。そうなると、せっかくかっこよくデザインしたのに解像度が変わると全然変わってしまいます。

解像度に影響されにくい配置

たとえば、こんな配置をどの解像度でも実現するには？

こうやってみるとよさそうなのに、大きな解像度ではこうなってしまったら悲しいでしょ？

でも、次のやり方をすれば高解像度でもこのようになる。

基本ルールは以下のもの。

大変そうに見えますが、Visual Studio 2012 や Blend でやってると、結構勝手に相対指定にしてくれてるんですよ。よくできてます。

やり方の例

まずは基本的に全体をグリッドで切ります。上の縦幅は固定ですが左右は1:1、Gridの指定方法では 1*：1* ですね。

左下はRectangle や Border を配置して、周りの縁へのサイズは小さいので Margin で固定で指定してもいいでしょう。

もう少し幅が広いときや比率を保ちたいならここも Grid配置して縦横3分割して配置します。3分割時は相対で（VSで区切れば勝手に相対になります）

右の矩形2つは回転する前に配置をしてみます。これも実はグリッドを配置するのですが、写真のサイズに合わせて変則サイズで分割をします。

そして、写真を配置。グリッドサイズぴったりに配置します。ってか写真サイズに合わせてグリッドを作るんですけどね。

最後にそれぞれを回転します。こんな感じ。XAMLでいうと RotateTransform が適応されます。

このように設定すると、どこにも絶対サイズ指定がなく、様々解像度の環境でも、ほぼきれいに同じ表示を実現できます。

縦は無理だが...

ただ、縦になるとだめですね。ここはちゃんとViewState で切り替えて、縦用の配置を作ってください。

ただ、左用のGrid幅を 1* ではなく、Auto にして、

その中にあるもののVisibility を全て Collapse にしてやると、左側の幅が０になり、縦に近い配置を実現しやすいというやり方もあります。

まぁ、そうやるよりも、改めて縦用にはきちんとデザインしたほうがいいかと思いますけどね。もしくは対応しないとか。

何かの参考になれば（ならないか）ｗ

もっとも簡単にできる冴えたやり方♪

実は一番簡単な方法がある。ViewBox を使えばいいのだ。

まずは適当に配置しちゃう。

そして、3つを Grid でグループ化。さらにそれをViewBoxでグループ化する。

実はこれだけでいい。面倒ならこの方法でやるのもいいだろう。階層構造はこんな感じになる。

簡単 ♪

Additional resources