Windows 8用のストアアプリをWindows 8.1対応にアップデートする

速習 Windowsストアアプリケーション 第10回

Windows 8.1の変更点

　Windows 8用のストアアプリをWindows 8.1に対応させる場合にチェックポイントを確認していきます。

スナップの廃止

　Windows 8ではストアアプリは横320ピクセルの幅で表示されるスナップという状態と、全画面ないしスナップされたアプリの幅を除いた残り幅の表示という大きく二通りの表示しかありませんでした（端末を縦に持った場合を全画面表示とすれば）。

　Windows 8.1ではアプリは最低幅を320ピクセルないし500ピクセルと指定できますが、それを超える範囲であれば自由に可変サイズで変更できます。

　下の画像はWindows 8用のストアプリをWindows 8.1環境で表示した場合です。左に表示されているアプリはスナップ状態（幅320ピクセル）で表示されていますが、左右に余白が発生してしまっています。

Windows 8用のストアプリをWindows 8.1で表示した場合

　同じアプリをWindows 8.1用にリターゲットした直後の表示が下の画像です。

Windows 8.1用にリターゲットした場合

　左右の余白はなくなり、可変幅に合わせて画面が拡大するようになりました。

　このように拡大縮小されても良いストアアプリの場合は良いですが、画面幅に合わせてレスポンシブWebデザインのようにストアアプリの表示を変えたい場合があります。

画面の横幅に合わせた表示切替

　Windows 8用のストアアプリについて思い出してみましょう。Windows 8用のストアアプリの場合、多くのプロジェクトテンプレートでLayoutAwarePageというPageクラスを継承したクラスを利用していました。

　その中で画面サイズの変更に合わせてスナップ表示していた箇所が以下でした。

タイルのローカル更新

public void InvalidateVisualState()
{
    if (this._layoutAwareControls != null)
    {
        string visualState = DetermineVisualState(ApplicationView.Value);
        foreach (var layoutAwareControl in this._layoutAwareControls)
        {
            VisualStateManager.GoToState(layoutAwareControl, visualState, false);
        }
    }
}

　このvisualStateの値によって表記を変えていたのですが、Windows 8.1ではスナップを表す"Snapped"がなくなりました。Windows 8.1の可変サイズに対応するために、画面の横幅を取得して表示を変えることにします。元々が8.0のプロジェクトなので、Snappedなどの表示定義だけは残っているものとします。

　また、ソースの見通しをよくするためにLayoutAwarePageクラスは利用しないこととします。

　画面サイズを取得して表示を変更するコードは、以下のとおりです。

タイルのローカル更新

public TopPage()
{
    this.InitializeComponent();

    this.Loaded += TopPage_Loaded;

    // SizeChangedイベントを利用する点は8.0と同じ
    this.SizeChanged += TopPage_SizeChanged;
}

void TopPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    // 横幅が500ピクセル以下もしくは縦持ちの場合はsnapViewを表示
    if (e.NewSize.Width <= 500)
    {
        VisualStateManager.GoToState(this, "Snapped", false);
    }
    else
    {
        VisualStateManager.GoToState(this, "Filled", false);
    }
}

　VisualStateManager.GoToStateメソッドで表示を変える点は同じです。

　これでWindows 8用のストアアプリと似たようなスナップ表示の切り替えができます。

全画面時の表示

500ピクセル以下の表示