(1/2)SplitViewコントロールとFrameコントロールを利用して、UWP内でハンバーガーメニューから画面遷移を行う方法を解説する。10のユニバーサルWindowsプラットフォーム用のアプリ(以降、UWPアプリ)に特徴的なUIといえば、「ハンバーガーメニュー」(=ハンバーガーボタンによって開閉するメニュー)を使った画面遷移が挙げられる(次の画像)。10で新しく追加されたSplitViewコントロール(Windows.UI.Xaml.Controls名前空間)を使えば、ハンバーガーメニューの中で画面遷移を行えるのである。ASP.NET(Webフォーム)のマスターページとコンテンツページをご存じならば、それと同じような仕掛けだと言えばイメージは分かっていただけるだろう。本稿では、SplitViewコントロールを使い、ハンバーガーメニューで画面遷移を実装する例を説明する。UWPアプリ開発]」をご覧いただきたい。#112」からダウンロードできる。10に標準の「ニュース」アプリである。それぞれの画像の左側は、デスクトップ用のもの。10モバイルエミュレーターで動かしているモバイル用のものである。ハンバーガーメニューが閉じている状態。デスクトップ用では、ハンバーガーメニューを完全に隠さず、アイコンが見えるようにしている。モバイル用では、ハンバーガーメニューを完全に隠している。ここでハンバーガーボタン(左上の赤色のボタン)をタップ/クリックすると、ハンバーガーメニューが開く。ハンバーガーメニューが開いている状態。News])に該当する項目の背景色を変えている(暗赤色)。ここで、例えば[カテゴリ]/[Interests]項目をタップ/クリックすると、ハンバーガーメニューは閉じられ、その画面に遷移する。デスクトップ用では、縮小されたハンバーガーメニューの中で、遷移した画面に該当するアイコンの背景色が変わっている(モバイル用も同様なのだが、ハンバーガーメニューが完全に隠されているため、この画像では分からない)。10を搭載したスマートフォン)用のUWPアプリを開発するには、以下の開発環境が必要である。2015を使っている。UWPアプリ開発]」を前提とする。ハンバーガーボタンのタップ/クリックでハンバーガーメニューを開閉する実装については、そちらをご覧いただきたい。SLAT対応ハードウエアは、モバイルエミュレーターの実行に必要だ。未対応でも、ソースコードのビルドと実機でのデバッグは可能である。対応PCかどうかを判定する方法」を参照。SLAT対応ハードウエアであっても、VM上ではエミュレーターが動作しないことがあるのでご注意願いたい。10モバイルエミュレーターを使用しないのであれば、32bit版でもよい。10は「開発者モード」を有効にしておくこと(「設定アプリ」の[更新とセキュリティ]−[開発者向け]で、[開発者モード]ラジオボタンを選択)。2015のXAMLエディターがエラーになる。2015」と呼ばれるリリース、またはそれ以降。UWPアプリ開発におけるデバイスファミリーのバージョン指定としては「10.0.0.0」(Package.appxmanifestファイルのTargetDeviceFamily)である。モバイルエミュレーターを使用しないのであれば、Home版でもよい。本稿に掲載したコードを試すだけなら、無償のExpressエディションやCommunityエディションで構わない。APIのアプリ開発用)。2015(製品版)もマイクロソフトのページから無償で入手できる。Packの日本語版を追加インストールし、[オプション]ダイアログで言語を切り替える。10のページからダウンロードできる。10240」またはそれ以降。最初に、ハンバーガーメニュー(SplitViewコントロール)と遷移する画面との関係を説明しておこう。本稿で実装するUIは、次の画像のようなものだ。本稿で実装するUI(デスクトップ)左側のハンバーガーメニューで[ページ【1】]/[ページ【2】]/[ページ【3】]を選ぶと、右側がそれぞれの画面に遷移する。ハンバーガーメニューの下端にある[About]は、タップ/クリックするとフライアウトを表示する。これについては本稿では解説しないので、別途公開のサンプルコードをご覧いただきたい。このUIの構造は、その概略を示すと次の図のようになっている。本稿で実装するUIの構造(概略)先の画像と見比べていただきたい。「MainPage.xaml」の中にSplitViewコントロールがあって、そのPaneプロパティにハンバーガーメニューが実装されている。ContentプロパティにはFrameコントロール(Windows.UI.Xaml.Controls名前空間)を入れておき、そのFrameコントロールのNavigateメソッドを使って各ページ(「Page1.xaml」/「Page2.xaml」/「Page3.xaml」)を表示する。先の画像で「ページ【1】」と表示されている赤色の部分は「Page1.xaml」である。重要な点は、SplitViewコントロールのContentプロパティにFrameコントロール(Windows.UI.Xaml.Controls名前空間)を配置でき、そのFrameコントロールの中で通常のページをナビゲートできることである。コンテンツに表示するページを作成する先に、上の図の「Page1.xaml」/「Page2.xaml」/「Page3.xaml」を作成しておこう(次のコード)。テキストブロックの他に、今回は[戻る]ボタンも実装しておく(ただし、これには問題がある。VerticalAlignment="Center">ページ【1】</TextBlock></Grid></Page>コンテンツに表示するページの例(XAML)これは「Page1.xaml」である。残りの「Page2.xaml」/「Page3.xaml」も同様に、ただし区別が付くように実装しておく。今回はここに[戻る]ボタンも配置しているが、あまりよろしくない(後述)。良い方法は、回をあらためて説明したい。Classコンテンツに表示するページの例(コードビハインド、上:C#/下:VB)これは「Page1.xaml」のコードビハインドである。[戻る]ボタンのハンドリングだけを行っている。残りの「Page2.xaml」/「Page3.xaml」も同様に実装しておく。このC#のコードは、冒頭のusing句と名前空間宣言を省略している。画面遷移用の項目をハンバーガーメニューに実装するには?ハンバーガーメニューに表示する項目の実装は、さまざまな方法が考えられる。画面遷移を伴わない機能、例えばフライアウトを出すといった用途では、通常のボタンでよいだろう。画面遷移をさせる場合は項目の選択状態を維持する必要がある。しないと、現在どの画面を表示しているのか(=どの項目を選択しているのか)が分からなくなってしまうからだ。すると、画面遷移を伴う機能を実装するときには、トグルボタンが使えそうである。同じ項目を2回タップ/クリックしても選択状態が解除されてはいけないのだ(同じ画面が表示されているのであるから)。トグルボタンを使う場合には、その対処が必要になる。ここでは、ラジオボタンを利用してみよう。選択状態は維持してくれるし、選択された状態の項目をさらにタップ/クリックしてもイベントは発生しない。画面遷移用の項目にはぴったりだ。外観には問題があるが、それは後からスタイルを変更しよう。すると、「MainPage.xaml」のSplitViewコントロールの部分は、次のコードのようになる。/></SplitView.Content></SplitView>「MainPage.xaml」のSplitViewコントロールの実装例(XAML)画面遷移のために必要な部分のみを示す。UWPアプリ開発]」をご覧いただきたい。下端の[About]ボタンについては、別途公開のサンプルコードをご覧いただきたい。冒頭の画像で紹介した「ニュース」アプリは、モバイルデバイスではハンバーガーメニューを完全に隠している。本稿では解説しないが、そうするにはAdaptiveTriggerクラス(Windows.UI.Xaml名前空間)を使ってSplitViewコントロールのDisplayModeプロパティを「Inline」または「Overlay」に切り替える。画面遷移の項目がタップ/クリックされたときのイベントハンドラーは、次のコードのようになる。ClassMainPage.xaml」のコードビハインド(上:C#/下:VB)ラジオボタンが選択されたとき、Frameコントロール(=「MainContentFrame」変数)のNavigateメソッドを使ってそれぞれの画面にナビゲートするだけである。ハンバーガーメニューは開いたままなので、SplitViewコントロール(=「Splitter」変数)のIsPaneOpenプロパティをFalseにすることでハンバーガーメニューを閉じる。このC#のコードは、冒頭のusing句と名前空間宣言を省略している。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。