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


#win8dev_jp #wpdev_jp

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

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

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

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

image

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

imageimage

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

image

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

  • 極力絶対サイズで指定しない(50ドット以下のものを除く)
  • グリッド分割で相対的な位置決めをする
  • 回転はOK、でも移動はNG (移動量が絶対指定になるの)

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

 

 

やり方の例

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

image

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

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

image

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

image

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

image

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

image

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

 

 

縦は無理だが...

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

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

image

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

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

image

何かの参考になれば(ならないか)w

 

 

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

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

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

image

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

image

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

  • RootGrid
    • ViewBox
      • Grid
        • Rectangle
        • Image
        • Image

簡単 ♪

Comments (0)

Skip to main content