【.NET MAUI】Shell で遊んでみた（その２）

前回より MAUI の Shell に触れ始めました。
.NET MAUI のShell は、基本的に Xamarin.Forms のShell と機能が同じようで、モバイルアプリケーションの基本機能であるナビゲーション・・・平たく言えば、モバイルアプリの画面(ページ)遷移や検索等の機能を統合的に管理し、かつ操作を標準化する機能なようです。今回は複数のページを Shell でどのように遷移するのか、試してみたいと思います。

画面遷移の挙動確認用として、ContentPage をプロジェクトに三つ追加してみます。新規の MAUI プロジェクトを作成し、ソリューションエクスプローラでプロジェクトを選択。右クリックし、「追加(D)」→「新しい項目(W)」とクリックします。「新しい項目の追加」画面が起動したら、「.NET MAUI ContenPage(XAML)」を選択し、Page1.xaml と名前を付けて保存します。

同じ要領で ContentPage を二つ続けて追加します。わかりやすいよう「Page2.xaml」「Page3.xaml」と名前を変えて追加します。

どのページが選択されているかわかりやすくするため、ページ番号を表示するよう ContenPage の記述を変更します。

ContentPage の変更

他のページの XAML もページ数に合わせて以下のように書き換えます。

Page2.xaml の場合

    ・・・・
    <Label Text="2" FontSize="72" VerticalOptions="Center" HorizontalOptions="Center" />
    ・・・・

Page3.xaml の場合

    ・・・・
    <Label Text="3" FontSize="72" VerticalOptions="Center" HorizontalOptions="Center" />
    ・・・・

AppShell.xaml を編集して、すべての ContentPage を表示できるようにします。なお Shell.FlyoutBehavior プロパティは Flyout に変更しておきます。

AppShell を編集

デバッグを開始します。

ハンバーガーボタンをクリックすると、メニューがドロップダウンします。AppShell.xaml に記述した ShellContent が表示されてます。

Page1 をクリックすると、Page1.xaml のページが表示されます。

同じく Page2 をクリック。

ただし最近の流れでは、ハンバーガーボタンで ContentPage を切り替えるのではなく、TabBar でページ遷移を行なうのが主流になりつつあるそうです。確かにハンバーガーボタンはアプリを操作する側としたら直感的でない嫌いがあります。そこで ShellContent を TabBar の配下に変更します。その際、ハンバーガーボタンは不要になるので、Shell.FlyoutBehavior プロパティは Disabledに変更しておきます。

ShellContent を TabBar の配下に変更

TabBar での画面もといページ遷移に変更しました。