Navigasi kembali untuk aplikasi UWP

API Penting: Kelas Windows.UI.Xaml.Controls.Frame, Kelas Windows.UI.Xaml.Controls.Page, Namespace Windows.UI.Xaml.Navigation, OnNavigatedTo

Untuk menerapkan navigasi mundur di aplikasi Anda, letakkan tombol kembali di sudut kiri atas UI aplikasi Anda. Pengguna mengharapkan tombol kembali untuk menavigasi ke lokasi sebelumnya dalam riwayat navigasi aplikasi. Secara default, kontrol Frame merekam tindakan navigasi dalam BackStack dan ForwardStack. Namun, Anda dapat mengubah tindakan navigasi mana yang ditambahkan ke riwayat navigasi.

Untuk sebagian besar aplikasi yang memiliki beberapa halaman, kami sarankan Anda menggunakan kontrol NavigationView untuk menyediakan kerangka kerja navigasi untuk aplikasi Anda. Ini beradaptasi dengan berbagai ukuran layar dan mendukung gaya navigasi atas dan kiri. Jika aplikasi Anda menggunakan kontrol NavigationView, maka Anda dapat menggunakan tombol kembali bawaan NavigationView.

Tombol Kembali

Untuk membuat tombol kembali, gunakan kontrol Tombol dengan NavigationBackButtonNormalStyle gaya, dan letakkan tombol di sudut kiri atas UI aplikasi Anda (untuk detailnya, lihat contoh kode XAML di bawah).

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button x:Name="BackButton"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                ToolTipService.ToolTip="Back"/>

    </Grid>
</Page>

Jika aplikasi Anda memiliki CommandBar di bagian atas, letakkan kontrol Button di area CommandBar.Content tersebut.

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <CommandBar>
            <CommandBar.Content>
                <Button x:Name="BackButton"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                        ToolTipService.ToolTip="Back" 
                        VerticalAlignment="Top"/>
            </CommandBar.Content>
        
            <AppBarButton Icon="Delete" Label="Delete"/>
            <AppBarButton Icon="Save" Label="Save"/>
        </CommandBar>
    </Grid>
</Page>

Untuk meminimalkan elemen UI yang bergerak dalam aplikasi Anda, tampilkan tombol kembali yang dinonaktifkan saat tidak ada apa pun di backstack (IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"). Namun, jika Anda mengharapkan aplikasi Anda tidak akan pernah memiliki tumpukan belakang, Anda tidak perlu menampilkan tombol kembali sama sekali.

Optimalkan untuk perangkat dan input yang berbeda

Panduan desain navigasi mundur ini berlaku untuk semua perangkat, tetapi pengguna Anda akan mendapat manfaat jika Anda mengoptimalkan faktor bentuk dan metode input yang berbeda. Sebaiknya tangani peristiwa berikut (selain klik tombol kembali) untuk mendukung input yang paling umum untuk navigasi kembali.

Contoh kode

Bagian ini menunjukkan cara menangani navigasi mundur menggunakan berbagai input.

Tombol kembali dan navigasi belakang

Setidaknya, Anda perlu menangani peristiwa tombol kembali Click dan menyediakan kode untuk melakukan navigasi kembali. Anda juga harus menonaktifkan tombol kembali saat tumpukan belakang kosong.

Contoh kode ini menunjukkan cara menerapkan perilaku navigasi mundur dengan tombol kembali. Kode merespons peristiwa Tombol Klik untuk menavigasi. Tombol kembali diaktifkan atau dinonaktifkan dalam metode OnNavigatedTo , yang dipanggil saat menavigasi ke halaman baru.

Kode ditampilkan untuk MainPage, tetapi Anda menambahkan kode ini ke setiap halaman yang mendukung navigasi balik. Untuk menghindari duplikasi, Anda dapat menempatkan kode yang berkaitan dengan navigasi di kelas App pada halaman kode-belakang App.xaml.*.

<!-- MainPage.xaml -->
<Page x:Class="AppName.MainPage">
...
        <Button x:Name="BackButton" Click="BackButton_Click"
                Style="{StaticResource NavigationBackButtonNormalStyle}"
                IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}" 
                ToolTipService.ToolTip="Back"/>
...
<Page/>

Kode di belakang:

// MainPage.xaml.cs
private void BackButton_Click(object sender, RoutedEventArgs e)
{
    App.TryGoBack();
}

// App.xaml.cs
//
// Add this method to the App class.
public static bool TryGoBack()
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
        return true;
    }
    return false;
}

// MainPage.h
#include "App.h"

namespace winrt::AppName::implementation
{
    struct MainPage : MainPageT<MainPage>
    {
        MainPage();
 
        void MainPage::BackButton_Click(IInspectable const&, RoutedEventArgs const&)
        {
            App::TryGoBack();
        }
    };
}

// App.h
#include "winrt/Windows.UI.Core.h"
#include "winrt/Windows.System.h"
#include "winrt/Windows.UI.Input.h"
#include "winrt/Windows.UI.Xaml.Input.h"
 
using namespace winrt;
using namespace Windows::Foundation;
using namespace Windows::UI::Core;
using namespace Windows::UI::Input;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;

struct App : AppT<App>
{
    App();

    // ...

    // Perform back navigation if possible.
    static bool TryGoBack()
    {
        Frame rootFrame{ nullptr };
        auto content = Window::Current().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoBack())
            {
                rootFrame.GoBack();
                return true;
            }
        }
        return false;
    }
};

Mendukung kunci akses

Dukungan keyboard bersifat integral untuk memastikan aplikasi Anda berfungsi dengan baik bagi pengguna dengan keterampilan, kemampuan, dan harapan yang berbeda. Kami menyarankan agar Anda mendukung kunci akselerator untuk navigasi maju dan balik karena pengguna yang mengandalkan ini akan mengharapkan keduanya. Untuk informasi selengkapnya, lihat interaksi keyboard dan akselerator keyboard .

Tombol akselerator umum untuk navigasi maju dan belakang adalah Alt+Panah kanan (maju) dan Alt+Panah kiri (kembali). Untuk mendukung tombol ini dalam navigasi, tangani acara CoreDispatcher.AcceleratorKeyActivated. Anda menangani sebuah event yang langsung terjadi di jendela (bukan pada elemen di halaman) sehingga aplikasi merespons tombol pintas tanpa memperhatikan elemen mana yang saat ini memiliki fokus.

Tambahkan kode ke kelas App untuk mendukung tombol akselerator dan navigasi maju, seperti yang ditunjukkan di sini. (Ini mengasumsikan bahwa kode sebelumnya untuk mendukung tombol kembali telah ditambahkan.) Anda dapat melihat semua App kode bersama-sama di akhir bagian Contoh kode.

// App.xaml.cs
// Add event handler in OnLaunched.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // ...
        // rootFrame.NavigationFailed += OnNavigationFailed;

        // Add support for accelerator keys. 
        // Listen to the window directly so the app responds
        // to accelerator keys regardless of which element has focus.
        Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated +=
            CoreDispatcher_AcceleratorKeyActivated;

        // ...

    }
}

// ...

// Add this code after the TryGoBack method added previously.
// Perform forward navigation if possible.
private bool TryGoForward()
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame.CanGoForward)
    {
        rootFrame.GoForward();
        return true;
    }
    return false;
}

// Invoked on every keystroke, including system keys such as Alt key combinations.
// Used to detect keyboard navigation between pages even when the page itself
// doesn't have focus.
private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender, AcceleratorKeyEventArgs e)
{
    // When Alt+Left are pressed navigate back.
    // When Alt+Right are pressed navigate forward.
    if (e.EventType == CoreAcceleratorKeyEventType.SystemKeyDown
        && (e.VirtualKey == VirtualKey.Left || e.VirtualKey == VirtualKey.Right)
        && e.KeyStatus.IsMenuKeyDown == true
        && !e.Handled)
    {
        if (e.VirtualKey == VirtualKey.Left)
        {
            e.Handled = TryGoBack();
        }
        else if (e.VirtualKey == VirtualKey.Right)
        {
            e.Handled = TryGoForward();
        }
    }
}

// App.cpp
void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == nullptr)
    {
        // ...
        // rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });

        // Add support for accelerator keys. 
        // Listen to the window directly so the app responds
        // to accelerator keys regardless of which element has focus.
        Window::Current().CoreWindow().Dispatcher().
            AcceleratorKeyActivated({ this, &App::CoreDispatcher_AcceleratorKeyActivated });

        // ...
    }
}

// App.h
struct App : AppT<App>
{
    App();

    // ...
    // Add this code after the TryGoBack method added previously.

private:
    // Perform forward navigation if possible.
    bool TryGoForward()
    {
        Frame rootFrame{ nullptr };
        auto content = Window::Current().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoForward())
            {
                rootFrame.GoForward();
                return true;
            }
        }
        return false;
    }
 
 
    // Invoked on every keystroke, including system keys such as Alt key combinations.
    // Used to detect keyboard navigation between pages even when the page itself
    // doesn't have focus.
    void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher const& /* sender */, AcceleratorKeyEventArgs const& e)
    {
        // When Alt+Left are pressed navigate back.
        // When Alt+Right are pressed navigate forward.
        if (e.EventType() == CoreAcceleratorKeyEventType::SystemKeyDown
            && (e.VirtualKey() == Windows::System::VirtualKey::Left || e.VirtualKey() == Windows::System::VirtualKey::Right)
            && e.KeyStatus().IsMenuKeyDown
            && !e.Handled())
        {
            if (e.VirtualKey() == Windows::System::VirtualKey::Left)
            {
                e.Handled(TryGoBack());
            }
            else if (e.VirtualKey() == Windows::System::VirtualKey::Right)
            {
                e.Handled(TryGoForward());
            }
        }
    }
};

Menangani permintaan kembali sistem

Perangkat Windows menyediakan berbagai cara agar sistem dapat meneruskan kembali permintaan navigasi ke aplikasi Anda. Beberapa cara umum adalah tombol B pada gamepad, tombol Windows + pintasan kunci Backspace, atau tombol kembali sistem dalam Mode Tablet; opsi yang tepat tersedia tergantung pada perangkat.

Anda dapat mendukung permintaan balik yang disediakan oleh sistem dari tombol kembali perangkat keras dan perangkat lunak dengan mendaftarkan pendengar untuk acara SystemNavigationManager.BackRequested.

Berikut adalah kode yang ditambahkan ke kelas App untuk mendukung permintaan kembali yang disediakan oleh sistem. (Ini mengasumsikan bahwa kode sebelumnya untuk mendukung tombol kembali telah ditambahkan.) Anda dapat melihat semua App kode bersama-sama di akhir bagian Contoh kode.

// App.xaml.cs
// Add event handler in OnLaunced.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // ...
        // Add support for accelerator keys. 
        // ... (Previously added code.)

        // Add support for system back requests. 
        SystemNavigationManager.GetForCurrentView().BackRequested 
            += System_BackRequested;

        // ...

    }
}

// ...
// Handle system back requests.
private void System_BackRequested(object sender, BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = TryGoBack();
    }
}

// App.cpp
void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == nullptr)
    {
        // ...
        // Add support for accelerator keys. 
        // ... (Previously added code.)

        // Add support for system back requests. 
        SystemNavigationManager::GetForCurrentView().
            BackRequested({ this, &App::System_BackRequested });

        // ...
    }
}

// App.h
struct App : AppT<App>
{
    App();

    // ...

private:
    // ...

    // Handle system back requests.
    void System_BackRequested(IInspectable const& /* sender */, BackRequestedEventArgs const& e)
    {
        if (!e.Handled())
        {
            e.Handled(TryGoBack());
        }
    }
};

Perilaku sistem mundur untuk kompatibilitas ke belakang

Sebelumnya, aplikasi UWP menggunakan SystemNavigationManager.AppViewBackButtonVisibility untuk menampilkan atau menyembunyikan tombol kembali sistem untuk navigasi ke belakang. (Tombol ini menghasilkan peristiwa SystemNavigationManager.BackRequested.) API ini akan terus didukung untuk memastikan kompatibilitas ke belakang, tetapi kami tidak lagi merekomendasikan menggunakan tombol kembali yang diekspos oleh AppViewBackButtonVisibility. Sebagai gantinya, Anda harus menyediakan tombol kembali dalam aplikasi Anda sendiri seperti yang dijelaskan dalam artikel ini.

Jika Anda terus menggunakan AppViewBackButtonVisibility, maka UI sistem merender tombol kembali sistem di dalam bilah judul. (Tampilan dan interaksi pengguna untuk tombol kembali tidak berubah dari build sebelumnya.)

Mengelola tombol navigasi mouse

Beberapa tikus menyediakan tombol navigasi perangkat keras untuk navigasi maju dan balik. Anda dapat mendukung tombol mouse ini dengan menangani peristiwa CoreWindow.PointerPressed dan memeriksa IsXButton1Pressed (kembali) atau IsXButton2Pressed (maju).

Berikut adalah kode yang ditambahkan ke App kelas untuk mendukung navigasi tombol mouse. (Ini mengasumsikan bahwa kode sebelumnya untuk mendukung tombol kembali telah ditambahkan.) Anda dapat melihat semua App kode bersama-sama di akhir bagian Contoh kode.

// App.xaml.cs
// Add event handler in OnLaunced.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // ...
        // Add support for system back requests. 
        // ... (Previously added code.)

        // Add support for mouse navigation buttons. 
        Window.Current.CoreWindow.PointerPressed += CoreWindow_PointerPressed;

        // ...

    }
}

// ...

// Handle mouse back button.
private void CoreWindow_PointerPressed(CoreWindow sender, PointerEventArgs e)
{
    // For this event, e.Handled arrives as 'true'.
    if (e.CurrentPoint.Properties.IsXButton1Pressed)
    {
        e.Handled = !TryGoBack();
    }
    else if (e.CurrentPoint.Properties.IsXButton2Pressed)
    {
        e.Handled = !TryGoForward();
    }
}

// App.cpp
void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == nullptr)
    {
        // ...
        // Add support for system back requests. 
        // ... (Previously added code.)

        // Add support for mouse navigation buttons. 
        Window::Current().CoreWindow().
            PointerPressed({ this, &App::CoreWindow_PointerPressed });

        // ...
    }
}

// App.h
struct App : AppT<App>
{
    App();

    // ...

private:
    // ...

    // Handle mouse forward and back buttons.
    void CoreWindow_PointerPressed(CoreWindow const& /* sender */, PointerEventArgs const& e)
    {
        // For this event, e.Handled arrives as 'true'. 
        if (e.CurrentPoint().Properties().IsXButton1Pressed())
        {
            e.Handled(!TryGoBack());
        }
        else if (e.CurrentPoint().Properties().IsXButton2Pressed())
        {
            e.Handled(!TryGoForward());
        }
    }
};

Semua kode ditambahkan ke kelas Aplikasi

// App.xaml.cs
//
// (Add event handlers in OnLaunched override.)
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // ...
        // rootFrame.NavigationFailed += OnNavigationFailed;

        // Add support for accelerator keys. 
        // Listen to the window directly so the app responds
        // to accelerator keys regardless of which element has focus.
        Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated +=
            CoreDispatcher_AcceleratorKeyActivated;

        // Add support for system back requests. 
        SystemNavigationManager.GetForCurrentView().BackRequested 
            += System_BackRequested;

        // Add support for mouse navigation buttons. 
        Window.Current.CoreWindow.PointerPressed += CoreWindow_PointerPressed;

        // ...

    }
}

// ...

// (Add these methods to the App class.)
public static bool TryGoBack()
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
        return true;
    }
    return false;
}

// Perform forward navigation if possible.
private bool TryGoForward()
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame.CanGoForward)
    {
        rootFrame.GoForward();
        return true;
    }
    return false;
}

// Invoked on every keystroke, including system keys such as Alt key combinations.
// Used to detect keyboard navigation between pages even when the page itself
// doesn't have focus.
private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender, AcceleratorKeyEventArgs e)
{
    // When Alt+Left are pressed navigate back.
    // When Alt+Right are pressed navigate forward.
    if (e.EventType == CoreAcceleratorKeyEventType.SystemKeyDown
        && (e.VirtualKey == VirtualKey.Left || e.VirtualKey == VirtualKey.Right)
        && e.KeyStatus.IsMenuKeyDown == true
        && !e.Handled)
    {
        if (e.VirtualKey == VirtualKey.Left)
        {
            e.Handled = TryGoBack();
        }
        else if (e.VirtualKey == VirtualKey.Right)
        {
            e.Handled = TryGoForward();
        }
    }
}

// Handle system back requests.
private void System_BackRequested(object sender, BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = TryGoBack();
    }
}

// Handle mouse back button.
private void CoreWindow_PointerPressed(CoreWindow sender, PointerEventArgs e)
{
    // For this event, e.Handled arrives as 'true'.
    if (e.CurrentPoint.Properties.IsXButton1Pressed)
    {
        e.Handled = !TryGoBack();
    }
    else if (e.CurrentPoint.Properties.IsXButton2Pressed)
    {
        e.Handled = !TryGoForward();
    }
}

// App.cpp
void App::OnLaunched(LaunchActivatedEventArgs const& e)
{
    // ...
    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == nullptr)
    {
        // ...
        // rootFrame.NavigationFailed({ this, &App::OnNavigationFailed });

        // Add support for accelerator keys. 
        // Listen to the window directly so the app responds
        // to accelerator keys regardless of which element has focus.
        Window::Current().CoreWindow().Dispatcher().
            AcceleratorKeyActivated({ this, &App::CoreDispatcher_AcceleratorKeyActivated });

        // Add support for system back requests. 
        SystemNavigationManager::GetForCurrentView().
            BackRequested({ this, &App::System_BackRequested });

        // Add support for mouse navigation buttons. 
        Window::Current().CoreWindow().
            PointerPressed({ this, &App::CoreWindow_PointerPressed });

        // ...
    }
}

// App.h
#include "winrt/Windows.UI.Core.h"
#include "winrt/Windows.System.h"
#include "winrt/Windows.UI.Input.h"
#include "winrt/Windows.UI.Xaml.Input.h"
 
using namespace winrt;
using namespace Windows::Foundation;
using namespace Windows::UI::Core;
using namespace Windows::UI::Input;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;

struct App : AppT<App>
{
    App();

    // ...

    // Perform back navigation if possible.
    static bool TryGoBack()
    {
        Frame rootFrame{ nullptr };
        auto content = Window::Current().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoBack())
            {
                rootFrame.GoBack();
                return true;
            }
        }
        return false;
    }
private:
    // Perform forward navigation if possible.
    bool TryGoForward()
    {
        Frame rootFrame{ nullptr };
        auto content = Window::Current().Content();
        if (content)
        {
            rootFrame = content.try_as<Frame>();
            if (rootFrame.CanGoForward())
            {
                rootFrame.GoForward();
                return true;
            }
        }
        return false;
    }
  
    // Invoked on every keystroke, including system keys such as Alt key combinations.
    // Used to detect keyboard navigation between pages even when the page itself
    // doesn't have focus.
    void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher const& /* sender */, AcceleratorKeyEventArgs const& e)
    {
        // When Alt+Left are pressed navigate back.
        // When Alt+Right are pressed navigate forward.
        if (e.EventType() == CoreAcceleratorKeyEventType::SystemKeyDown
            && (e.VirtualKey() == Windows::System::VirtualKey::Left || e.VirtualKey() == Windows::System::VirtualKey::Right)
            && e.KeyStatus().IsMenuKeyDown
            && !e.Handled())
        {
            if (e.VirtualKey() == Windows::System::VirtualKey::Left)
            {
                e.Handled(TryGoBack());
            }
            else if (e.VirtualKey() == Windows::System::VirtualKey::Right)
            {
                e.Handled(TryGoForward());
            }
        }
    }

    // Handle system back requests.
    void System_BackRequested(IInspectable const& /* sender */, BackRequestedEventArgs const& e)
    {
        if (!e.Handled())
        {
            e.Handled(TryGoBack());
        }
    }

    // Handle mouse forward and back buttons.
    void CoreWindow_PointerPressed(CoreWindow const& /* sender */, PointerEventArgs const& e)
    {
        // For this event, e.Handled arrives as 'true'. 
        if (e.CurrentPoint().Properties().IsXButton1Pressed())
        {
            e.Handled(!TryGoBack());
        }
        else if (e.CurrentPoint().Properties().IsXButton2Pressed())
        {
            e.Handled(!TryGoForward());
        }
    }
};

Melanjutkan

Saat pengguna beralih ke aplikasi lain dan kembali ke aplikasi Anda, sebaiknya kembali ke halaman terakhir dalam riwayat navigasi.

Artikel terkait

• dasar-dasar Navigasi