Windows 8 で解像度に対応すること 【縦画面対応編】
#win8dev_jp
さて、これまでの経緯はこの流れで。今回は4回目になります。
横画面の完全対応は結局元となる Pageクラスを派生したクラスで比率の異なる画面に対して若干がそうサイズを変更する、という対応でした。
ここでのコンセプトは、この点です。高解像度になったら途端に見づらくなった、全然違う画面のイメージになってしまった、ということを起らないようにすることです。
- 設計時にデザインした画面とコンテンツのサイズを極力維持する
- 各画面で細かく配置換えなどの対応を少なくする
縦画面は横画面と全く比率が違う
当たり前ですが、そうなんです。だからコンテンツのレイアウトも考えなければなりません。それはともかく、ViewBox は元の縦横比を維持したまま表示されるので、このようになってしまいます。
ですので、この画像のもととなっている Grid の縦横サイズを 1366ｘ768 から 768ｘ1366 に変えなければなりません。今はそんな感じ。
対応方法
まず、Windows 8 で解像度に対応すること 【縦画面回避編】 を行った人はチェックを外しましょう。
対応方法は、横画面での縦横比の異なる画面サイズへの対応と同じです。ついでなのでここでも縦横比が9:16 以外のものに対応しましょう。
そんなわけで前回の MyPageクラスに追加します。ちょっと関数化しています。そしてこの関数を起動時にも呼んでます。実は起動時は初期設定のままで WindowSizeChanged の起きるタイミングがずれるのでサイズ調整処理が起きない為です。横画面では問題ありませんが、縦画面の時も調整処理が起きない為、前述のような表示になってしまいます。そのために、Loadedイベント発生時にあたらためて調整処理をするよう設定されています。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App25
{
public class MyPage : Page
{
public MyPage()
{
Loaded += (s, e) => {
FitGridSize(this.ActualWidth, this.ActualHeight);
};
Window.Current.SizeChanged +=(s,e)=>{
FitGridSize(e.Size.Width, e.Size.Height);
};
}
private void FitGridSize(double w, double h)
{
double w = this.ActualWidth;
double h = this.ActualHeight;
if (this.Content.GetType() == typeof(Viewbox))
{
Viewbox root = (Viewbox)this.Content;
UIElement viewBoxContent = ((Viewbox)this.Content).Child;
if (viewBoxContent.GetType() == typeof(Grid))
{
Grid grid = (Grid)viewBoxContent;
if ((w > 0) && (h > 0))
{
if (w > h)
{
grid.Width = 1366;
grid.Height = 1366 * h / w;
}
else
{
grid.Height = 768 * h / w;
grid.Width = 768;
}
}
}
}
}
}
}
結果画面がこうです。(クラウディアさんの VerticalAlignment は Bottom に、HorizontalAligntment はRightにして有ります。
いいですね。
LayoutAawarePageを使う場合は、Loadedイベントが設定されているので、そこに FitGridSize を呼び出すように追記します。
さて、画面サイズは合うようになりましたが、当然縦画面と横画面では内容のレイアウトを変えなければなりません。でもできる限り変更は避けたいですよね。次回はそのための方法です。