ハンバーガーボタンを実装するには?[Windows 10 UWPアプリ開発]

実行例(デスクトップ)上:ハンバーガーメニューが閉じた状態。下:ハンバーガーメニュー(SplitViewコントロールのPane)が開いた状態。ハンバーガーボタンをタップするたびに、この二つの状態が切り替わる。メニュー(緑色の部分)は閉じた状態でもハンバーガーボタンと同じ幅だけ表示されているが、これはSplitViewコントロールのDisplayModeプロパティに「CompactOverlay」を指定しているためである。指定を変えれば、完全に隠すこともできる。また、DisplayModeプロパティに「CompactOverlay」を指定しているときは、メニューが開いてもコンテンツ(黄色の部分)は動かない。指定を変えれば、メニューが開くのに合わせてコンテンツを右にスライドさせることもできる。メニューが開いた状態では、ハンバーガーボタンもONの状態になっている。ボタンがON状態のときの背景色は指定していないので、デフォルトの色(ここでは青色)で表示されている。ウィンドウ左上隅に[戻る]ボタンが出ているが、これはシステムが表示しているものだ。表示させる方法は本稿では説明しないので、別途公開のサンプルをご覧いただきたい。タイトルに付加されている文字列「ハンバーガーボタンの実装」も同様である。

実行例(デスクトップ)上:ハンバーガーメニューが閉じた状態。下:ハンバーガーメニュー(SplitViewコントロールのPane)が開いた状態。ハンバーガーボタンをタップするたびに、この二つの状態が切り替わる。メニュー(緑色の部分)は閉じた状態でもハンバーガーボタンと同じ幅だけ表示されているが、これはSplitViewコントロールのDisplayModeプロパティに「CompactOverlay」を指定しているためである。指定を変えれば、完全に隠すこともできる。また、DisplayModeプロパティに「CompactOverlay」を指定しているときは、メニューが開いてもコンテンツ(黄色の部分)は動かない。指定を変えれば、メニューが開くのに合わせてコンテンツを右にスライドさせることもできる。メニューが開いた状態では、ハンバーガーボタンもONの状態になっている。ボタンがON状態のときの背景色は指定していないので、デフォルトの色(ここでは青色)で表示されている。ウィンドウ左上隅に[戻る]ボタンが出ているが、これはシステムが表示しているものだ。表示させる方法は本稿では説明しないので、別途公開のサンプルをご覧いただきたい。タイトルに付加されている文字列「ハンバーガーボタンの実装」も同様である。