Riwayat navigasi dan navigasi mundur untuk aplikasi Windows

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 Bingkai merekam tindakan navigasi di BackStack dan ForwardStack-nya. Namun, Anda dapat mengubah tindakan navigasi mana yang ditambahkan ke riwayat navigasi.

Nota

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 NavigationView kontrol, maka Anda dapat menggunakan tombol kembali bawaan NavigationView.

Panduan dan contoh dalam artikel ini harus digunakan saat Anda menerapkan navigasi tanpa menggunakan NavigationView kontrol. Jika Anda menggunakan NavigationView, informasi ini memberikan pengetahuan latar belakang yang berguna, tetapi Anda harus menggunakan panduan dan contoh tertentu di artikel NavigationView

Tombol Kembali

Sebaiknya letakkan tombol kembali di sudut kiri atas aplikasi Anda. Jika Anda menyesuaikan bilah judul, letakkan tombol kembali di bilah judul. Lihat desain bilah judul dan tombol > Kembali untuk informasi selengkapnya.

Jika Anda menggunakan kontrol Bilah Judul untuk membuat bilah judul kustom, gunakan tombol kembali bawaan. Atur IsBackButtonVisible ke true, atur IsBackButtonEnabled sesuai kebutuhan, dan tangani peristiwa BackRequested untuk menavigasi.

Untuk membuat tombol kembali yang berdiri sendiri, gunakan kontrol Tombol dengan TitleBarBackButtonStyle sumber daya, dan letakkan tombol di sudut kiri atas UI aplikasi Anda (untuk detailnya, lihat contoh kode XAML di bawah).

Tombol Kembali di kiri atas UI aplikasi 

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

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

    </Grid>
</Page>

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

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

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

Status tombol kembali

Navigasi belakang

Bagian ini menggambarkan kode untuk menangani navigasi mundur. Sumber umum permintaan navigasi kembali adalah acara TitleBar.BackRequested, NavigationView.BackRequested, atau acara tombol kembali Click.

Contoh kode ini menunjukkan cara menerapkan perilaku navigasi mundur dengan tombol kembali. Kode merespons event Klik pada Tombol untuk menavigasi.

Jika Anda menggunakan tombol kembali dalam NavigationView kontrol atau TitleBar , Anda dapat meletakkan kode navigasi bingkai langsung di metode penanganan aktivitas tanpa perlu menduplikasinya untuk setiap halaman. Namun, jika Anda membuat tombol kembali di konten halaman aplikasi, Anda harus menduplikasi kode navigasi bingkai di file code-behind setiap halaman. Untuk menghindari duplikasi, Anda dapat meletakkan kode terkait navigasi di App kelas di App.xaml.* halaman code-behind lalu memanggilnya dari mana saja di aplikasi Anda, seperti yang ditunjukkan di sini.

Penting

Anda perlu memperbarui kode yang ada untuk m_window di App kelas untuk membuat properti statis publik seperti Window yang ditunjukkan di sini di baris kode terakhir. Lihat Ubah Window.Current ke App.Window untuk informasi selengkapnya.

// 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.Content as Frame;
    if (rootFrame.CanGoBack)
    {
        rootFrame.GoBack();
        return true;
    }
    return false;
}

public static Window Window { get { return m_window; } }
private static Window m_window;


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

// App.xaml.h
using namespace winrt;
using namespace Windows::UI::Xaml::Controls;

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

    static winrt::Microsoft::UI::Xaml::Window Window() { return window; };

    // ...

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

private:
    static winrt::Microsoft::UI::Xaml::Window window;
};

// App.xaml.cpp
winrt::Microsoft::UI::Xaml::Window App::window{ nullptr };
  • Last updated on