Bagikan melalui

Xamarin.Forms Halaman Modal

  • Artikel

Xamarin.Forms menyediakan dukungan untuk halaman modal. Halaman modal mendorong pengguna untuk menyelesaikan tugas mandiri yang tidak dapat dinavigasi jauh hingga tugas selesai atau dibatalkan. Artikel ini menunjukkan cara menavigasi ke halaman modal.

Artikel ini membahas topik berikut:

  • Melakukan navigasi – mendorong halaman ke tumpukan modal, memunculkan halaman dari tumpukan modal, menonaktifkan tombol kembali, dan menganimasikan transisi halaman.
  • Meneruskan data saat menavigasi - meneruskan data melalui konstruktor halaman, dan melalui BindingContext.

Gambaran Umum

Halaman modal bisa menjadi salah satu jenis Halaman yang didukung oleh Xamarin.Forms. Untuk menampilkan halaman modal, aplikasi akan mendorongnya ke tumpukan modal, di mana itu akan menjadi halaman aktif, seperti yang ditunjukkan dalam diagram berikut:

Mendorong Halaman ke Tumpukan Modal

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

Memunculkan Halaman dari Tumpukan Modal

Melakukan Navigasi

Metode navigasi modal diekspos oleh Navigation properti pada jenis turunan apa pun Page . Metode ini memberikan kemampuan untuk mendorong halaman modal ke tumpukan modal, dan halaman modal pop dari tumpukan modal.

Properti ini Navigation juga mengekspos ModalStack properti tempat halaman modal dalam tumpukan modal dapat diperoleh. Namun, tidak ada konsep untuk melakukan manipulasi tumpukan modal, atau muncul ke halaman akar di navigasi modal. Ini karena operasi ini tidak didukung secara universal pada platform yang mendasar.

Catatan

Instans NavigationPage tidak diperlukan untuk melakukan navigasi halaman modal.

Mendorong Halaman ke Tumpukan Modal

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

async void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    ...
    await Navigation.PushModalAsync (detailPage);
  }
}

Ini menyebabkan instans ModalPage didorong ke tumpukan modal, di mana instans tersebut menjadi halaman aktif, asalkan item telah dipilih dalam ListViewMainPage instans. ModalPage Instans ditampilkan dalam cuplikan layar berikut:

Contoh Halaman Modal

Ketika PushModalAsync dipanggil, peristiwa berikut terjadi:

  • Panggilan halaman PushModalAsync memiliki OnDisappearing pengabaian yang dipanggil, asalkan platform yang mendasar bukan Android.
  • Halaman yang dinavigasi untuk meminta penggantiannya OnAppearing .
  • Tugas PushAsync selesai.

Namun, urutan yang tepat bahwa 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 Modal

Halaman aktif dapat dimunculkan dari tumpukan modal 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, ModalPage instans harus memanggil PopModalAsync metode , seperti yang ditunjukkan dalam contoh kode berikut:

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  await Navigation.PopModalAsync ();
}

Ini menyebabkan instans ModalPage dihapus dari tumpukan modal, dengan halaman paling atas baru menjadi halaman aktif. Ketika PopModalAsync dipanggil, peristiwa berikut terjadi:

  • Panggilan halaman PopModalAsync memiliki OnDisappearing pengabaian yang dipanggil.
  • Halaman yang dikembalikan untuk OnAppearing dipanggil, asalkan platform yang mendasar bukan Android.
  • Tugas PopModalAsync akan kembali.

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

Menonaktifkan Tombol Kembali

Di Android, pengguna selalu dapat kembali ke halaman sebelumnya dengan menekan tombol Kembali standar pada perangkat. Jika halaman modal mengharuskan pengguna untuk menyelesaikan tugas mandiri sebelum meninggalkan halaman, aplikasi harus menonaktifkan tombol Kembali . Ini dapat dicapai dengan mengesampingkan Page.OnBackButtonPressed metode pada halaman modal. Untuk informasi selengkapnya, lihat Bab 24 buku Charles Petzold Xamarin.Forms .

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.PushModalAsync (new DetailPage (), false);
}

async void OnDismissButtonClicked (object sender, EventArgs args)
{
  // Page appearance not animated
  await Navigation.PopModalAsync (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 mencapai hal ini adalah dengan 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 MainPage (DateTime.Now.ToString ("u")));
}

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

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 Label.Text properti .

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 OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
  if (listView.SelectedItem != null) {
    var detailPage = new DetailPage ();
    detailPage.BindingContext = e.SelectedItem as Contact;
    listView.SelectedItem = null;
    await Navigation.PushModalAsync (detailPage);
  }
}

Kode ini mengatur instans ke instans BindingContextDetailPage, lalu menavigasi ke DetailPage.Contact

Kemudian DetailPage 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="ModalNavigation.DetailPage">
    <ContentPage.Padding>
      <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,40,0,0" />
      </OnPlatform>
    </ContentPage.Padding>
    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" FontSize="Medium" HorizontalOptions="FillAndExpand" />
                <Label Text="{Binding Name}" FontSize="Medium" FontAttributes="Bold" />
            </StackLayout>
              ...
            <Button x:Name="dismissButton" Text="Dismiss" Clicked="OnDismissButtonClicked" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

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

public class DetailPageCS : ContentPage
{
  public DetailPageCS ()
  {
    var nameLabel = new Label {
      FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
      FontAttributes = FontAttributes.Bold
    };
    nameLabel.SetBinding (Label.TextProperty, "Name");
    ...
    var dismissButton = new Button { Text = "Dismiss" };
    dismissButton.Clicked += OnDismissButtonClicked;

    Thickness padding;
    switch (Device.RuntimePlatform)
    {
        case Device.iOS:
            padding = new Thickness(0, 40, 0, 0);
            break;
        default:
            padding = new Thickness();
            break;
    }

    Padding = padding;
    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
          }
        },
        ...
        dismissButton
      }
    };
  }

  async void OnDismissButtonClicked (object sender, EventArgs args)
  {
    await Navigation.PopModalAsync ();
  }
}

Data kemudian ditampilkan di halaman oleh serangkaian Label kontrol.

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

Ringkasan

Artikel ini menunjukkan cara menavigasi ke halaman modal. Halaman modal mendorong pengguna untuk menyelesaikan tugas mandiri yang tidak dapat dinavigasi jauh hingga tugas selesai atau dibatalkan.