2 ページ間でのピアツーピアのナビゲーション - Windows apps

[アーティクル]
06/02/2023

フレームおよびページを使用した、アプリでの基本的なピアツーピアのナビゲーションについて説明します。

ピアツーピアのナビゲーション

ほぼすべてのアプリでページ間のナビゲーションが必要です。 1 つのコンテンツページを持つ単純なアプリでも、通常はナビゲーションを必要とする設定ページがあります。この記事では、アプリに XAML Page を追加し、を使用して Frame ページ間を移動する方法の基本について説明します。

重要

この例では、Microsoft Visual Studio の 空のアプリ テンプレートを使用します。 Windows アプリ SDK/WinUI 3 アプリと UWP アプリのテンプレートには違いがあるため、アプリの種類に適したタブを選択してください。

Windows App SDK
UWP

適用対象: Windows アプリ SDK/WinUI3
重要な API: Microsoft.UI.Xaml.Controls.Frame クラス、 Microsoft.UI.Xaml.Controls.Page クラス、 Microsoft.UI.Xaml.Navigation 名前空間

Visual Studio で空のアプリを作成するには:

開発コンピューターをセットアップするには、「Windows App SDK 用のツールをインストールする」を参照してください。
Microsoft Visual Studio のスタートウィンドウで、[ 新しいプロジェクトの作成] を選択するか、Visual Studio メニューの [ ファイル>] [新しい>プロジェクト] の順に選択します。
[ 新しいプロジェクトの作成 ] ダイアログのドロップダウンフィルターで、それぞれ [C# ] または [ C++]、[ Windows]、[ WinUI] を選択します。
プロジェクトテンプレートとして [空のアプリ、パッケージ (WinUI 3 in Desktop)] を選択し、[次へ] をクリックします。そのテンプレートで、WinUI 3 ベースのユーザーインターフェイスを使用したデスクトップアプリが作成されます。
[ プロジェクト名 ] ボックスに「」と入力 BasicNavigationし、[ 作成] をクリックします。
プログラムを実行するには、メニューから [デバッグ]>[デバッグの開始] の順にクリックするか、F5 キーを押します。開発用コンピューター上でソリューションをビルドして実行し、アプリがエラーなしで動作することを確認します。空白のページが表示されます。
デバッグを終了して Visual Studio に戻るには、アプリを終了するか、メニューから [デバッグの停止] クリックします。
テンプレートに含まれているコード例を、および MainWindow 分離コードファイルからMainWindow.xaml削除します。

ヒント

詳細については、「初めての WinUI 3 (Windows アプリ SDK) プロジェクトを作成する」を参照してください。

Visual Studio で空のアプリを作成するには:

Microsoft Visual Studio のスタートウィンドウで、[ 新しいプロジェクトの作成] を選択するか、Visual Studio メニューの [ ファイル>] [新しい>プロジェクト] の順に選択します。
[ 新しいプロジェクトの作成 ] ダイアログのドロップダウンフィルターで、それぞれ C# または C++、 Windows、 UWP を選択します。
空の アプリ (ユニバーサル Windows) (C#) または 空のアプリ (C++/WinRT) プロジェクトテンプレートを選択し、[ 次へ] をクリックします。
[ プロジェクト名 ] ボックスに「」と入力 BasicNavigationし、[ 作成] をクリックします。
[ 新しい Windows プロジェクト ] ダイアログで、[ OK] をクリックして 、ターゲットと最小プラットフォームのバージョンの既定値をそのまま使用します。ソリューションが作られ、プロジェクトファイルがソリューションエクスプローラーに表示されます。
プログラムを実行するには、メニューから [デバッグ]>[デバッグの開始] の順にクリックするか、F5 キーを押します。開発用コンピューター上でソリューションをビルドして実行し、アプリがエラーなしで動作することを確認します。空白のページが表示されます。
デバッグを終了して Visual Studio に戻るには、アプリを終了するか、メニューから [デバッグの停止] クリックします。

ヒント

For more info, see:

2. フレームを使用してページ間を移動する

アプリに複数のページがある場合は、 Frame を使用してページ間を移動します。クラスはFrame、Navigate、GoBack、GoForward などのさまざまなナビゲーションメソッドと、BackStack、ForwardStack、BackStackDepth などのプロパティをサポートしています。

Windows App SDK
UWP

Visual Studio で新しいWindows アプリ SDK プロジェクトを作成すると、プロジェクトテンプレートによって (Microsoft.UI.Xaml.Window 型の) クラスが作成MainWindowされます。ただし、フレームまたはページは作成せず、ナビゲーションコードも提供しません。

ページ間のナビゲーションを有効にするには、のMainWindowルート要素としてを追加Frameします。これを行うには、分離コードファイルの Application.OnLaunched メソッドの App.xaml オーバーライドを使用します。分離コードファイルを App 開き、オーバーライドを OnLaunched 更新し、次に示すように NavigationFailed イベントを処理します。

// App.xaml.cs

protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
    m_window = new MainWindow();

    // Create a Frame to act as the navigation context and navigate to the first page
    Frame rootFrame = new Frame();
    rootFrame.NavigationFailed += OnNavigationFailed;
    // Navigate to the first page, configuring the new page
    // by passing required information as a navigation parameter
    rootFrame.Navigate(typeof(MainPage), args.Arguments);

    // Place the frame in the current Window
    m_window.Content = rootFrame;
    // Ensure the MainWindow is active
    m_window.Activate();
}

void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

// App.xaml.h

// Add after OnLaunched declaration.
void OnNavigationFailed(IInspectable const&, Microsoft::UI::Xaml::Navigation::NavigationFailedEventArgs const&);

///////////////
// App.xaml.cpp

void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    window = make<MainWindow>();
    Frame rootFrame = Frame();
    rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });
    rootFrame.Navigate(xaml_typename<BasicNavigation::MainPage>(), box_value(e.Arguments()));
    window.Content(rootFrame);
    window.Activate();
}

void App::OnNavigationFailed(IInspectable const&, NavigationFailedEventArgs const& e)
{
    throw hresult_error(E_FAIL, hstring(L"Failed to load Page ") + e.SourcePageType().Name);
}

Note

より複雑なナビゲーションを使用するアプリの場合は、通常、MainWindow のルートとして NavigationView を使用し、ナビゲーションビューのコンテンツとしてを配置 Frame します。詳細については、「ナビゲーションビュー」を参照してください。

Visual Studio で新しい UWP プロジェクトを作成すると、プロジェクトテンプレートによって Frame が作成され MainPage 、アプリの起動時に移動するコードが自動的に MainPage 作成されます。このコードは、分離コードファイルの Application.OnLaunched メソッドオーバーライドで App.xaml 作成されます。

ここでは、という名前rootFrameの Frame が作成され、現在の Window のコンテンツとして設定されます。次に Frame 、がに MainPage移動します。

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();
    }
}

void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
{
    throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
}

// App.cpp

void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    Frame rootFrame{ nullptr };
    auto content = Window::Current().Content();
    if (content)
    {
        rootFrame = content.try_as<Frame>();
    }

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == nullptr)
    {
        // Create a Frame to act as the navigation context and associate it with
        // a SuspensionManager key
        rootFrame = Frame();

        rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });

        if (e.PreviousExecutionState() == ApplicationExecutionState::Terminated)
        {
            // Restore the saved session state only when appropriate, scheduling the
            // final launch steps after the restore is complete
        }

        if (e.PrelaunchActivated() == false)
        {
            if (rootFrame.Content() == nullptr)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(xaml_typename<NavApp1::Page1>(), box_value(e.Arguments()));
            }
            // Place the frame in the current Window
            Window::Current().Content(rootFrame);
            // Ensure the current window is active
            Window::Current().Activate();
        }
    }
    else
    {
        if (e.PrelaunchActivated() == false)
        {
            if (rootFrame.Content() == nullptr)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(xaml_typename<NavApp1::Page1>(), box_value(e.Arguments()));
            }
            // Ensure the current window is active
            Window::Current().Activate();
        }
    }
}

void App::OnNavigationFailed(IInspectable const&, NavigationFailedEventArgs const& e)
{
    throw hresult_error(E_FAIL, hstring(L"Failed to load Page ") + e.SourcePageType().Name);
}

Navigate メソッドは、この Frame内のコンテンツを表示するために使用されます。ここでは、 MainPage.xaml がメソッドにNavigate渡されるため、メソッドはにFrame読み込まれますMainPage。

アプリの初期ウィンドウへのナビゲーションが失敗すると、 NavigationFailed イベントが発生し、このコードはイベントハンドラーで例外をスローします。

3. 基本ページを追加する

空のアプリ テンプレートでは、複数のアプリページは作成されません。ページ間を移動する前に、いくつかのページをアプリに追加する必要があります。

Windows App SDK
UWP

アプリに新しい項目を追加するには:

ソリューションエクスプローラーで、プロジェクトノードをBasicNavigation右クリックしてコンテキストメニューを開きます。
コンテキストメニューから [新しい項目の追加]> を選択します。
[ 新しい項目の追加 ] ダイアログボックスで、左側のウィンドウで [WinUI ] ノードを選択し、中央のウィンドウで [空白ページ (WinUI 3)] を選択します。
[ 名前 ] ボックスに「」と入力 MainPage し、[ 追加 ] ボタンを押します。
手順 1 から 4 を繰り返して 2 番目のページを追加しますが、[ 名前 ] ボックスに「」と入力 Page2します。

これで、これらのファイルがプロジェクトの BasicNavigation 一部として一覧表示されます。

C#	C++
MainPage.xaml MainPage.xaml.cs Page2.xaml Page2.xaml.cs	MainPage.xaml MainPage.xaml.cpp MainPage.xaml.h Page2.xaml Page2.xaml.cpp Page2.xaml.h

重要

C++ プロジェクトの場合は、別のページを #include 参照する各ページのヘッダーファイルにディレクティブを追加する必要があります。ここで示すページ間ナビゲーションの例では、mainpage.xaml.h ファイルにはが含まれています #include "Page2.xaml.h"。さらに、page2.xaml.h にはが #include "MainPage.xaml.h"含まれています。

C++ ページテンプレートには、ページの XAML ファイルと分離コードファイルから削除する必要がある例 Button とクリックハンドラーコードも含まれています。

アプリに新しい項目を追加するには:

ソリューションエクスプローラーで、プロジェクトノードをBasicNavigation右クリックしてコンテキストメニューを開きます。
コンテキストメニューから [新しい項目の追加]> を選択します。
[ 新しい項目の追加 ] ダイアログボックスで、次の手順を実行します。
- (C#) 左側のウィンドウで WinUI ノードを選択し、中央のウィンドウで [空白ページ (WinUI 3)] を選択します。
- (C++/WinRT) 左側のウィンドウで [Visual C++] ノードを選択し、中央のウィンドウで [空白ページ (C++/WinRT)] を選択します。
[ 名前 ] ボックスに「」と入力 Page2 し、[ 追加 ] ボタンを押します。

これで、これらのファイルがプロジェクトの BasicNavigation 一部として一覧表示されます。

C#	C++
MainPage.xaml MainPage.xaml.cs Page2.xaml Page2.xaml.cs	MainPage.xaml MainPage.cpp MainPage.h Page2.xaml Page2.cpp Page2.h

重要

C++ プロジェクトの場合は、別のページを #include 参照する各ページのヘッダーファイルにディレクティブを追加する必要があります。ここで示すページ間ナビゲーションの例では、mainpage.h ファイルにはが含まれています #include "Page2.h"。さらに、page2.h にはが #include "MainPage.h"含まれています。

ページにコンテンツを追加する

で MainPage.xaml、既存のページコンテンツを次のコンテンツに置き換えます。

<Grid>
    <TextBlock x:Name="pageTitle" Text="Main Page"
               Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton Content="Click to go to page 2"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</Grid>

この XAML では、次の項目が追加されます。

Text プロパティがルート Grid の子要素としてにMain Page設定されたという名前pageTitleの TextBlock 要素。
ルート Grid の子要素として次のページに移動するために使用される HyperlinkButton 要素。

分離コードファイルで MainPage 、次のコードを追加して、 Click へのナビゲーションを有効にするために追加した HyperlinkButton のイベントを処理します Page2.xaml。

Windows App SDK
UWP

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2));
}

// pch.h
// Add this include in pch.h to support winrt::xaml_typename

#include <winrt/Windows.UI.Xaml.Interop.h>

////////////////////
// MainPage.xaml.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);

////////////////////
// MainPage.xaml.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>());
}

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2));
}

// MainPage.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);

///////////////
// MainPage.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>());
}

MainPage は Page クラスのサブクラスです。 Pageクラスには、を含むをFrame取得する読み取り専用の Frame プロパティがありますPage。の ClickMainPage イベントハンドラーがをHyperlinkButton呼び出Frame.Navigate(typeof(Page2))すと、 Frame の内容Page2.xamlが表示されます。

ページがフレームに読み込まれるたびに、そのページは PageStackEntry としてフレームの BackStack または ForwardStack に追加され、履歴と後方ナビゲーションが可能になります。

ここで、で Page2.xaml同じ操作を行います。既存のページコンテンツを次の内容に置き換えます。

<Grid>
    <TextBlock x:Name="pageTitle" Text="Page 2"
               Margin="16" Style="{StaticResource TitleTextBlockStyle}"/>
    <HyperlinkButton Content="Click to go to main page"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</Grid>

分離コードファイルでPage2、HyperlinkButton のイベントを処理Clickしてに移動する次のコードをMainPage.xaml追加します。

Windows App SDK
UWP

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage));
}

// Page2.xaml.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);

/////////////////
// Page2.xaml.cpp

void winrt::BasicNavigation::implementation::Page2::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>());
}

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage));
}

// Page2.h

void HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);

///////////////
// Page2.cpp

void winrt::BasicNavigation::implementation::Page2::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>());
}

アプリケーションをビルドし、実行します。 "Click to go to page 2" と書かれているリンクをクリックします。上部に "Page 2" と書かれた 2 番目のページが読み込まれ、フレームに表示される必要があります。次に、ページ 2 のリンクをクリックしてメインページに戻ります。

4. ページ間で情報を渡す

これで、アプリは 2 つのページ間を移動しますが、まだ興味深いことは何も行われません。多くの場合、アプリに複数のページがあれば、ページ間で情報を共有する必要があります。次に、最初のページから 2 番目のページにいくつかの情報を渡します。

で MainPage.xaml、前に追加したを HyperlinkButton 次の StackPanel に置き換えます。これにより、テキスト文字列を入力するための TextBlock ラベルと TextBoxname が追加されます。

<StackPanel VerticalAlignment="Center">
    <TextBlock HorizontalAlignment="Center" Text="Enter your name"/>
    <TextBox HorizontalAlignment="Center" Width="200" x:Name="name"/>
    <HyperlinkButton Content="Click to go to page 2"
                              Click="HyperlinkButton_Click"
                              HorizontalAlignment="Center"/>
</StackPanel>

次に、メソッドの 2 番目のオーバーロードを Navigate 使用し、テキストボックスから 2 番目のパラメーターとしてテキストを渡します。この Navigate オーバーロードのシグネチャを次に示します。

public bool Navigate(System.Type sourcePageType, object parameter);

bool Navigate(TypeName const& sourcePageType, IInspectable const& parameter);

HyperlinkButton_Click分離コードファイルのイベントハンドラーで、テキストボックスの MainPage プロパティをNavigate参照する 2 番目のパラメーターを Text メソッドにname追加します。

Windows App SDK
UWP

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), name.Text);
}

// MainPage.xaml.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{ 
    Frame().Navigate(xaml_typename<BasicNavigation::Page2>(), winrt::box_value(name().Text()));
}

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), name.Text);
}

// MainPage.cpp

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
{
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>(), winrt::box_value(name().Text()));
}

で Page2.xaml、前に追加した HyperlinkButton を次 StackPanelのに置き換えます。これにより、からMainPage渡されたテキスト文字列を表示するための TextBlock が追加されます。

<StackPanel VerticalAlignment="Center">
    <TextBlock HorizontalAlignment="Center" x:Name="greeting"/>
    <HyperlinkButton Content="Click to go to page 1"
                     Click="HyperlinkButton_Click"
                     HorizontalAlignment="Center"/>
</StackPanel>

分離コードファイルで Page2 、次のコードを追加してメソッドを OnNavigatedTo オーバーライドします。

Windows App SDK
UWP

// Page2.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is string && !string.IsNullOrWhiteSpace((string)e.Parameter))
    {
        greeting.Text = $"Hello, {e.Parameter.ToString()}";
    }
    else
    {
        greeting.Text = "Hello!";
    }
    base.OnNavigatedTo(e);
}

// Page2.xaml.h

void Page2::OnNavigatedTo(Microsoft::UI::Xaml::Navigation::NavigationEventArgs const& e)
{
	auto propertyValue{ e.Parameter().as<Windows::Foundation::IPropertyValue>() };
	if (propertyValue.Type() == Windows::Foundation::PropertyType::String)
	{
		auto name{ winrt::unbox_value<winrt::hstring>(e.Parameter()) };
		if (!name.empty())
		{
			greeting().Text(L"Hello, " + name);
			__super::OnNavigatedTo(e);
			return;
		}
	}
	greeting().Text(L"Hello!");
	__super::OnNavigatedTo(e);
}

// Page2.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter is string && !string.IsNullOrWhiteSpace((string)e.Parameter))
    {
        greeting.Text = $"Hello, {e.Parameter.ToString()}";
    }
    else
    {
        greeting.Text = "Hello!";
    }
    base.OnNavigatedTo(e);
}

// Page2.h

void Page2::OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs const& e)
{
	auto propertyValue{ e.Parameter().as<Windows::Foundation::IPropertyValue>() };
	if (propertyValue.Type() == Windows::Foundation::PropertyType::String)
	{
		auto name{ winrt::unbox_value<winrt::hstring>(e.Parameter()) };
		if (!name.empty())
		{
			greeting().Text(L"Hello, " + name);
			__super::OnNavigatedTo(e);
			return;
		}
	}
	greeting().Text(L"Hello!");
	__super::OnNavigatedTo(e);
}

アプリを実行し、テキストボックスに自分の名前を入力し、というリンク Click to go to page 2をクリックします。

のイベントが Click を呼び出Frame.Navigate(typeof(Page2), name.Text)すと、 name.Text プロパティがにPage2渡され、イベントデータの値がページに表示されるメッセージに使用HyperlinkButtonされます。MainPage

5. ページをキャッシュする

ページのコンテンツと状態は既定ではキャッシュされないため、情報をキャッシュする場合は、アプリの各ページでキャッシュを有効にする必要があります。

基本的なピアツーピアの例では、のリンクPage2TextBoxをClick to go to page 1クリックすると、 (およびその他のフィールド) MainPage が既定の状態に設定されます。これを回避する方法の 1 つは、NavigationCacheMode プロパティを使って、ページがフレームのページキャッシュに追加されるように指定することです。

既定では、ナビゲーションが発生するたびに、既定値を使用して新しいページインスタンスが作成されます。でMainPage.xaml、を (開始Pageタグ内で) にEnabled設定NavigationCacheModeしてページをキャッシュし、フレームのページキャッシュを超えるまでページのすべてのコンテンツと状態の値を保持します。 CacheSize の制限を無視する場合は、NavigationCacheMode を Required に設定します。これで、フレームにキャッシュできる、ナビゲーション履歴内のページ数を指定します。ただし、キャッシュサイズの制限は、デバイスのメモリの制限に依存しており、重要である可能性があることに注意してください。

<Page
    x:Class="BasicNavigation.MainPage"
    ...
    mc:Ignorable="d"
    NavigationCacheMode="Enabled">

ここで、メインページに戻ると、テキストボックスに入力した名前が表示されます。

6. ページ切り替えアニメーションをカスタマイズする

既定では、ナビゲーションが発生すると、各ページがフレームにアニメーション化されます。既定のアニメーションは、ウィンドウの下部からページを上にスライドさせる "開始" アニメーションです。ただし、アプリのナビゲーションに適したさまざまなアニメーションオプションを選択できます。たとえば、"ドリルイン" アニメーションを使用して、ユーザーがアプリに深く入り込んでいるような感覚を与えたり、水平スライドアニメーションを使用して 2 つのページがピアであるという感覚を与えたりできます。詳細については、「ページ切り替え」を参照してください。

これらのアニメーションは、 NavigationTransitionInfo のサブクラスで表されます。ページ切り替えに使用するアニメーションを指定するには、メソッドの 3 番目のオーバーロードをNavigate使用し、3 番目のパラメーター (infoOverride) としてサブクラスを渡NavigationTransitionInfoします。この Navigate オーバーロードのシグネチャを次に示します。

public bool Navigate(System.Type sourcePageType, 
                     object parameter,
                     NavigationTransitionInfo infoOverride);

bool Navigate(TypeName const& sourcePageType, 
              IInspectable const& parameter, 
              NavigationTransitionInfo const& infoOverride);

分離コードファイルのHyperlinkButton_ClickMainPageイベントハンドラーで、Effect プロパティが FromRight にNavigate設定された SlideNavigationTransitionInfo にパラメーターを設定infoOverrideする 3 番目のパラメーターをメソッドに追加します。

Windows App SDK
UWP

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), 
                   name.Text,
                   new SlideNavigationTransitionInfo() 
                       { Effect = SlideNavigationTransitionEffect.FromRight});
}

// pch.h

#include <winrt/Microsoft.UI.Xaml.Media.Animation.h>

////////////////////
// MainPage.xaml.cpp

using namespace winrt::Microsoft::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromRight.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromRight));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>(),
        		     winrt::box_value(name().Text()),
                     slideEffect);
}

// MainPage.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(Page2), 
                   name.Text,
                   new SlideNavigationTransitionInfo()
                       { Effect = SlideNavigationTransitionEffect.FromRight});
}

// pch.h

#include <winrt/Windows.UI.Xaml.Media.Animation.h>

///////////////
// MainPage.cpp

using namespace winrt::Windows::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromRight.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromRight));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::Page2>(),
        		     winrt::box_value(name().Text()),
                     slideEffect);
}

HyperlinkButton_Click分離コードファイルのPage2イベントハンドラーで、パラメーターを infoOverrideSlideNavigationTransitionInfo に設定し、Effect プロパティを FromLeft に設定します。

Windows App SDK
UWP

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage),
                   null,
                   new SlideNavigationTransitionInfo() 
                       { Effect = SlideNavigationTransitionEffect.FromLeft});
}

// Page2.xaml.cpp

using namespace winrt::Microsoft::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromLeft.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromLeft));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>(),
        		     nullptr,
                     slideEffect);
}

// Page2.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(MainPage),
                   null,
                   new SlideNavigationTransitionInfo() 
                       { Effect = SlideNavigationTransitionEffect.FromLeft});
}

// Page2.cpp

using namespace winrt::Windows::UI::Xaml::Media::Animation;

// ...

void winrt::BasicNavigation::implementation::MainPage::HyperlinkButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
{   
    // Create the slide transition and set the transition effect to FromLeft.
    SlideNavigationTransitionInfo slideEffect = SlideNavigationTransitionInfo();
    slideEffect.Effect(SlideNavigationTransitionEffect(SlideNavigationTransitionEffect::FromLeft));
    Frame().Navigate(winrt::xaml_typename<BasicNavigation::MainPage>(),
        		     nullptr,
                     slideEffect);
}

ページ間を移動すると、ページは左右にスライドします。これにより、この切り替えに対してより自然な感覚が得られ、ページ間の接続が強化されます。

2 ページ間でのナビゲーションを実装する

1.空のアプリの作成

2. フレームを使用してページ間を移動する

3. 基本ページを追加する

ページにコンテンツを追加する

4. ページ間で情報を渡す

5. ページをキャッシュする

6. ページ切り替えアニメーションをカスタマイズする

フィードバック

その他のリソース

2 ページ間でのナビゲーションを実装する

1.空のアプリの作成

2. フレームを使用してページ間を移動する

3. 基本ページを追加する

ページにコンテンツを追加する

4. ページ間で情報を渡す

5. ページをキャッシュする

6. ページ切り替えアニメーションをカスタマイズする

関連記事

フィードバック

その他のリソース