.NET MAUI プロジェクト作成～画面遷移を作る

プロジェクトの作成～新しいページの追加

Visual Studio 2022 Preview で新しいプロジェクトを作成します。 テンプレートは検索ボックスに maui と入力すると .NET MAUIアプリが出てくるので選択して次へ → 作成。

プロジェクト > 新しい項目の追加 > 新しい項目の追加画面の下部に .NET MAUI 関連が並んでいるので .NET MAUI ContentPage を選択して追加。

MainPage.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="MauiApp14.MainPage">
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">
            <Button 
                x:Name="MoveBtn"
                Text="画面遷移"
                Clicked="OnMoveClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
 </ContentPage>

MainPage.cs にボタンクリックのイベント処理を入力します。

上記でボタンを押したときに OnMoveClicked を呼び出すようにしたので OnMoveClicked にナビゲーションを実行するコードを入力します。

namespace MauiApp14;

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

    private async void OnMoveClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync(nameof(NewPage1));
    }
}

AppShell.xaml にルートを登録します。

namespace MauiApp14;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(NewPage1), typeof(NewPage1));
    }
}

実行

ボタンを押すと画面遷移する。

左上にある「←」を押すと前の画面に戻れます。

次は画面の作り込みもしていきたいと思います。