【WPF/C#】MahAppsとMaterialDesign Xaml Toolkitで作るマテリアルデザインUI：ハンバーガーメニュー実装のコツ

旅の途中、ふと、かつて記した古い羊皮紙を見つけた。忘れないうちに、その記憶をここに書き留めておくとしよう。

前回の旅で、我々はYouTubeから宝を釣り上げる、魔法の核を手に入れた。しかし、その強力な魂を宿す器（UI）は、まだWPF（Windows Presentation Foundation：Windows向けUI基盤）の無骨な鉄の塊のまま。これでは、真の神器とは呼べない。私は、「マテリアルデザイン」という、現代的で美しい装飾術を学び、この器に魂の鎧を纏わせることを決意した。しかし、完成間近で直面したYouTubeの利用規約という壁により、この神器は幻と消えた。

古の錬金術師のアトリエ。机の上には、MahAppsを象徴する「青い光の設計図」と、Material Designを象徴する「赤い光の設計図」が広げられている。旅人は、その二つの光を、一つに、融合させようと、苦悩している。

しかし、その道は、私が想像していた以上に、険しく、そして難解だった。 MahApps（WPFのモダンUI拡張ライブラリ）とMaterialDesign Xaml Toolkit（マテリアルデザイン実装ライブラリ）。二つの偉大な魔法体系を融合させるという、流行りの儀式。それは、初心者であった私にとって、あまりに壁が高く、幾度となく「作っては壊し」を繰り返す、試行錯誤の日々の始まりだったのだ。

この羊皮紙が導く者

かつて、YouTubeからビデオをダウンロードするという、禁断の夢を見た者
C#とWPF（Windows向けUI基盤）で、マテリアルデザインという名の、美しいアプリケーションを創り出したいと願う者
MahAppsとMaterialDesign Xaml Toolkitという、二つのライブラリの融合に挑む探求者
ハンバーガーメニュー（隠しサイドメニュー）の実装で苦戦している開発者
今はもう動かぬ、幻の神器「TubeEater」のUI設計の裏側に、興味を抱く考古学者

砂漠の道標

WPF - Windows Presentation Foundation。Windowsデスクトップアプリの最新UI基盤。XAMLで画面を定義。
XAML - Extensible Application Markup Language。UIの構造をXML形式で記述する言語。
マテリアルデザイン - Googleが提唱する、物理法則に基づいた視覚的デザインシステム。
MahApps.Metro - WPFにモダンなフラットデザインを提供するライブラリ。MetroWindowが特徴。
MaterialDesign Xaml Toolkit - WPFでマテリアルデザインを実装するためのライブラリ。
NuGet - .NET向けのパッケージ管理システム。ライブラリを簡単に導入できる。
taglib-sharp - 音声ファイルのメタデータ（タイトル、アーティスト等）を編集するライブラリ。
ハンバーガーメニュー - 三本線アイコンで開閉する隠しサイドメニュー。スマホアプリでよく見る形式。
DrawerHost - MaterialDesign Xaml Toolkitの部品。サイドメニューを実装するための結界。
MVVM - Model-View-ViewModel。WPFで推奨される、UI設計のデザインパターン。

儀式の準備：MP3に魂を刻む

ダウンロードしたオーディオ（AAC：音声圧縮形式）をMP3に変換するだけでは、魂は不完全だ。YouTubeのタイトルという名の「記憶」が、そこにはない。 NuGet（.NETのパッケージ管理システム）の宝物庫から「taglib-sharp」という名の、MP3にメタデータ（ファイルに埋め込まれた情報）を刻むための魔法の彫刻刀を手に入れる。

var tfile = TagLib.File.Create(@"C:\My audio.mp3");
// ビットレート（音質を示す数値）という、魂の質を読み解く
var bitrate = tfile.Properties.AudioBitrate;
// YouTubeのタイトルという、記憶をメタデータとして刻む
tfile.Tag.Title = "YouTube のタイトル";
tfile.Save();

この簡単な呪文で、MP3ファイルは、真に価値ある宝物へと昇華する。

儀式の核心：二つの魔法体系の融合

さあ、いよいよ本番だ。MahAppsとMaterialDesign Xaml Toolkit、二つの偉大な魔法を、我が神器に降臨させる。 App.xaml（アプリ全体の設定ファイル）という名の祭壇に、お決まりの呪文を記し、MainWindow.xaml（メイン画面の定義ファイル）をmah:MetroWindow（MahAppsのモダン窓枠）という名の聖域へと変える。ここまでは、古文書（公式ドキュメント）を読めば誰でも辿り着けるだろう。

数多の失敗の果てに、ようやく姿を現した、美しき魂の鎧

ハンバーガーメニューという名の、最大の試練

私が最も長く砂漠を彷徨ったのが、この「ハンバーガーメニュー（三本線で開閉するサイドメニュー）」という名の、難解な魔法の実装だった。 materialDesign:DrawerHostという、強力だが、気難しい精霊。こいつをXAMLのどこに配置すれば、我々の意のままに動くのか。情報の砂漠には、その答えはどこにも記されていなかった。

試行錯誤の末、私はついに真理に辿り着いた。DrawerHostは、画面全体を支配する、大いなる結界なのだと。 その結界の中に、左から現れるメニュー（LeftDrawerContent）と、メインコンテンツ（DockPanel：配置領域）を配置する。そして、トグルボタン（オン・オフ切替ボタン）という名のスイッチで、その結界の開閉を制御するのだ。

<mah:MetroWindow ...>
    <!-- 画面全体を支配する、大いなる結界（DrawerHost） -->
    <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=toggleButtonMenu, Path=IsChecked}">
        
        <!-- 左から現れる、隠されたメニュー -->
        <materialDesign:DrawerHost.LeftDrawerContent>
            ...
        </materialDesign:DrawerHost.LeftDrawerContent>

        <!-- メインコンテンツ（主要な表示領域） -->
        <DockPanel>
            <materialDesign:ColorZone DockPanel.Dock="Top">
                <!-- 結界を開閉するための、魔法のスイッチ（ハンバーガーアイコンボタン） -->
                <ToggleButton x:Name="toggleButtonMenu" Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
            </materialDesign:ColorZone>
            ...
        </DockPanel>

    </materialDesign:DrawerHost>
</mah:MetroWindow>