Sebelumnya

Berikutnya

Latihan: Menerapkan navigasi tab

Selesai

Di aplikasi astronomi, Anda diminta untuk menggabungkan tab dengan flyout untuk membantu navigasi di antara halaman yang berbeda.

Hal pertama yang Anda putuskan untuk dilakukan adalah menghapus semua halaman dari flyout dan menambahkannya ke TabBar, sehingga Anda dapat melihat bagaimana perasaan aplikasi.

Menambahkan Bilah Tab

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

2. Di halaman markup XAML, hapus semua yang ada di <Shell>dalam .

3. <TabBar> Buat dan kosong<Tab>.

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <TabBar>
           <Tab>
   
           </Tab>
       </TabBar>
   </Shell>
   

4. Selanjutnya tambahkan ke ShellContentTab. Kontennya akan menjadi MoonPhasePage.

   <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
   </TabBar>
   

5. Sekarang berikan judul pada tab yang akan ditampilkan dan ikon menggunakan Title properti dan Icon .

   <Tab Title="Moon Phase" Icon="moon.png">
   

6. Tambahkan yang lain Tab untuk SunrisePage. Buat matahari Titleterbit yang sama dan Icon sama sun.png. XAML yang sudah selesai akan terlihat seperti ini:

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <Shell.FlyoutHeader>
           <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
               <Image Source="moon.png"/>
           </Grid>
       </Shell.FlyoutHeader>
   
       <TabBar>
           <Tab Title="Moon Phase" Icon="moon.png">
               <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
           </Tab>
           <Tab Title="Sunrise" Icon="sun.png">
               <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
           </Tab>
       </TabBar>
   </Shell>
   

7. Jalankan aplikasi untuk melihat tampilannya.

   

Menggabungkan halaman tab dengan flyout

Anda memutuskan masuk akal untuk memiliki fase bulan dan halaman matahari terbit di halaman tab yang sama. Masuk akal juga untuk memisahkan halaman tentang. Jadi Anda memutuskan untuk menambahkan flyout kembali. Item flyout pertama akan menampilkan halaman tab, dan yang kedua halaman tentang.

1. TabBar Hapus dan semua turunannya yang baru saja Anda buat.

2. Di tempatnya, tambahkan dalam <FlyoutItem>. Atur propertinya Title ke Astronomi dan ikonnya ke moon.png.

   <FlyoutItem Title="Astronomy" Icon="moon.png">
   
   </FlyoutItem>
   

3. <FlyoutItem> Dalam tambahkan <ShellContent> yang menunjuk ke MoonPhasePage. Atur propertinya Title ke Fase Bulan dan Icon properti ke moon.png.

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

4. Dalam hal yang sama <FlyoutItem> tambahkan yang lain <ShellContent> untuk menunjuk ke SunrisePage. Atur propertinya Title ke Matahari Terbit dan Icon properti ke sun.png.

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

   Mengetuk item flyout ini sekarang akan menampilkan halaman tab dengan dua tab.

5. Untuk membuat item flyout baru yang menunjuk ke AboutPage, tambahkan baru <FlyoutItem>. Atur propertinya Title ke Tentang dan Icon properti ke question.png.

6. Di dalam itu <FlyoutItem> tambahkan <ShellContent> yang menunjuk ke AboutPage.

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

7. Jalankan kembali aplikasi. Anda akan melihat dua item di flyout. Yang pertama akan membuka halaman tab yang berisi MoonPhasePage dan SunrisePage. Yang kedua menampilkan dengan sendirinya AboutPage .

Butuh bantuan?

XAML akhir untuk AppShell.xaml akan terlihat seperti berikut ini:

<?xml version="1.0" encoding="UTF-8" ?>
<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">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->


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

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

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

</Shell>

Lanjutkan