XAMLのGridで横長と縦長レイアウトの切り替え - VisualStateManager ― 2015年02月24日 07:56
XAMLのGridで、タブレット横持ち用の横長レイアウトと、縦持ち用の縦長レイアウトの切替にも苦労したので、掲示する。
横長レイアウト。アプリの上半分。3列1行で、表示領域A、B、Cを横に並べる。
縦長レイアウト。横幅が狭くなるので、2列2行に変更。表示領域Cを2行目に落とす。Cのレイアウトは幅があるので、2列分を使用。
XAMLのGridの定義。
最初に「Grid.ColumnDefinitions」で3列を定義。次に「Grid.RowDefinitions」で2行を定義。ただし、2行目は、高さを0にして閉じておく。
続いて、表示領域A、B、Cの定義。「Grid.Column」、「Grid.Row」の表記は0オリジンなので、1列1行目は、(0,0)。
XAMLのVisualStateManagerのVisualStateの定義。縦長用の「Portrait」。
はじめに、Gridの構成を変更。2行目の高さを「*」に変更して、閉じていた行を開く。代わりに3列目は幅を「0」に変更して、列を閉じる。これで3列1行を、2列2行に変更。
次に、表示領域の移動。A、Bは変わらない。Cは、3列1行目から、1列2行目に移す。また、「Grid.ColumnSpan」を2に定義して、2列分の領域を使って表示。
こんな感じでマス目と、各マスの表示内容を切り替えることができる（ほかのやりかたもあるだろうが）。ただし、設定を誤ると即、実行時例外になるので十分にテストしておく。
コメント
トラックバック
このエントリのトラックバックURL: http://c5d5e5.asablo.jp/blog/2015/02/24/7578427/tb
※なお、送られたトラックバックはブログの管理者が確認するまで公開されません。
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。