Sebelumnya

Berikutnya

Menerapkan navigasi flyout

Selesai

Navigasi flyout adalah jenis navigasi di mana jendela item menu meluncur (atau terbang keluar) dari sisi layar perangkat. Biasanya dipanggil dengan mengetuk menu "hamburger", atau ikon dengan tiga garis horizontal yang ditumpuk di atas satu sama lain.

Di unit ini, Anda akan mempelajari cara membuat aplikasi yang menerapkan navigasi flyout.

Apa itu navigasi flyout?

Navigasi flyout menampilkan menu yang menyediakan cara cepat untuk beralih konteks dalam aplikasi Anda.

Menu flyout terdiri dari beberapa bagian, Header, , FlyoutItemsMenuItems, dan Footer.

Gambar di bawah ini menunjukkan contoh visual bagian flyout.

Karena menu flyout tidak selalu terlihat, itu dapat digunakan untuk beralih konteks antara bagian aplikasi Anda yang berbeda secara konseptual. Misalnya, satu item flyout dapat mengarah ke halaman entri data (atau halaman), dan satu lagi ke halaman tentang.

Navigasi flyout di aplikasi .NET MAUI

Anda menggunakan FlyoutItem kelas untuk menerapkan navigasi flyout di .NET MAUI. FlyoutItem adalah bagian dari paradigma pengembangan aplikasi Shell yang disediakan oleh .NET MAUI.

Navigasi dengan flyout di .NET MAUI terjadi saat FlyoutItem item diketuk. FlyoutItem akan secara otomatis mengalihkan apa yang ditampilkan di aplikasi Anda. Anda menentukan apa yang ditampilkan saat FlyoutItem diketuk dengan mengatur propertinya ShellContent . Properti tersebut akan menunjuk ke halaman di aplikasi Anda.

FlyoutItem Perlu dihosting di Shell halaman, yang berfungsi sebagai halaman utama aplikasi Anda. Dan Anda dapat memiliki sebanyak FlyoutItemyang Anda inginkan.

Contoh berikut membuat flyout yang berisi dua item flyout:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

Membuat flyout

Satu atau beberapa item flyout dapat ditambahkan ke flyout, dan setiap item flyout diwakili oleh FlyoutItem objek . Setiap FlyoutItem objek harus merupakan anak dari objek subkelas Shell yang berfungsi sebagai aplikasi MainPageAnda.

Objek Shell memiliki operator konversi implisit yang memungkinkan hierarki visual Shell disederhanakan. Hal ini dimungkinkan karena objek subkelas Shell hanya dapat berisi FlyoutItem objek atau TabBar objek, yang hanya dapat berisi Tab objek, yang hanya dapat berisi ShellContent objek.

Operator konversi implisit ini dapat digunakan untuk menghapus FlyoutItem objek dan Tab dari contoh sebelumnya:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

Kode ini akan menghasilkan flyout dengan dua item. CatsPage akan ditampilkan secara default saat aplikasi terbuka. Mengetuk pada yang kedua akan menampilkan DogsPage.

Item menu flyout

Item menu dapat ditambahkan secara opsional ke flyout, dan setiap item menu diwakili oleh MenuItem objek. Item menu mirip dengan tombol di mana mengetuk satu mengarah ke tindakan yang akan terjadi daripada halaman untuk ditampilkan.

Posisi MenuItem objek pada flyout tergantung pada urutan deklarasinya dalam hierarki visual Shell. Oleh karena itu, objek apa pun MenuItem yang dideklarasikan sebelum FlyoutItem objek akan muncul sebelum FlyoutItem objek di flyout, dan objek apa pun MenuItem yang dideklarasikan setelah FlyoutItem objek akan muncul setelah FlyoutItem objek di flyout.

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

Header dan footer flyout

Header flyout adalah konten yang secara opsional muncul di bagian atas flyout, dengan tampilannya didefinisikan oleh objek yang dapat diatur dengan properti yang dapat diikat Shell.FlyoutHeader:

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

Footer flyout adalah konten yang secara opsional muncul di bagian bawah flyout, dengan tampilannya didefinisikan oleh objek yang dapat diatur dengan properti yang dapat mengikat Shell.FlyoutFooter:

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>

Lanjutkan