SHOEISHA iD

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

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

UWPアプリ開発の最前線

UWPアプリを作るとき、画面遷移やアーキテクチャで悩んだら!?
~Windows Template Studioを使ってみよう

UWPアプリ開発の最前線 第11回

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

もう1つの画面遷移

 ここからは、前のサンプルアプリには入れられなかったナビゲーション方式とアーキテクチャを紹介していきます。サンプルコードはSample02.Tabs.MvvmLightをご覧ください。

タブナビゲーション

 Windows Template Studioウィザードの最初の選択「プロジェクトの種類」で[Pivot and Tabs]を選ぶと、画面上部のタブでナビゲーションするアプリになります。タブナビゲーションは、「ストア」アプリ(ウィンドウの横幅が広いとき)やWindows 10標準の「アラーム & クロック」アプリなどで使われています。

 タブナビゲーションは、画面上部のタブをクリックするとそのページが表示されます(次の画像)。ウィンドウの横幅が不足しているときは、自動的にタブの部分が横スクロール可能になります。

タブナビゲーション
タブナビゲーション
タブナビゲーション(横幅が足りないとき)
タブナビゲーション(横幅が足りないとき)

ハンバーガーメニューとの違い

 このタブナビゲーションと前述のハンバーガーメニューとでは、見た目や使い勝手の違いがあるだけでなく、アプリを作る上での大きな違いがあります。

 Windows Template Studioが生成するハンバーガーメニューは、既定では画面遷移すると以前のページは破棄されます。画面遷移してから戻ってくると新しくページが作り直されるため、初期状態に戻ってしまいます。そこで、先ほどMainページのテキストボックスの文字列で行ったように画面の状態を復元するコードを書いたり、あるいは、ページが破棄されないような設定をしたりします(サンプルコードのMainページ以外はそのようにしてあります)。

 対して、タブナビゲーションでは画面遷移しても以前のページは破棄されません。生成されたプロジェクトのPivotPage.xamlを見てもらうとよいのですが(次の画像)、アプリの起動時からすべてのページが存在していて、どれを表示するかをタブで切り替えているだけです。ページの寿命を考えなくてよいのは楽ですが、その代わり、メモリーの消費量が過大にならないように注意しなければなりません。

PivotPage.xamlの一部
PivotPage.xamlの一部

次のページ
4つのアーキテクチャ

関連リンク

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
UWPアプリ開発の最前線連載記事一覧

もっと読む

この記事の著者

biac(ばいあっく)

HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来30年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。2014/10~2019/6 Microsoft MVP (Windows Devel...

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11282 2019/01/09 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング