Menerapkan navigasi antara dua halaman

Pelajari cara menggunakan bingkai dan halaman untuk mengaktifkan navigasi peer-to-peer dasar di aplikasi Anda.

Hampir setiap aplikasi memerlukan navigasi antar halaman. Bahkan aplikasi sederhana dengan satu halaman konten biasanya akan memiliki halaman pengaturan yang memerlukan navigasi. Dalam artikel ini, kami membahas dasar-dasar penambahan XAML Page ke aplikasi Anda, dan menggunakan Frame untuk menavigasi antar halaman.

Penting

Kami menggunakan templat Aplikasi Kosong dari Microsoft Visual Studio untuk contoh ini. Ada perbedaan dalam templat untuk aplikasi SDK Aplikasi Windows/WinUI 3 dan aplikasi UWP, jadi pastikan untuk memilih tab yang benar untuk jenis aplikasi Anda.

SDK Aplikasi Windows

• Berlaku untuk: SDK Aplikasi Windows/WinUI3
• API penting: Kelas Microsoft.UI.Xaml.Controls.Frame, kelas Microsoft.UI.Xaml.Controls.Page, namespace Layanan Microsoft.UI.Xaml.Navigation

UWP

• Berlaku untuk: UWP/WinUI2
• API Penting: Kelas Windows.UI.Xaml.Controls.Frame, kelas Windows.UI.Xaml.Controls.Page, namespace Windows.UI.Xaml.Navigation

1. Buat aplikasi kosong

SDK Aplikasi Windows

Untuk membuat aplikasi kosong di Visual Studio:

1. Untuk menyiapkan komputer pengembangan Anda, lihat Menginstal alat untuk SDK Aplikasi Windows.
2. Dari jendela mulai Microsoft Visual Studio, pilih Buat proyek baru, ATAU, pada menu Visual Studio, pilih File>ProyekBaru>.
3. Di menu drop-down Buat filter dialog proyek baru , pilih C# atau C++, Windows, dan WinUI.
4. Pilih templat proyek Aplikasi Kosong, Paket (WinUI 3 di Desktop), dan klik Berikutnya. Templat itu membuat aplikasi desktop dengan antarmuka pengguna berbasis WinUI 3.
5. Dalam kotak Nama proyek , masukkan BasicNavigation, dan klik Buat.
6. Untuk menjalankan program, pilih Debug>Mulai Debugging dari menu, atau tekan F5. Buat dan jalankan solusi Anda di komputer pengembangan untuk mengonfirmasi bahwa aplikasi berjalan tanpa kesalahan. Halaman kosong ditampilkan.
7. Untuk menghentikan penelusuran kesalahan dan kembali ke Visual Studio, keluar dari aplikasi, atau klik Hentikan Debugging dari menu.
8. Hapus kode contoh apa pun yang disertakan dalam templat dari MainWindow.xaml file dan MainWindow di belakang kode.

Tip

Untuk informasi selengkapnya, lihat Membuat proyek WinUI 3 (SDK Aplikasi Windows) pertama Anda.

UWP

Untuk membuat aplikasi kosong di Visual Studio:

1. Dari jendela mulai Microsoft Visual Studio, pilih Buat proyek baru, ATAU, pada menu Visual Studio, pilih File>ProyekBaru>.
2. Di menu drop-down Buat filter dialog proyek baru , pilih C# atau C++, Windows, dan UWP.
3. Pilih templat proyek Aplikasi Kosong (Universal Windows) (C#) atau Aplikasi Kosong (C++/WinRT), dan klik Berikutnya.
4. Dalam kotak Nama proyek , masukkan BasicNavigation, dan klik Buat.
5. Dalam dialog Proyek Windows Baru , klik OK untuk menerima default untuk versi platform target dan minimum. Solusi dibuat, dan file proyek muncul di Penjelajah Solusi.
6. Untuk menjalankan program, pilih Debug>Mulai Debugging dari menu, atau tekan F5. Buat dan jalankan solusi Anda di komputer pengembangan untuk mengonfirmasi bahwa aplikasi berjalan tanpa kesalahan. Halaman kosong ditampilkan.
7. Untuk menghentikan penelusuran kesalahan dan kembali ke Visual Studio, keluar dari aplikasi, atau klik Hentikan Debugging dari menu.

Tip

Untuk informasi selengkapnya, lihat:

• Membuat aplikasi "Halo, Dunia" di C #
• Membuat aplikasi "Halo, Dunia" di C++/WinRT

2. Gunakan Bingkai untuk menavigasi antar halaman

Saat aplikasi Anda memiliki beberapa halaman, Anda menggunakan Bingkai untuk menavigasi di antaranya. Kelas ini Frame mendukung berbagai metode navigasi seperti Navigate, GoBack, dan GoForward, dan properti seperti BackStack, ForwardStack, dan BackStackDepth.

SDK Aplikasi Windows

Saat Anda membuat proyek SDK Aplikasi Windows baru di Visual Studio, templat proyek membuat MainWindow kelas (jenis Microsoft.UI.Xaml.Window). Namun, ini tidak membuat Bingkai atau Halaman dan tidak menyediakan kode navigasi apa pun.

Untuk mengaktifkan navigasi antar halaman, tambahkan Frame sebagai elemen akar .MainWindow Anda dapat melakukannya dalam metode Application.OnLaunched mengambil alih dalam App.xaml file code-behind. App Buka file code-behind, perbarui penimpaanOnLaunched, dan tangani peristiwa NavigationFailed seperti yang ditunjukkan di sini.

// 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);
}

Catatan

Untuk aplikasi dengan navigasi yang lebih kompleks, Anda biasanya akan menggunakan NavigationView sebagai akar MainWindow, dan menempatkan Frame sebagai konten tampilan navigasi. Untuk informasi selengkapnya, lihat Tampilan navigasi.

UWP

Saat Anda membuat proyek UWP baru di Visual Studio, templat proyek membuat Bingkai dan MainPage untuk Anda, bersama dengan kode untuk dinavigasi saat MainPage aplikasi dimulai. Kode ini dibuat dalam metode Application.OnLaunched yang diambil alih dalam App.xaml file code-behind.

Di sini, Bingkai yang disebut rootFrame dibuat dan diatur sebagai konten Jendela saat ini. Kemudian, Frame dinavigasi ke 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);
}

Metode Navigasi digunakan untuk menampilkan konten dalam ini Frame. Di sini, MainPage.xaml diteruskan ke Navigate metode , sehingga metode dimuat di .FrameMainPage

Jika navigasi ke jendela awal aplikasi gagal, NavigationFailed peristiwa terjadi, dan kode ini melemparkan pengecualian di penanganan aktivitas.

3. Tambahkan halaman dasar

Templat Aplikasi Kosong tidak membuat beberapa halaman aplikasi untuk Anda. Sebelum dapat menavigasi antar halaman, Anda perlu menambahkan beberapa halaman ke aplikasi Anda.

SDK Aplikasi Windows

Untuk menambahkan item baru ke aplikasi Anda:

1. Di Penjelajah Solusi, klik kanan simpul BasicNavigation proyek untuk membuka menu konteks.
2. Pilih Tambahkan>Item Baru dari menu konteks.
3. Dalam kotak dialog Tambahkan Item Baru , pilih simpul WinUI di panel kiri, lalu pilih Halaman Kosong (WinUI 3) di panel tengah.
4. Dalam kotak Nama , masukkan MainPage dan tekan tombol Tambahkan .
5. Ulangi langkah 1-4 untuk menambahkan halaman kedua, tetapi dalam kotak Nama , masukkan Page2.

Sekarang, file-file ini harus terdaftar sebagai bagian dari proyek Anda 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

Penting

Untuk proyek C++, Anda harus menambahkan #include direktif dalam file header setiap halaman yang mereferensikan halaman lain. Untuk contoh navigasi antar-halaman yang disajikan di sini, file mainpage.xaml.h berisi #include "Page2.xaml.h", pada gilirannya, page2.xaml.h berisi #include "MainPage.xaml.h".

Templat halaman C++ juga menyertakan contoh Button dan mengklik kode handler yang perlu Anda hapus dari XAML dan file code-behind untuk halaman tersebut.

UWP

Untuk menambahkan item baru ke aplikasi Anda:

1. Di Penjelajah Solusi, klik kanan simpul BasicNavigation proyek untuk membuka menu konteks.

2. Pilih Tambahkan>Item Baru dari menu konteks.

3. Dalam kotak dialog Tambahkan Item Baru :

   • (C#) pilih simpul WinUI di panel kiri, lalu pilih Halaman Kosong (WinUI 3) di panel tengah.
   • (C++/WinRT) pilih simpul Visual C++ di panel kiri, lalu pilih Halaman Kosong (C++/WinRT) di panel tengah.

4. Dalam kotak Nama , masukkan Page2 dan tekan tombol Tambahkan .

Sekarang, file-file ini harus terdaftar sebagai bagian dari proyek Anda 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

Penting

Untuk proyek C++, Anda harus menambahkan #include direktif dalam file header setiap halaman yang mereferensikan halaman lain. Untuk contoh navigasi antar-halaman yang disajikan di sini, file mainpage.h berisi #include "Page2.h", pada gilirannya, page2.h berisi #include "MainPage.h".

Templat halaman C++ juga menyertakan contoh Button dan klik kode handler yang perlu Anda hapus dari XAML dan file code-behind untuk halaman tersebut.

Menambahkan konten ke halaman

Di MainPage.xaml, ganti konten halaman yang sudah ada dengan konten berikut:

<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 ini menambahkan:

• Elemen TextBlock bernama pageTitle dengan properti Teksnya diatur ke Main Page sebagai elemen turunan dari Kisi akar.
• Elemen HyperlinkButton yang digunakan untuk menavigasi ke halaman berikutnya sebagai elemen anak dari Kisi akar.

MainPage Dalam file code-behind, tambahkan kode berikut untuk menangani Click peristiwa HyperlinkButton yang Anda tambahkan untuk mengaktifkan navigasi ke Page2.xaml.

SDK Aplikasi Windows

// 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>());
}

UWP

// 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 adalah subkelas dari kelas Halaman . Kelas Page memiliki properti Bingkai baca-saja yang mendapatkan Frame yang berisi Page. Saat penanganan ClickHyperlinkButton aktivitas dalam MainPage panggilan Frame.Navigate(typeof(Page2)), Frame menampilkan konten Page2.xaml.

Setiap kali halaman dimuat ke dalam bingkai, halaman tersebut ditambahkan sebagai PageStackEntry ke BackStack atau ForwardStackbingkai, memungkinkan riwayat dan navigasi mundur.

Sekarang, lakukan hal yang sama di Page2.xaml. Ganti konten halaman yang sudah ada dengan konten berikut:

<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 Dalam file code-behind, tambahkan kode berikut untuk menangani Click peristiwa HyperlinkButton untuk menavigasi ke MainPage.xaml.

SDK Aplikasi Windows

// 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>());
}

UWP

// 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>());
}

Buat dan jalankan aplikasi. Klik tautan yang mengatakan "Klik untuk masuk ke halaman 2". Halaman kedua yang bertuliskan "Halaman 2" di bagian atas harus dimuat dan ditampilkan dalam bingkai. Sekarang klik tautan di Halaman 2 untuk kembali ke Halaman Utama.

4. Meneruskan informasi antar halaman

Aplikasi Anda sekarang menavigasi antara dua halaman, tetapi benar-benar belum melakukan sesuatu yang menarik. Seringkali, ketika aplikasi memiliki beberapa halaman, halaman perlu berbagi informasi. Sekarang Anda akan meneruskan beberapa informasi dari halaman pertama ke halaman kedua.

Di MainPage.xaml, ganti yang HyperlinkButton Anda tambahkan sebelumnya dengan StackPanel berikut. Ini menambahkan label TextBlock dan Kotakname Teks untuk memasukkan string teks.

<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>

Sekarang Anda akan menggunakan kelebihan beban kedua metode Navigate dan meneruskan teks dari kotak teks sebagai parameter kedua. Berikut adalah tanda tangan kelebihan beban ini Navigate :

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

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

Di penanganan HyperlinkButton_ClickMainPage aktivitas file code-behind, tambahkan parameter kedua ke Navigate metode yang mereferensikan Text properti kotak name teks.

SDK Aplikasi Windows

// 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()));
}

UWP

// 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()));
}

Di Page2.xaml, ganti yang HyperlinkButton Anda tambahkan sebelumnya dengan yang berikut ini StackPanel. Ini menambahkan TextBlock untuk menampilkan string teks yang diteruskan dari MainPage.

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

Page2 Dalam file code-behind, tambahkan kode berikut untuk mengambil alih OnNavigatedTo metode :

SDK Aplikasi Windows

// 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);
}

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.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);
}

Jalankan aplikasi, ketik nama Anda di kotak teks, lalu klik tautan yang bertuliskan Click to go to page 2.

Click Ketika peristiwa HyperlinkButton dalam panggilan Frame.Navigate(typeof(Page2), name.Text), name.Text properti diteruskan MainPage ke Page2, dan nilai dari data peristiwa digunakan untuk pesan yang ditampilkan di halaman.

5. Cache halaman

Konten dan status halaman tidak di-cache secara default, jadi jika Anda ingin menyimpan informasi cache, Anda harus mengaktifkannya di setiap halaman aplikasi Anda.

Dalam contoh peer-to-peer dasar kami, ketika Anda mengklik Click to go to page 1 tautan pada Page2, TextBox (dan bidang lainnya) disetel MainPage ke status defaultnya. Salah satu cara untuk mengatasinya adalah dengan menggunakan properti NavigationCacheMode untuk menentukan bahwa halaman ditambahkan ke cache halaman bingkai.

Secara default, instans halaman baru dibuat dengan nilai defaultnya setiap kali navigasi terjadi. Di MainPage.xaml, atur NavigationCacheMode ke Enabled (dalam tag pembuka) untuk menyimpan Page halaman dan mempertahankan semua konten dan nilai status untuk halaman hingga cache halaman untuk bingkai terlampaui. Atur NavigationCacheMode ke Diperlukan jika Anda ingin mengabaikan batas CacheSize , yang menentukan jumlah halaman dalam riwayat navigasi yang dapat di-cache untuk bingkai. Namun, perlu diingat bahwa batas ukuran cache mungkin penting, tergantung pada batas memori perangkat.

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

Sekarang, ketika Anda mengklik kembali ke halaman utama, nama yang Anda masukkan di kotak teks masih ada.

6. Sesuaikan animasi transisi halaman

Secara default, setiap halaman dianimasikan ke dalam bingkai saat navigasi terjadi. Animasi default adalah animasi "masuk" yang menyebabkan halaman meluncur ke atas dari bagian bawah jendela. Namun, Anda dapat memilih berbagai opsi animasi yang lebih sesuai dengan navigasi aplikasi Anda. Misalnya, Anda dapat menggunakan animasi "telusuri" untuk memberikan perasaan bahwa pengguna masuk lebih dalam ke aplikasi Anda, atau animasi slide horizontal untuk memberikan perasaan bahwa dua halaman adalah serekan. Untuk informasi selengkapnya, lihat Transisi halaman.

Animasi ini diwakili oleh sub-kelas NavigationTransitionInfo. Untuk menentukan animasi yang akan digunakan untuk transisi halaman, Anda akan menggunakan kelebihan beban ketiga metode Navigate dan meneruskan NavigationTransitionInfo sub-kelas sebagai parameter ketiga (infoOverride). Berikut adalah tanda tangan kelebihan beban ini Navigate :

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

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

HyperlinkButton_Click Dalam penanganan MainPage aktivitas file code-behind, tambahkan parameter ketiga ke Navigate metode yang mengatur infoOverride parameter ke SlideNavigationTransitionInfo dengan properti Efeknya diatur ke FromRight.

SDK Aplikasi Windows

// 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);
}

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/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);
}

Dalam penanganan HyperlinkButton_ClickPage2 aktivitas file code-behind, atur infoOverride parameter ke SlideNavigationTransitionInfo dengan properti Efeknya diatur ke FromLeft.

SDK Aplikasi Windows

// 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);
}

UWP

// 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);
}

Sekarang, ketika Anda menavigasi antar halaman, halaman bergeser ke kiri dan kanan, yang memberikan perasaan yang lebih alami untuk transisi ini dan memperkuat koneksi antara halaman.

Artikel terkait

• Dasar-dasar desain navigasi untuk aplikasi Windows
• Tampilan navigasi
• Riwayat navigasi dan navigasi mundur