🐙

MAUIでアプリ作成(4)

2024/05/10に公開

MAUI

tech

MAUIサンプル

シェルでのページ遷移

MAUIプロジェクトを新規作成した直後は、ソリューションエクスプローラ内に「App.xaml」と「AppShell.xaml」が作られています。AppShellを使用する事で、ページ遷移を実装する事が出来ます。

そもそもの実装

App.xaml.csを見ると、

MainPage = new AppShell();

と書かれており、これによりApplicationクラスのMainPageプロパティに「AppShell」のインスタンスを登録しており、最初に開くAppShellを開くことになります。
AppShell.xamlを見ると、一つだけ「ShellContent」が記述されていますが、これは複数登録する事が出来ます。

<Shell
    x:Class="MauiListBindingSample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiListBindingSample"
    Shell.FlyoutBehavior="Disabled"
    Title="MauiListBindingSample"
    FlyoutHeaderBehavior="CollapseOnScroll">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Title="Page1"
            ContentTemplate="{DataTemplate local:MainPage}"
            Route="MainPage" />
        <ShellContent
             Title="Page2"
             ContentTemplate="{DataTemplate local:MainPage}"
             Route="MainPage" />
    </FlyoutItem>
</Shell>

RouteにViewを登録する必要がありますが、複数作成したShellContentに対して、ここでは同じMainPageを指定しています。違うPageを設定する事で、画面が切り替わりますが、簡単に説明したいので、Titleだけ変えています。

詳細はMicrosoftのページに記載があります。

このページに記載されているコードは一部なので、その他の必要な実装を行ってみました。
新規プロジェクトを作製して、
Viewフォルダを作成して、いくつかのPageを追加しましょう。
Pageの追加は、作成したviewsフォルダを右クリックして「追加」「新しい項目」から「.NET MAUI ContentPage(XAML)」を選択下さい。

ソリューションエクスプローラはこんな感じ

AppShell.xamlにMicrosoftページに記載のコードを記述

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ShellAppSample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ShellAppSample"
    xmlns:views="clr-namespace:ShellAppSample.views"
    Shell.FlyoutBehavior="Disabled"
    Title="ShellAppSample">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <!--
        Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified.
        This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
        which can only ever contain Tab objects, which can only ever contain ShellContent objects.

        The implicit conversion automatically wraps the ShellContent objects below in Tab objects.
        -->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

</Shell>

追加したそれぞれのページには、遷移した際の分かる様に、Label等でページ名を明記しときます。

<?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="ShellAppSample.views.CatsPage"
             Title="CatsPage">
    <VerticalStackLayout>
        <Label 
            Text="CatsPage"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

Resourcesフォルダ内に画像を置くと、見た目も良くなるけど、絵心無いのでそこはスルーしました。

MAUIサンプル

シェルでのページ遷移

そもそもの実装

Discussion