Windows 8 で解像度に対応すること 【縦画面コンテンツ配置編】


#win8dev_jp

さて、これまでの経緯はこの流れで。今回は6回目になります。

  1. Windows 8 で解像度に対応すること 【考え方編】
  2. Windows 8 で解像度に対応すること 【横画面実装編】
  3. Windows 8 で解像度に対応すること 【縦画面回避編】
  4. Windows 8 で解像度に対応すること 【縦画面対応編】
  5. Windows 8 で解像度に対応すること 【縦画面コンテンツ準備編】

さて、縦画面に対応し、さらに、コンテンツの配置のために ViewState を定義しました。

実際に配置を定義してみる

さて、今度はコードを直接入れるのではなく、配置をGUIで定義してみます。Visual Studio のデザイン画面で「デバイス」タブを選択するとこのような画面になります。

image

左上の「表示」アイコンから縦画面(一番右)を選ぶと縦画面に状態が切り替わります。

image

実は、ここでちゃんと対応できるように、FullScreenPortrait と FullScreenLandscape という決められた名前にしておいたのです。

image

ここで縦画面用の定義をするは「状態記録の有効化」をおして画面定義を変更するだけです。クラウディアさんを上に移動してみましょう。

image

終わったら、チェックを外します。後は実行して確認するだけ。

image image

ほんと、Visual Studio って優秀だわ。

さぁ、あとはコンテンツの配置です。

コンテンツの配置の考え方

ただ、ViewState にはルールがあります。

ViewStateで定義出来るのは既存のアイテムの状態変更のみ

ViewStateで突然コントロールを変更したり追加したりはできません。ですので縦画面だけで表示したいものはあらかじめ横画面でも用意しておいて、Visibility を Collapsed にしておくなどして非表示にしておき、縦画面で Visibility を Visible に状態変更することになります。

なので、基本はそれぞれの画面で配置を変えるだけでいいでしょう。

私がとる方法の一つがこの配置です。画面を2つの正方形のブロックでグループ分けして配置する方法。

 

image

こうやると意外と楽にできます。これはVerticalAlignment と HorizontalAligntment の状態変化だけで対応することができます。

また、Grid を使って変化させることもできます。横並びを縦並びに変更するなら、このように縦横2つに切っておけばいいわけです。

 

 

image

こういうパターンも。コンテンツの形状は多少変わりますが、それでも最小限にとどめます。

 

 

image

こんなのもありますね。

 

image

考え方は、

  • 横長の小さいアイテムは極力横長のままで
  • 面積の大きいコンテンツは、面積を維持できるように
  • 画像等は極力正方形に近い比率が取れるなら取る

そして、上記でも紹介したように、横並びの3つのオレンジのアイテムを縦並びにするにも、サイズや位置を1つ1つ指定するのではなく、Grid を使う。こうすると様々な大きさへの対応が柔軟になるからである。

縦3段ぶち抜きボタン x3列

 

image

横3段ぶち抜きボタン x3行

とにかく、サイズや位置、大きさを絶対指定せず、Gridのどこに配置、という形で定義すること!

これ鉄則です。

Comments (0)

Skip to main content