Navigasi Hierarkis

Kelas NavigationPage menyediakan pengalaman navigasi hierarkis di mana pengguna dapat menavigasi melalui halaman, maju dan mundur, seperti yang diinginkan. Kelas mengimplementasikan navigasi sebagai tumpukan terakhir masuk, keluar pertama (LIFO) objek Halaman. Artikel ini menunjukkan cara menggunakan kelas NavigationPage untuk melakukan navigasi di tumpukan halaman.

Untuk berpindah dari satu halaman ke halaman lain, aplikasi akan mendorong halaman baru ke tumpukan navigasi, tempat halaman tersebut akan menjadi halaman aktif, seperti yang ditunjukkan dalam diagram berikut:

Untuk kembali ke halaman sebelumnya, aplikasi akan memunculkan halaman saat ini dari tumpukan navigasi, dan halaman paling atas baru menjadi halaman aktif, seperti yang ditunjukkan dalam diagram berikut:

Metode navigasi diekspos oleh Navigation properti pada jenis turunan apa pun Page . Metode ini menyediakan kemampuan untuk mendorong halaman ke tumpukan navigasi, untuk memunculkan halaman dari tumpukan navigasi, dan untuk melakukan manipulasi tumpukan.

Melakukan Navigasi

Di navigasi hierarkis, NavigationPage kelas digunakan untuk menavigasi melalui tumpukan ContentPage objek. Cuplikan layar berikut menunjukkan komponen NavigationPage utama pada setiap platform:

Tata letak NavigationPage tergantung pada platform:

• Di iOS, bilah navigasi ada di bagian atas halaman yang menampilkan judul, dan yang memiliki tombol Kembali yang kembali ke halaman sebelumnya.
• Di Android, bilah navigasi ada di bagian atas halaman yang menampilkan judul, ikon, dan tombol Kembali yang kembali ke halaman sebelumnya. Ikon didefinisikan dalam [Activity] atribut yang menghiasi MainActivity kelas dalam proyek khusus platform Android.
• Pada Platform Windows Universal, bilah navigasi ada di bagian atas halaman yang menampilkan judul.

Pada semua platform, nilai Page.Title properti akan ditampilkan sebagai judul halaman. Selain itu, IconColor properti dapat diatur ke Color yang diterapkan ke ikon di bilah navigasi.

Catatan

Disarankan agar harus NavigationPage diisi dengan ContentPage instans saja.

Membuat Halaman Akar

Halaman pertama yang ditambahkan ke tumpukan navigasi disebut sebagai halaman akar aplikasi, dan contoh kode berikut menunjukkan bagaimana hal ini dicapai:

public App ()
{
  MainPage = new NavigationPage (new Page1Xaml ());
}

Ini menyebabkan instans Page1XamlContentPage didorong ke tumpukan navigasi, di mana instans tersebut menjadi halaman aktif dan halaman akar aplikasi. Ini diperlihatkan dalam cuplikan layar berikut:

Catatan

Properti RootPageNavigationPage instans menyediakan akses ke halaman pertama di tumpukan navigasi.

Mendorong Halaman ke Tumpukan Navigasi

Untuk menavigasi ke Page2Xaml, perlu untuk memanggil PushAsync metode pada Navigation properti halaman saat ini, seperti yang ditunjukkan dalam contoh kode berikut:

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PushAsync (new Page2Xaml ());
}

Ini menyebabkan instans Page2Xaml didorong ke tumpukan navigasi, di mana instans tersebut menjadi halaman aktif. Ini diperlihatkan dalam cuplikan layar berikut:

PushAsync Ketika metode dipanggil, peristiwa berikut terjadi:

• Panggilan halaman PushAsync memiliki OnDisappearing pengabaian yang dipanggil.
• Halaman yang dinavigasi untuk meminta penggantiannya OnAppearing .
• Tugas PushAsync selesai.

Namun, urutan yang tepat di mana peristiwa ini terjadi tergantung pada platform. Untuk informasi selengkapnya, lihat Bab 24 buku Charles Petzold Xamarin.Forms .

Catatan

Panggilan ke penimpaan OnDisappearing dan OnAppearing tidak dapat diperlakukan sebagai indikasi navigasi halaman yang dijamin. Misalnya, di iOS, penimpaan OnDisappearing dipanggil pada halaman aktif saat aplikasi berakhir.

Memunculkan Halaman dari Tumpukan Navigasi

Halaman aktif dapat dimunculkan dari tumpukan navigasi dengan menekan tombol Kembali pada perangkat, terlepas dari apakah ini adalah tombol fisik pada perangkat atau tombol di layar.

Untuk kembali ke halaman asli secara terprogram, Page2Xaml instans harus memanggil PopAsync metode , seperti yang ditunjukkan dalam contoh kode berikut:

async void OnPreviousPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PopAsync ();
}

Ini menyebabkan instans Page2Xaml dihapus dari tumpukan navigasi, dengan halaman paling atas baru menjadi halaman aktif. PopAsync Ketika metode dipanggil, peristiwa berikut terjadi:

• Panggilan halaman PopAsync memiliki OnDisappearing pengabaian yang dipanggil.
• Halaman yang dikembalikan untuk meminta penggantiannya OnAppearing .
• Tugas PopAsync akan kembali.

Namun, urutan yang tepat di mana peristiwa ini terjadi tergantung pada platform. Untuk informasi selengkapnya, lihat Bab 24 buku Charles Petzold Xamarin.Forms .

Selain PushAsync metode dan PopAsync , Navigation properti setiap halaman juga menyediakan PopToRootAsync metode, yang ditunjukkan dalam contoh kode berikut:

async void OnRootPageButtonClicked (object sender, EventArgs e)
{
  await Navigation.PopToRootAsync ();
}

Metode ini memunculkan semua kecuali akar Page dari tumpukan navigasi, oleh karena itu membuat halaman akar aplikasi menjadi halaman aktif.

Menganimasikan Transisi Halaman

Properti Navigation setiap halaman juga menyediakan metode pendorongan dan pop yang ditimpa yang menyertakan boolean parameter yang mengontrol apakah akan menampilkan animasi halaman selama navigasi, seperti yang ditunjukkan dalam contoh kode berikut:

async void OnNextPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PushAsync (new Page2Xaml (), false);
}

async void OnPreviousPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PopAsync (false);
}

async void OnRootPageButtonClicked (object sender, EventArgs e)
{
  // Page appearance not animated
  await Navigation.PopToRootAsync (false);
}

boolean Mengatur parameter untuk false menonaktifkan animasi transisi halaman, sambil mengatur parameter untuk true mengaktifkan animasi transisi halaman, asalkan didukung oleh platform yang mendasar. Namun, metode push dan pop yang tidak memiliki parameter ini mengaktifkan animasi secara default.

Meneruskan Data saat Menavigasi

Terkadang perlu halaman untuk meneruskan data ke halaman lain selama navigasi. Dua teknik untuk mencapainya adalah meneruskan data melalui konstruktor halaman, dan dengan mengatur halaman BindingContext baru ke data. Masing-masing sekarang akan dibahas secara bergantian.

Meneruskan Data melalui Konstruktor Halaman

Teknik paling sederhana untuk meneruskan data ke halaman lain selama navigasi adalah melalui parameter konstruktor halaman, yang ditunjukkan dalam contoh kode berikut:

public App ()
{
  MainPage = new NavigationPage (new MainPage (DateTime.Now.ToString ("u")));
}

Kode ini membuat instans MainPage , melewati tanggal dan waktu saat ini dalam format ISO8601, yang dibungkus dalam NavigationPage instans.

MainPage Instans menerima data melalui parameter konstruktor, seperti yang ditunjukkan dalam contoh kode berikut:

public MainPage (string date)
{
  InitializeComponent ();
  dateLabel.Text = date;
}

Data kemudian ditampilkan di halaman dengan mengatur properti, seperti yang Label.Text ditunjukkan pada cuplikan layar berikut:

Meneruskan Data melalui BindingContext

Pendekatan alternatif untuk meneruskan data ke halaman lain selama navigasi adalah dengan mengatur halaman BindingContext baru ke data, seperti yang ditunjukkan dalam contoh kode berikut:

async void OnNavigateButtonClicked (object sender, EventArgs e)
{
  var contact = new Contact {
    Name = "Jane Doe",
    Age = 30,
    Occupation = "Developer",
    Country = "USA"
  };

  var secondPage = new SecondPage ();
  secondPage.BindingContext = contact;
  await Navigation.PushAsync (secondPage);
}

Kode ini mengatur instans ke instans BindingContextSecondPage, lalu menavigasi ke SecondPage.Contact

Kemudian SecondPage menggunakan pengikatan data untuk menampilkan Contact data instans, seperti yang ditunjukkan dalam contoh kode XAML berikut:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PassingData.SecondPage"
             Title="Second Page">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" HorizontalOptions="FillAndExpand" />
                <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
            </StackLayout>
            ...
            <Button x:Name="navigateButton" Text="Previous Page" Clicked="OnNavigateButtonClicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Contoh kode berikut menunjukkan bagaimana pengikatan data dapat dicapai dalam C#:

public class SecondPageCS : ContentPage
{
  public SecondPageCS ()
  {
    var nameLabel = new Label {
      FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
      FontAttributes = FontAttributes.Bold
    };
    nameLabel.SetBinding (Label.TextProperty, "Name");
    ...
    var navigateButton = new Button { Text = "Previous Page" };
    navigateButton.Clicked += OnNavigateButtonClicked;

    Content = new StackLayout {
      HorizontalOptions = LayoutOptions.Center,
      VerticalOptions = LayoutOptions.Center,
      Children = {
        new StackLayout {
          Orientation = StackOrientation.Horizontal,
          Children = {
            new Label{ Text = "Name:", FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)), HorizontalOptions = LayoutOptions.FillAndExpand },
            nameLabel
          }
        },
        ...
        navigateButton
      }
    };
  }

  async void OnNavigateButtonClicked (object sender, EventArgs e)
  {
    await Navigation.PopAsync ();
  }
}

Data kemudian ditampilkan di halaman oleh serangkaian Label kontrol, seperti yang ditunjukkan pada cuplikan layar berikut:

Untuk informasi selengkapnya tentang pengikatan data, lihat Dasar-Dasar Pengikatan Data.

Memanipulasi Tumpukan Navigasi

Properti Navigation mengekspos NavigationStack properti tempat halaman dalam tumpukan navigasi dapat diperoleh. Saat Xamarin.Forms mempertahankan akses ke tumpukan navigasi, Navigation properti menyediakan InsertPageBefore metode dan RemovePage untuk memanipulasi tumpukan dengan menyisipkan halaman atau menghapusnya.

Metode InsertPageBefore menyisipkan halaman tertentu di tumpukan navigasi sebelum halaman yang ditentukan yang sudah ada, seperti yang diperlihatkan dalam diagram berikut:

Metode RemovePage menghapus halaman yang ditentukan dari tumpukan navigasi, seperti yang diperlihatkan dalam diagram berikut:

Metode ini memungkinkan pengalaman navigasi kustom, seperti mengganti halaman masuk dengan halaman baru, setelah masuk yang berhasil. Contoh kode berikut menunjukkan skenario ini:

async void OnLoginButtonClicked (object sender, EventArgs e)
{
  ...
  var isValid = AreCredentialsCorrect (user);
  if (isValid) {
    App.IsUserLoggedIn = true;
    Navigation.InsertPageBefore (new MainPage (), this);
    await Navigation.PopAsync ();
  } else {
    // Login failed
  }
}

Asalkan kredensial pengguna sudah benar, MainPage instans dimasukkan ke tumpukan navigasi sebelum halaman saat ini. Metode PopAsync kemudian menghapus halaman saat ini dari tumpukan navigasi, dengan MainPage instans menjadi halaman aktif.

Menampilkan Tampilan di Bilah Navigasi

Apa pun Xamarin.FormsView dapat ditampilkan di bilah NavigationPagenavigasi . Ini dicapai dengan mengatur NavigationPage.TitleView properti terlampir ke View. Properti terlampir ini dapat diatur pada , Pagedan ketika Page didorong ke NavigationPage, NavigationPage akan menghormati nilai properti.

Contoh berikut menunjukkan cara mengatur NavigationPage.TitleView properti terlampir dari XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44" WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

Berikut adalah kode C# yang setara:

public class TitleViewPage : ContentPage
{
    public TitleViewPage()
    {
        var titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
        NavigationPage.SetTitleView(this, titleView);
        ...
    }
}

Ini menghasilkan ditampilkan Slider di bilah navigasi pada NavigationPage:

Penting

Banyak tampilan tidak akan muncul di bilah navigasi kecuali ukuran tampilan ditentukan dengan WidthRequest properti dan HeightRequest . Atau, tampilan dapat dibungkus StackLayout dengan HorizontalOptions properti dan VerticalOptions diatur ke nilai yang sesuai.

Perhatikan bahwa, karena Layout kelas berasal dari View kelas , TitleView properti terlampir dapat diatur untuk menampilkan kelas tata letak yang berisi beberapa tampilan. Pada iOS dan Platform Windows Universal (UWP), tinggi bilah navigasi tidak dapat diubah, sehingga kliping akan terjadi jika tampilan yang ditampilkan di bilah navigasi lebih besar dari ukuran default bilah navigasi. Namun, di Android, tinggi bilah navigasi dapat diubah dengan mengatur NavigationPage.BarHeight properti yang double dapat diikat ke yang mewakili tinggi baru. Untuk informasi selengkapnya, lihat Mengatur Tinggi Bilah Navigasi pada Halaman Navigasi.

Atau, bilah navigasi yang diperluas dapat disarankan dengan menempatkan beberapa konten di bilah navigasi, dan beberapa dalam tampilan di bagian atas konten halaman yang Anda warnai cocok dengan bilah navigasi. Selain itu, pada iOS garis pemisah dan bayangan yang ada di bagian bawah bilah navigasi dapat dihapus dengan mengatur NavigationPage.HideNavigationBarSeparator properti yang dapat diikat ke true. Untuk informasi selengkapnya, lihat Menyembunyikan Pemisah Bilah Navigasi pada Halaman Navigasi.

Catatan

Properti BackButtonTitle, , TitleIconTitle, dan TitleView semuanya dapat menentukan nilai yang menempati ruang pada bilah navigasi. Meskipun ukuran bilah navigasi bervariasi menurut platform dan ukuran layar, pengaturan semua properti ini akan mengakibatkan konflik karena ruang terbatas yang tersedia. Alih-alih mencoba menggunakan kombinasi properti ini, Anda mungkin menemukan bahwa Anda dapat mencapai desain bilah navigasi yang Anda inginkan dengan hanya mengatur TitleView properti.

Batasan

Ada sejumlah batasan yang harus diperhatikan saat menampilkan View di bilah NavigationPagenavigasi :

• Di iOS, tampilan ditempatkan di bilah NavigationPage navigasi muncul dalam posisi yang berbeda tergantung pada apakah judul besar diaktifkan. Untuk informasi selengkapnya tentang mengaktifkan judul besar, lihat Menampilkan Judul Besar.
• Di Android, menempatkan tampilan di bilah NavigationPage navigasi hanya dapat dicapai di aplikasi yang menggunakan app-compat.
• Tidak disarankan untuk menempatkan tampilan besar dan kompleks, seperti ListView dan TableView, di bilah NavigationPagenavigasi .

Link Terkait

• Navigasi Halaman (bab 24)
• Cara Membuat Alur Layar Masuk dalam Xamarin.Forms video
• Halaman Navigasi