SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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用のストアプリをWindows 8.1で表示した場合

 同じアプリを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ピクセル以下の表示
500ピクセル以下の表示

次のページ
まとめ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
速習 Windowsストアアプリケーション連載記事一覧

もっと読む

この記事の著者

西村 誠(ニシムラ マコト)

 Microsoft MVP Windows Platform Development。 Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。 ブログ:眠るシーラカンスと水底のプログラマー 著書:基礎から学ぶ Windowsストアアプリ開発

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7651 2014/03/12 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング