[.NET MAUI] Flyoutメニュー追加

.NET MAUIに標準で準備されたページ遷移のうち、Flyoutメニュー（三本線のハンバーガーボタンをタップしすると横からメニューがスライド表示）を作ってみる。

まずはAppShell.xamlを修正する。
Shell.BackgroundColor Shell.TitleColorはメニューを選択した際の画面上部ナビゲーションバーの色である。Flyoutメニュー部分はプラットフォームのテーマに依存し、色変更はできないようだ。

AppShell.xaml

 <?xml version="1.0" encoding="UTF-8" ?>
 <Shell
    x:Class="RentaProto.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:RentaProto"
-    Shell.FlyoutBehavior="Disabled"
+    Shell.FlyoutBehavior="Flyout"
    Title="レンタプロト">

-    <ShellContent
-        Title="Home"
-        ContentTemplate="{DataTemplate local:MainPage}"
-        Route="MainPage" />
+    <FlyoutItem Title="レンタカー予約" Icon="car.png">
+        <ShellContent
+            Title="レンタカー予約"
+            ContentTemplate="{DataTemplate local:MainPage}"
+            Shell.BackgroundColor="Black" Shell.TitleColor="White"
+            Route="MainPage" />
+    </FlyoutItem>
+    <FlyoutItem Title="ユーザー設定" Icon="user.png">
+        <ShellContent
+            Title="ユーザー設定"
+            ContentTemplate="{DataTemplate local:UserPage}"
+            Shell.BackgroundColor="Black" Shell.TitleColor="White"
+            Route="UserPage" />
+    </FlyoutItem>
 </Shell>

各ページのナビゲーションバーも表示する。

MainPage.xaml

-             Shell.NavBarIsVisible="False">
+             Shell.NavBarIsVisible="True">

Gomita 3ヶ月前に更新

アイコン

メニューにアイコンとして表示するcar.png user.pngは Google Fonts から拝借する。

Flyoutメニュー部分の背景や文字は色指定ができないようだが、プラットフォームのテーマ（Lightモード、Darkモード）に応じてアイコンを変更したい場合は{AppThemeBinding}を使う。ただし仕組み上、アプリ起動時点のテーマによってアイコンが決定されるため、アプリ起動後にテーマを変更してもアイコンは変わらない。

AppShell.xaml

    <FlyoutItem Title="レンタカー予約"
-                Icon="car.png">
+                Icon="{AppThemeBinding Light=car.png, Dark=car_fff.png}">

car_fff.png user_fff.pngの作り方は、さきほどのGoogle FontsサイトよりSVGをダウンロードして、SVGに<path style="fill:#FFF;"を追加して、SVG to PNG でPNGファイルとして保存する。

ここまでで、iOSで見た目はこうなった。

Gomita 3ヶ月前に更新

プロジェクトファイルの編集

アプリのタイトルを変える。

RentaProto.csproj

		<!-- Display name -->
-		<ApplicationTitle>RentaProto</ApplicationTitle>
+		<ApplicationTitle>レンタプロト</ApplicationTitle>

アプリのアイコンを変える。アイコンはForegroundFileによりSVGファイルで指定し、アイコンのベースの色をColorで、SVGの塗り色をTintColorで指定する。

RentaProto.csproj

		<!-- App Icon -->
-		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+		<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\caricon.svg" TintColor="#165FA6" Color="White" />

スプラッシュ画面（アプリ起動時に表示される紫色の.NETロゴ画面）を変える。.NETロゴはそのまま、Colorでどぎつい紫をマットな青に変更する。

RentaProto.csproj

		<!-- Splash Screen -->
-		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
+		<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#165FA6" BaseSize="128,128" />