第十四工房

UWPでは、レスポンシブデザインということで、様々な大きさの画面を考慮して設計せよ、とあるが、一筋縄ではいかない。

※レスポンシブデザインについて
https://msdn.microsoft.com/ja-jp/library/windows/apps/dn958435.aspx

VisualStudio 2015のMobileエミュレータは、5種。画面の大きさでいうと、WVGA、WXGA、720p、1080pの4種。4～6インチの画面をサポート。それぞれで縦と横、動作確認を行うが、なかなか思い通りにならない。2つのListViewの縦横の並び、広い用と狭い用のTemplateの選択、など。

しびれを切らして、PageのSizeChangedイベントで、縦横の有効ピクセル数をデバッグ出力させてみる。整数値でないものもある。（小数点2位四捨五入）

WVGA：533.3 x 320
WXGA：568.9 x 341.3
720p：640 x 360
1080p：768 x 432
デスクトップの最小：500 x 320

エミュレータの見た目は変わらないが、結構幅がある。Mobileは1種類と考えてはいけない。

ListViewの大きさとこれら有効ピクセル数を考慮し、VisualStateを必要なだけ、StateTriggersで画面の縦横のサイズごとに切り替わるように設定。上図は、WVGAの縦と横の設定例。TargetのPropertyのうち、Grid.Rowなどは、()で囲んで指定する。上段のGridは2行1列、下段は1行2列。