Sebelumnya

Berikutnya

Latihan: Menerapkan navigasi flyout

Selesai

Dalam skenario sampel, Anda memiliki aplikasi MAUI yang berisi halaman untuk menampilkan informasi tentang tubuh astronomis, fase bulan, dan waktu matahari terbit/matahari terbenam. Aplikasi ini juga menyertakan halaman Tentang. Saat ini, halaman-halaman ini semuanya berdiri sendiri, tetapi Anda ingin memberikan cara logis bagi pengguna untuk berpindah di antara mereka.

Dalam latihan ini, Anda akan menambahkan navigasi flyout ke aplikasi.

Buka solusi starter

1. Klon atau unduh exercise repo.

   Catatan

   Yang terbaik adalah mengkloning atau mengunduh konten latihan ke jalur folder pendek, seperti C:\dev, untuk menghindari file yang dihasilkan build melebihi panjang jalur maksimum.

2. Buka folder latihan1 di repositori kloning, lalu pindah ke folder mulai .

3. Gunakan Visual Studio untuk membuka solusi Astronomy.sln .

4. Di jendela Penjelajah Solusi, di proyek Astronomi, perluas folder Pages. Folder ini berisi halaman berikut:

   • Tentang Halaman. Halaman ini menampilkan informasi untuk aplikasi.
   • MoonPhasePage. Halaman ini menampilkan informasi spesifik tentang fase Bulan seperti yang terlihat dari Bumi.
   • SunrisePage. Halaman ini menampilkan waktu matahari terbit dan terbenam untuk lokasi di Bumi. Data disediakan oleh layanan web Sunrise Sunset.

5. Buat dan jalankan aplikasi. Ketika aplikasi dimulai, MoonPhasePage ditampilkan, tetapi saat ini tidak ada cara yang disediakan untuk memungkinkan pengguna menavigasi ke halaman lain.

   Gambar di bawah ini menunjukkan aplikasi yang berjalan di emulator Android:

   

6. Tutup aplikasi dan kembali ke Visual Studio.

Menambahkan navigasi flyout

1. Di jendela Penjelajah Solusi, buka halaman AppShell.xaml .

2. Di editor markup XAML, kelilingi <ShellContent> item yang ada dengan <FlyoutItem>. Atur Title properti <Flyout> item menjadi Fase Bulan. Markup akan terlihat seperti ini:

   <FlyoutItem Title="Moon Phase">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
   </FlyoutItem>
   

3. FlyoutIcon Tambahkan properti ke simpul <Shell> untuk menampilkan gambar. Secara default akan menampilkan tiga bilah horizontal, tetapi kita dapat mengubahnya menjadi apa pun yang kita suka. Markup akan terlihat seperti ini:

   <Shell
       x:Class="Astronomy.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Astronomy.Pages"
       FlyoutIcon="moon.png">
   

4. Jalankan aplikasi. Anda sekarang akan melihat gambar bulan di sudut kiri atas aplikasi.

   

   Ketuk ikon dan flyout akan muncul.

   

5. Sekarang tambahkan lebih banyak opsi flyout. Buat yang baru <FlyoutItem> di bawah ini yang baru saja Anda buat dan atur Title ke Matahari Terbit. Ini ShellContent harus menunjuk ke SunrisePage halaman.

6. Tambahkan yang lain <FlyoutItem>, atur judulnya ke Tentang. Kali ini atur ke ShellContentAboutPage. XAML tambahan akan terlihat seperti ini:

   <FlyoutItem Title="Sunrise">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

7. Jalankan aplikasi lagi, dan sekarang akan ada tiga opsi dalam flyout. Mengetuk item flyout akan menampilkan halaman masing-masing.

   

   Catatan

   Jika Anda berjalan di platform selain Windows, Anda mungkin perlu mengaktifkan izin Lokasi untuk aplikasi Anda di platform tersebut agar halaman Sunrise/Sunset Times berfungsi. Misalnya, di perangkat Android, atur Akses lokasi ke Izinkan saja saat menggunakan aplikasi.

Menambahkan ikon

Anda mungkin telah melihat item flyout terlihat sedikit kosong. Anda dapat menambahkan ikon ke item flyout dengan menggunakan Icon properti .

Beberapa gambar telah ditambahkan ke folder Resources\Images untuk Anda gunakan.

1. Atur Icon properti yang pertama FlyoutItem ke moon.png.

   <FlyoutItem Title="Moon Phase" Icon="moon.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:MoonPhasePage}" />
   </FlyoutItem>
   

2. Ulangi untuk 2 item flyout lainnya, masing-masing menggunakan sun.png dan question.png .

   <FlyoutItem Title="Sunrise" Icon="sun.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:SunrisePage}"/>
   </FlyoutItem>
   
   <FlyoutItem Title="About" Icon="question.png">
       <ShellContent
           ContentTemplate="{DataTemplate local:AboutPage}"/>
   </FlyoutItem>
   

3. Jalankan aplikasi dan buka flyout. Anda akan melihat setiap item flyout sekarang memiliki ikon yang terkait dengannya.

   

Menambahkan header flyout

Item flyout berada di bagian paling atas menu flyout, membuatnya sulit dibedakan. Kita dapat menambahkan beberapa ruang ke bagian atas, dan bahkan seluruhnya View dengan menggunakan <Shell.FlyoutHeader>.

1. Sebagai anak ke simpul <Shell> , tambahkan hal berikut:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. <Shell.FlyoutHeader> Dalam hierarki tampilan apa pun yang Anda inginkan. Mari kita masukkan Grid dengan .Image

   <Shell.FlyoutHeader>
       <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
           <Image Source="moon.png" />
       </Grid>
   </Shell.FlyoutHeader>
   

   

Lanjutkan