.NET MAUIのハンバーガーメニュー・・・使ってみるかなぁ

今までハンバーガーメニューって使って無かったのだけど、なんとなく面倒くさいイメージがあったんだけど、無茶苦茶簡単だった

ちなみにマイクロソフトのハンバーガーメニューに関しての解説はこちら
なのだけど・・・・なんか違うな・・・

もしかしてXamarinでもこんな簡単だったのか?
画面の下のタブとかShellにタブコントロール一生懸命(と言うほどでも無いかな)書いたのに・・・まさかハンバーガーメニューと一緒に書くだけとは
知らなかったわ

基本、Shellページにハンバーガーメニューもタブも設定するのだよな

MAUIのプロジェクトを作ったら、とりあえず適当にいくつかのページを作ってみる

こんな感じで、about,help,NewPage1と作ってみた
ちなみにaboutやhelpみたいな単純な単語は
｢こういう名称は予約後に使われがちだからとっとと変更してね｣
とコンパイラーから警告が出るけどな

 今回、｢pages｣というフォルダを掘ってその下にページを作ったので、
namespaceにMauiHamburgerTest.pagesとついて、その下にaboutとかの名前の付いたクラスになってる
んで、画面が変わった事がすぐにわかるようにデフォルトのラベルを適当に書き換える
これは、aboutページだけど、作ったページを全部見やすく書き換える

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MauiHamburgerTest.pages.about"

             Title="about">

    <VerticalStackLayout>

        <Label

            Text="ABOUT PAGES"

            VerticalOptions="Center"

            HorizontalOptions="Center" />

    </VerticalStackLayout>

</ContentPage>

 

そしてShell(AppShell.xaml)のページを他のページを呼び出すように書き換えるのだけど、さっき迂闊にpagesフォルダを掘ってしまったので、呼び出しやすいように
xmlns:pages="clr-namespace:MauiHamburgerTest.pages"
と言う1行追加
namespaceを呼び出しやすいようにしました

それと、
Shell.FlyoutBehavior
をDisable->Flyoutに修正
これで、ハンバーガーメニューが出てくるようになる
どんな設定値が使えるはVisual StudioのIntellisenceが教えてくれるから色々書き換えて試してみる。

<Shell

    x:Class="MauiHamburgerTest.AppShell"

    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    xmlns:local="clr-namespace:MauiHamburgerTest"      

    xmlns:pages="clr-namespace:MauiHamburgerTest.pages"

    Shell.FlyoutBehavior="Flyout">

 

ハンバーガーメニューと下のタブに出したいページを
FlyoutItem
タグの間に書く。
ContentTemplate
が、開きたいxamlのページ、Titleが表示する文字・・・Routeは・・・何だろう
上に紹介したマイクロソフトのリンクだと無視されてる
ContentTemplateに設定するのはDataTempleで、MainPageならlocal、NewPage1ならpagesになってるけど、これは上のshellタグに書いてあるclr-namespaceに書いたのと同じ名前
usingと同じ使い方なのかも?

    <FlyoutItem Route="top"

                FlyoutDisplayOptions="AsMultipleItems">

        <ShellContent Route="home"

                      Title="ホーム"

                      ContentTemplate="{DataTemplate local:MainPage}"/>

        <ShellContent Route="ichi"

                      Title="一番"

                      ContentTemplate="{DataTemplate pages:NewPage1}"/>

    </FlyoutItem>

 

タブに表示しないでハンバーガーメニューの中から呼びたいだけのページは
ShellContent
に入れてしまう。最初に作られたのは邪魔なのでコメントにするか削除

    <!--<ShellContent

        Title="Home"

        ContentTemplate="{DataTemplate local:MainPage}"

        Route="MainPage" />-->

    <ShellContent

        Route="about"

        Title="About"

        ContentTemplate="{DataTemplate pages:about}"

        />

    <ShellContent

        Route="help"

        Title="Help"

        ContentTemplate="{DataTemplate pages:help}"

        />

 

ハンバーガーメニュー

ハンバーガーメニュー、開いたところ

これで出来たのがこのページだけどここまで面倒を見てくれるのかぁ
次はこれを使ってみよう

おしまい