[.NET MAUI] 新しい画面(ContentPage)を追加する

VS2022メニューバー – プロジェクト(P) – 新しい項目の追加(W)…

.NET MAUI ContentPage(XAML) – ファイル名を決める( ここではNewPage1) – 追加(A)

 

AppShell.xamlに新しいページ(NewPage1)を追加。

■ AppShell.xaml
<?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">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

    <ShellContent
        Title="NewPage1"
        ContentTemplate="{DataTemplate local:NewPage1}"
        Route="NewPage1" />

</Shell>

 

追加したNewPage1を別ウィンドウで開く場合と、同じ画面内で画面遷移する例。

■ MainPage.xaml.cs
namespace MauiApp;


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

.
.
.
    private void OnNewWindowClicked(object sender, EventArgs e)
    {
        // 別ウィンドウで開く
        Window secondWindow = new Window(new NewPage1());
        Application.Current.OpenWindow(secondWindow);
    }

    private async void OnNewPageClicked(object sender, EventArgs e)
    {
        // 同じウィンドウ内で画面遷移
        await Shell.Current.GoToAsync("//NewPage1");
    }
}

 

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

    <ScrollView>

        <VerticalStackLayout

            Spacing="25"

            Padding="30,0"

            VerticalOptions="Center">

・
・
・

            <Button

                x:Name="NewWindowBtn"

                Text="New Window"

                SemanticProperties.Hint="Open the new window"

                Clicked="OnNewWindowClicked"

                HorizontalOptions="Center" />


            <Button

                x:Name="NewPageBtn"

                Text="New Page"

                SemanticProperties.Hint="Move to new page"

                Clicked="OnNewPageClicked"

                HorizontalOptions="Center" />

        </VerticalStackLayout>

    </ScrollView>

</ContentPage>

 

New Windowで開いた場合。別のウィンドウとして開くので、初期状態のNewPage1にはタイトル部が無いようです。

 

同じウィンドウ内に開いた場合。タイトル部が表示されました。同じウィンドウ内に開く場合は戻るボタンが必要ですね。

 

開発環境:Visual Studio 2022 Community バージョン17.3

プロジェクトテンプレート:.NET MAUI アプリ

自分用覚書です。動かなかったらごめんなさい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


リンクが含まれる投稿はサイト管理者の承認後に表示されます(スパム対策)