MAUIでアプリ作成(5)

MAUIサンプル

ボタンクリックでページ遷移

前回は、Shellの機能で画面遷移を実装しましたが、
今回は、ボタンを押したら画面遷移を実装してみます。

プロジェクト新規作成して、デフォルトであるMainPageと、新しく作成するSubPageをボタンで遷移出来るような実装です。

実装

appShell.xaml
新規作成したSubPageを使用出来る様に登録しときます

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

    <ShellContent
        Title="Main"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />
+    <ShellContent
+        Title="Sub"
+        ContentTemplate="{DataTemplate local:SubPage}"
+        Route="SubPage" />
 </Shell>

MainPage.xaml
SubPageへ遷移する為のButtonを追加します。

 <?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="MauiApp.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
+            <Button 
+                Text="SubPage"
+                HorizontalOptions="Center" Clicked="OnClicked" />
        </VerticalStackLayout>
    </ScrollView>
 </ContentPage>

プロジェクトを右クリックして「追加」「新しい項目」で「.NET MAUI ContentPage(XAML)」を選択して、SubPageを新規作成してプロジェクトに追加します。
こちらもMainPageへ遷移する為のButtonを追加します。
SubPage.xaml

 <?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="MauiApp.SubPage"
             Title="SubPage">
    <ScrollView>
    <VerticalStackLayout>
+        <Button 
+                Text="MainPage"
+                HorizontalOptions="Center" Clicked="OnClicked" />
    </VerticalStackLayout>

    </ScrollView>
 </ContentPage>

次にbuttonイベントを実装します。もともとあったcount変数等は不要です。
MainPage.xaml.cs

namespace MauiApp17
{
    public partial class MainPage : ContentPage
    {
        //int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

+       private async void OnClicked(object sender, EventArgs e)
+        {
+            await Shell.Current.GoToAsync("//SubPage");
+        }
    }
}

SubPageの方も全く同じです。

namespace MauiApp17;

public partial class SubPage : ContentPage
{
	public SubPage()
	{
		InitializeComponent();
	}

+    private async void OnClicked(object sender,EventArgs e)
+	{
+		await Shell.Current.GoToAsync("//MainPage");
+    }
}

動作確認

起動させると、最初にMainPageが表示される。

SubPageボタンを押すと、SubPageに遷移する