Bagikan melalui

Xamarin.Forms FlyoutPage

  • Artikel

Halaman flyout biasanya menampilkan daftar item, seperti yang ditunjukkan pada cuplikan layar berikut:

Komponen Halaman Flyout

Lokasi daftar item identik di setiap platform, dan memilih salah satu item akan menavigasi ke halaman detail yang sesuai. Selain itu, halaman flyout juga menampilkan bilah navigasi yang berisi tombol yang dapat digunakan untuk menavigasi ke halaman detail aktif:

  • Di iOS, bilah navigasi ada di bagian atas halaman dan memiliki tombol yang menavigasi ke halaman detail. Selain itu, halaman detail aktif dapat dinavigasi dengan menggesekkan flyout ke kiri.
  • Di Android, bilah navigasi ada di bagian atas halaman dan menampilkan judul, ikon, dan tombol yang menavigasi ke halaman detail. Ikon didefinisikan dalam [Activity] atribut yang menghiasi MainActivity kelas dalam proyek khusus platform Android. Selain itu, halaman detail aktif dapat dinavigasi dengan menggesek halaman flyout ke kiri, dengan mengetuk halaman detail di ujung kanan layar, dan dengan mengetuk tombol Kembali di bagian bawah layar.
  • Pada Platform Windows Universal (UWP), bilah navigasi ada di bagian atas halaman dan memiliki tombol yang menavigasi ke halaman detail.

Halaman detail menampilkan data yang sesuai dengan item yang dipilih di halaman flyout, dan komponen utama halaman detail ditampilkan dalam cuplikan layar berikut:

Komponen Halaman Detail

Halaman detail berisi bilah navigasi, yang kontennya bergantung pada platform:

  • Di iOS, bilah navigasi ada di bagian atas halaman dan menampilkan judul, dan memiliki tombol yang kembali ke halaman flyout, asalkan instans halaman detail dibungkus dalam NavigationPage instans. Selain itu, halaman flyout dapat dikembalikan dengan menggesek halaman detail ke kanan.
  • Di Android, bilah navigasi ada di bagian atas halaman dan menampilkan judul, ikon, dan tombol yang kembali ke halaman flyout. Ikon didefinisikan dalam [Activity] atribut yang menghiasi MainActivity kelas dalam proyek khusus platform Android.
  • Di UWP, bilah navigasi ada di bagian atas halaman dan menampilkan judul, dan memiliki tombol yang kembali ke halaman flyout.

Perilaku pengalaman navigasi antara flyout dan halaman detail bergantung pada platform:

  • Di iOS, halaman detail meluncur ke kanan saat halaman flyout meluncur dari kiri, dan bagian kiri halaman detail masih terlihat.
  • Di Android, halaman detail dan flyout dilapisi satu sama lain.
  • Pada UWP, halaman flyout meluncur dari kiri di atas bagian halaman detail, asalkan FlyoutLayoutBehavior properti diatur ke Popover.

Perilaku serupa akan diamati dalam mode lanskap, kecuali bahwa halaman flyout di iOS dan Android memiliki lebar yang sama dengan halaman flyout dalam mode potret, sehingga lebih banyak halaman detail akan terlihat.

Untuk informasi tentang mengontrol perilaku navigasi, lihat Mengontrol perilaku tata letak halaman detail.

Membuat FlyoutPage

Berisi FlyoutPageFlyout dan Detail properti yang merupakan jenis Page, yang digunakan untuk mendapatkan dan mengatur flyout dan halaman detail masing-masing.

Penting

dirancang FlyoutPage untuk menjadi halaman akar, dan menggunakannya sebagai halaman anak di jenis halaman lain dapat mengakibatkan perilaku yang tidak terduga dan tidak konsisten. Selain itu, disarankan agar halaman FlyoutPage flyout dari harus selalu menjadi ContentPage instans, dan bahwa halaman detail hanya boleh diisi dengan TabbedPageinstans , NavigationPage, dan ContentPage . Ini akan membantu memastikan pengalaman pengguna yang konsisten di semua platform.

Contoh kode XAML berikut menunjukkan FlyoutPage yang mengatur Flyout properti dan Detail :

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation;assembly=FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Contoh kode berikut menunjukkan setara FlyoutPage yang dibuat di C#:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        flyoutPage = new FlyoutMenuPageCS();
        Flyout = flyoutPage;
        Detail = new NavigationPage(new ContactsPageCS());
        ...
    }
    ...
}

Properti Flyout diatur ke ContentPage instans. Properti Detail diatur ke yang NavigationPage berisi ContentPage instans.

Membuat halaman flyout

Contoh kode XAML berikut menunjukkan deklarasi FlyoutMenuPage objek, yang direferensikan melalui Flyout properti :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="using:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <StackLayout>
        <ListView x:Name="listView" x:FieldModifier="public">
            <ListView.ItemsSource>
                <x:Array Type="{x:Type local:FlyoutPageItem}">
                    <local:FlyoutPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                    <local:FlyoutPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                    <local:FlyoutPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
                </x:Array>
            </ListView.ItemsSource>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1" Text="{Binding Title}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Halaman terdiri dari ListView yang diisi dengan data di XAML dengan mengatur propertinya ItemsSource ke array FlyoutPageItem objek. Masing-masing FlyoutPageItem mendefinisikan Titleproperti , IconSource, dan TargetType .

DataTemplate ditetapkan ke ListView.ItemTemplate properti , untuk menampilkan masing-masing FlyoutPageItem. DataTemplate berisi ViewCell yang terdiri dari Image dan Label. Image menampilkan IconSource nilai properti, dan Label menampilkan Title nilai properti, untuk setiap FlyoutPageItem.

Halaman memiliki Title properti dan IconImageSource yang ditetapkan. Ikon akan muncul di halaman detail, asalkan halaman detail memiliki bilah judul. Ini harus diaktifkan di iOS dengan membungkus instans halaman detail dalam NavigationPage instans.

Catatan

Halaman Flyout harus memiliki kumpulan propertinya Title , atau pengecualian akan terjadi.

Contoh kode berikut menunjukkan halaman yang setara yang dibuat di C#:

public class FlyoutMenuPageCS : ContentPage
{
    ListView listView;
    public ListView ListView { get { return listView; } }

    public FlyoutMenuPageCS()
    {
        var flyoutPageItems = new List<FlyoutPageItem>();
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Contacts",
            IconSource = "contacts.png",
            TargetType = typeof(ContactsPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "TodoList",
            IconSource = "todo.png",
            TargetType = typeof(TodoListPageCS)
        });
        flyoutPageItems.Add(new FlyoutPageItem
        {
            Title = "Reminders",
            IconSource = "reminders.png",
            TargetType = typeof(ReminderPageCS)
        });

        listView = new ListView
        {
            ItemsSource = flyoutPageItems,
            ItemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid { Padding = new Thickness(5, 10) };
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
                grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

                var image = new Image();
                image.SetBinding(Image.SourceProperty, "IconSource");
                var label = new Label { VerticalOptions = LayoutOptions.FillAndExpand };
                label.SetBinding(Label.TextProperty, "Title");

                grid.Children.Add(image);
                grid.Children.Add(label, 1, 0);

                return new ViewCell { View = grid };
            }),
            SeparatorVisibility = SeparatorVisibility.None
        };

        IconImageSource = "hamburger.png";
        Title = "Personal Organiser";
        Padding = new Thickness(0, 40, 0, 0);
        Content = new StackLayout
        {
            Children = { listView }
        };
    }
}

Cuplikan layar berikut menunjukkan halaman flyout di setiap platform:

Contoh Halaman Flyout

Membuat dan menampilkan halaman detail

FlyoutMenuPage Instans berisi ListView properti yang mengekspos instansnya ListView sehinggaFlyoutPageMainPageinstans dapat mendaftarkan penanganan aktivitas untuk menangani ItemSelected peristiwa. Ini memungkinkan instans MainPage untuk mengatur Detail properti ke halaman yang mewakili item yang dipilih ListView . Contoh kode berikut menunjukkan penanganan aktivitas:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.listView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as FlyoutPageItem;
        if (item != null)
        {
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            flyoutPage.listView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

Metode ini OnItemSelected melakukan tindakan berikut:

  • Ini mengambil dari ListView instansSelectedItem, dan asalkan bukan null, mengatur halaman detail ke instans baru dari jenis halaman yang disimpan di TargetType properti FlyoutPageItem. Jenis halaman dibungkus dalam NavigationPage instans untuk memastikan bahwa ikon yang dirujuk melalui IconImageSource properti pada FlyoutMenuPage ditampilkan pada halaman detail di iOS.
  • Item terpilih dalam ListView diatur ke null untuk memastikan bahwa tidak ada ListView item yang akan dipilih saat FlyoutMenuPage berikutnya disajikan.
  • Halaman detail disajikan kepada pengguna dengan mengatur FlyoutPage.IsPresented properti ke false. Properti ini mengontrol apakah flyout atau halaman detail disajikan. Ini harus diatur ke true untuk menampilkan halaman flyout, dan untuk false menampilkan halaman detail.

Cuplikan layar berikut menunjukkan ContactPage halaman detail, yang ditampilkan setelah dipilih di halaman flyout:

Contoh Halaman Detail

Mengontrol perilaku tata letak halaman detail

FlyoutPage Bagaimana mengelola flyout dan halaman detail tergantung pada apakah aplikasi berjalan pada ponsel atau tablet, orientasi perangkat, dan nilai FlyoutLayoutBehavior properti. Properti ini menentukan bagaimana halaman detail akan ditampilkan. Nilai yang mungkin adalah:

  • Default – Halaman ditampilkan menggunakan default platform.
  • Popover – Halaman detail mencakup, atau sebagian mencakup halaman flyout.
  • Split – Halaman flyout ditampilkan di sebelah kiri dan halaman detail berada di sebelah kanan.
  • SplitOnLandscape – Layar terpisah digunakan saat perangkat berada dalam orientasi lanskap.
  • SplitOnPortrait – Layar terpisah digunakan saat perangkat berada dalam orientasi potret.

Contoh kode XAML berikut menunjukkan cara mengatur FlyoutLayoutBehavior properti pada FlyoutPage:

<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="FlyoutPageNavigation.MainPage"
            FlyoutLayoutBehavior="Popover">
  ...
</FlyoutPage>

Contoh kode berikut menunjukkan setara FlyoutPage yang dibuat di C#:

public class MainPageCS : FlyoutPage
{
    FlyoutMenuPageCS flyoutPage;

    public MainPageCS()
    {
        ...
        FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;
    }
}

Penting

Nilai properti hanya memengaruhi aplikasi yang FlyoutLayoutBehavior berjalan pada tablet atau desktop. Aplikasi yang berjalan di ponsel selalu memiliki Popover perilaku.