UWP:Mobile画面のepx(有効ピクセル数)2015年08月14日 14:26

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イベントハンドラ

しびれを切らして、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種類と考えてはいけない。

VisualStateのStateTriggersの例

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

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※なお、送られたコメントはブログの管理者が確認するまで公開されません。

名前:
メールアドレス:
URL:
コメント:

トラックバック

このエントリのトラックバックURL: http://c5d5e5.asablo.jp/blog/2015/08/14/7733341/tb

※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。