Bagikan melalui

Xamarin.Forms Flyout shell

  • Artikel

Pengalaman navigasi yang disediakan oleh Xamarin.Forms Shell didasarkan pada flyout dan tab. Flyout adalah menu akar opsional untuk aplikasi Shell, dan sepenuhnya dapat disesuaikan. Ini dapat diakses melalui ikon atau dengan menggesek dari sisi layar. Flyout terdiri dari header opsional, item flyout, item menu opsional, dan footer opsional:

Cuplikan layar flyout yang dianotasi Shell

Item flyout

Satu atau beberapa item flyout dapat ditambahkan ke flyout, dan setiap item flyout diwakili oleh objek FlyoutItem. Setiap FlyoutItem objek harus merupakan anak dari objek subkelas Shell . Item flyout muncul di bagian atas flyout saat header flyout tidak ada.

Contoh berikut membuat flyout yang berisi dua item flyout:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       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>

Properti FlyoutItem.Title , jenis string, menentukan judul item flyout. Properti FlyoutItem.Icon , dari jenis ImageSource, menentukan ikon item flyout:

Cuplikan layar aplikasi dua halaman Shell dengan item flyout, di iOS dan Android

Dalam contoh ini, setiap ShellContent objek hanya dapat diakses melalui item flyout, dan bukan melalui tab. Ini karena secara default, tab hanya akan ditampilkan jika item flyout berisi lebih dari satu tab.

Penting

Dalam aplikasi Shell, halaman dibuat sesuai permintaan sebagai respons terhadap navigasi. Ini dicapai dengan menggunakan DataTemplate ekstensi markup untuk mengatur ContentTemplate properti setiap ShellContent objek ke ContentPage objek.

Shell memiliki operator konversi implisit yang memungkinkan hierarki visual Shell disederhanakan, tanpa memperkenalkan tampilan tambahan ke pohon visual. 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://xamarin.com/schemas/2014/forms"
       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>

Konversi implisit ini secara otomatis membungkus setiap ShellContent objek dalam Tab objek, yang dibungkus dalam FlyoutItem objek.

Catatan

Semua FlyoutItem objek dalam objek subkelas Shell secara otomatis ditambahkan ke Shell.FlyoutItems koleksi, yang menentukan daftar item yang akan ditampilkan dalam flyout.

Opsi tampilan flyout

Properti FlyoutItem.FlyoutDisplayOptions mengonfigurasi bagaimana item flyout dan anak-anaknya ditampilkan di flyout. Properti ini harus diatur ke FlyoutDisplayOptions anggota enumerasi:

  • AsSingleItem, menunjukkan bahwa item akan terlihat sebagai satu item. Ini adalah nilai FlyoutDisplayOptions default properti.
  • AsMultipleItems, menunjukkan bahwa item dan anak-anaknya akan terlihat dalam flyout sebagai sekelompok item.

Item flyout untuk setiap Tab objek dalam FlyoutItem dapat ditampilkan dengan mengatur FlyoutItem.FlyoutDisplayOptions properti ke AsMultipleItems:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       FlyoutHeaderBehavior="CollapseOnScroll"
       x:Class="Xaminals.AppShell">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />  
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

    <ShellContent Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />    
</Shell>

Dalam contoh ini, item flyout dibuat untuk Tab objek yang merupakan anak dari FlyoutItem objek, dan ShellContent objek yang merupakan anak dari FlyoutItem objek. Ini terjadi karena setiap ShellContent objek yang merupakan anak dari FlyoutItem objek secara otomatis dibungkus dalam Tab objek. Selain itu, item flyout dibuat untuk objek akhir ShellContent , yang secara otomatis dibungkus dalam Tab objek, lalu dalam FlyoutItem objek.

Catatan

Tab ditampilkan ketika berisi FlyoutItem lebih dari satu ShellContent objek.

Ini menghasilkan item flyout berikut:

Cuplikan layar flyout yang berisi objek FlyoutItem, di iOS dan Android

Menentukan tampilan FlyoutItem

Tampilan masing-masing FlyoutItem dapat disesuaikan dengan mengatur Shell.ItemTemplate properti terlampir ke DataTemplate:

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

Contoh ini menampilkan judul setiap FlyoutItem objek dalam miring:

Cuplikan layar objek FlyoutItem yang di-template, di iOS dan Android

Karena Shell.ItemTemplate merupakan properti terlampir, templat yang berbeda dapat dilampirkan ke objek tertentu FlyoutItem .

Catatan

Shell menyediakan Title properti dan FlyoutIcon untuk BindingContext dari ItemTemplate.

Selain itu, Shell menyertakan tiga kelas gaya, yang secara otomatis diterapkan ke FlyoutItem objek. Untuk informasi selengkapnya, lihat Gaya objek FlyoutItem dan MenuItem.

Templat default untuk FlyoutItems

Default DataTemplate yang digunakan untuk masing-masing FlyoutItem ditunjukkan di bawah ini:

<DataTemplate x:Key="FlyoutTemplate">
    <Grid x:Name="FlyoutItemLayout"
          HeightRequest="{x:OnPlatform Android=50}"
          ColumnSpacing="{x:OnPlatform UWP=0}"
          RowSpacing="{x:OnPlatform UWP=0}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="{x:OnPlatform Android=#F2F2F2, iOS=#F2F2F2}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50, UWP=Auto}" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image x:Name="FlyoutItemImage"
               Source="{Binding FlyoutIcon}"
               VerticalOptions="Center"
               HorizontalOptions="{x:OnPlatform Default=Center, UWP=Start}"
               HeightRequest="{x:OnPlatform Android=24, iOS=22, UWP=16}"
               WidthRequest="{x:OnPlatform Android=24, iOS=22, UWP=16}">
            <Image.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="UWP"
                            Value="12,0,12,0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Image.Margin>
        </Image>
        <Label x:Name="FlyoutItemLabel"
               Grid.Column="1"
               Text="{Binding Title}"
               FontSize="{x:OnPlatform Android=14, iOS=Small}"
               HorizontalOptions="{x:OnPlatform UWP=Start}"
               HorizontalTextAlignment="{x:OnPlatform UWP=Start}"
               FontAttributes="{x:OnPlatform iOS=Bold}"
               VerticalTextAlignment="Center">
            <Label.TextColor>
                <OnPlatform x:TypeArguments="Color">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="#D2000000" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.TextColor>
            <Label.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="20, 0, 0, 0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.Margin>
            <Label.FontFamily>
                <OnPlatform x:TypeArguments="x:String">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="sans-serif-medium" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.FontFamily>
        </Label>
    </Grid>
</DataTemplate>

Templat ini dapat digunakan sebagai dasar untuk membuat perubahan pada tata letak flyout yang ada, dan juga menunjukkan status visual yang diimplementasikan untuk item flyout.

Selain itu, Gridelemen , Image, dan Label semuanya memiliki x:Name nilai dan sebagainya dapat ditargetkan dengan Visual State Manager. Untuk informasi selengkapnya, lihat Mengatur status pada beberapa elemen.

Catatan

Templat yang sama juga dapat digunakan untuk MenuItem objek.

Mengganti konten flyout

Item flyout, yang mewakili konten flyout, secara opsional dapat diganti dengan konten Anda sendiri dengan mengatur Shell.FlyoutContent properti yang dapat diikat ke object:

<Shell ...
       x:Name="shell">
    ...
    <Shell.FlyoutContent>
        <CollectionView BindingContext="{x:Reference shell}"
                        IsGrouped="True"
                        ItemsSource="{Binding FlyoutItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding Title}"
                           TextColor="White"
                           FontSize="Large" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Shell.FlyoutContent>
</Shell>

Dalam contoh ini, konten flyout diganti dengan CollectionView yang menampilkan judul setiap item dalam FlyoutItems koleksi.

Catatan

Properti FlyoutItems , di Shell kelas , adalah koleksi item flyout baca-saja.

Atau, konten flyout dapat ditentukan dengan mengatur Shell.FlyoutContentTemplate properti yang dapat diikat ke DataTemplate:

<Shell ...
       x:Name="shell">
    ...
    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <CollectionView BindingContext="{x:Reference shell}"
                            IsGrouped="True"
                            ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label Text="{Binding Title}"
                               TextColor="White"
                               FontSize="Large" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
</Shell>

Penting

Header flyout dapat secara opsional ditampilkan di atas konten flyout Anda, dan footer flyout secara opsional dapat ditampilkan di bawah konten flyout Anda. Jika konten flyout Anda dapat digulir, Shell akan mencoba menghormati perilaku gulir header flyout Anda.

Item menu dapat ditambahkan secara opsional ke flyout, dan setiap item menu diwakili oleh sebuah objek MenuItem. Posisi objek MenuItem di flyout bergantung pada urutan deklarasi dalam hierarki visual Shell. Oleh karena itu, setiap objek MenuItem yang dideklarasikan sebelum objek FlyoutItem akan muncul sebelum objek FlyoutItem dalam flyout, dan objek MenuItem apa pun yang dideklarasikan setelah objek FlyoutItem akan muncul setelah objek FlyoutItem dalam flyout.

Kelas MenuItem memiliki Clicked acara, dan Command properti. Oleh karena itu, MenuItem objek mengaktifkan skenario yang menjalankan tindakan sebagai respons terhadap yang MenuItem diketuk.

MenuItem objek dapat ditambahkan ke flyout seperti yang ditunjukkan dalam contoh berikut:

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

Contoh ini menambahkan MenuItem objek ke flyout, di bawah semua item flyout:

Cuplikan layar flyout yang berisi objek MenuItem, di iOS dan Android

Objek MenuItem menjalankan bernama ICommand HelpCommand, yang membuka URL yang ditentukan oleh CommandParameter properti di browser web sistem.

Catatan

Masing-masing BindingContext MenuItem diwariskan dari objek subkelas Shell .

Tentukan tampilan MenuItem

Tampilan masing-masing MenuItem dapat disesuaikan dengan mengatur Shell.MenuItemTemplate properti terlampir ke DataTemplate:

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
</Shell>

Contoh ini melampirkan DataTemplate ke setiap MenuItem objek, menampilkan judul MenuItem objek dalam miring:

Cuplikan layar objek MenuItem templat, di iOS dan Android

Karena Shell.MenuItemTemplate merupakan properti terlampir, templat yang berbeda dapat dilampirkan ke objek tertentu MenuItem .

Catatan

Shell menyediakan Text properti dan IconImageSource untuk BindingContext dari MenuItemTemplate. Anda juga dapat menggunakan Title sebagai ganti Text dan Icon sebagai gantinya IconImageSource yang akan memungkinkan Anda menggunakan kembali templat yang sama untuk item menu dan item flyout.

Templat default untuk FlyoutItem objek juga dapat digunakan untuk MenuItem objek. Untuk informasi selengkapnya, lihat Templat default untuk FlyoutItems.

Gaya objek FlyoutItem dan MenuItem

Shell menyertakan tiga kelas gaya, yang secara otomatis diterapkan ke FlyoutItem objek dan MenuItem . Nama kelas gaya adalah FlyoutItemLabelStyle, , FlyoutItemImageStyledan FlyoutItemLayoutStyle.

XAML berikut menunjukkan contoh mendefinisikan gaya untuk kelas gaya ini:

<Style TargetType="Label"
       Class="FlyoutItemLabelStyle">
    <Setter Property="TextColor"
            Value="Black" />
    <Setter Property="HeightRequest"
            Value="100" />
</Style>

<Style TargetType="Image"
       Class="FlyoutItemImageStyle">
    <Setter Property="Aspect"
            Value="Fill" />
</Style>

<Style TargetType="Layout"
       Class="FlyoutItemLayoutStyle"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Teal" />
</Style>

Gaya ini akan secara otomatis diterapkan ke FlyoutItem objek dan MenuItem , tanpa harus mengatur propertinya StyleClass ke nama kelas gaya.

Selain itu, kelas gaya kustom dapat ditentukan dan diterapkan ke FlyoutItem objek dan MenuItem . Untuk informasi selengkapnya tentang kelas gaya, lihat Xamarin.Forms Kelas Gaya.

Header flyout

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

<Shell ...>
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
</Shell>

Jenis diperlihatkan FlyoutHeader dalam contoh berikut:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xaminals.Controls.FlyoutHeader"
             HeightRequest="200">
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFill"
               Source="xamarinstore.jpg"
               Opacity="0.6" />
        <Label Text="Animals"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentView>

Ini menghasilkan header flyout berikut:

Cuplikan layar header flyout

Atau, tampilan header flyout dapat ditentukan dengan mengatur Shell.FlyoutHeaderTemplate properti yang dapat diikat ke DataTemplate:

<Shell ...>
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black"
                  HeightRequest="200">
                <Image Aspect="AspectFill"
                       Source="xamarinstore.jpg"
                       Opacity="0.6" />
                <Label Text="Animals"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center" />
            </Grid>            
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
</Shell>

Secara default, header flyout akan diperbaiki dalam flyout sementara konten di bawah ini akan menggulir jika ada cukup item. Namun, perilaku ini dapat diubah dengan mengatur Shell.FlyoutHeaderBehavior properti yang dapat diikat ke salah FlyoutHeaderBehavior satu anggota enumerasi:

  • Default – menunjukkan bahwa perilaku default untuk platform akan digunakan. Ini adalah nilai FlyoutHeaderBehavior default properti.
  • Fixed – menunjukkan bahwa header flyout tetap terlihat dan tidak berubah setiap saat.
  • Scroll – menunjukkan bahwa header flyout menggulir keluar dari tampilan saat pengguna menggulir item.
  • CollapseOnScroll – menunjukkan bahwa header flyout hanya diciutkan ke judul, karena pengguna menggulir item.

Contoh berikut menunjukkan cara menciutkan header flyout saat pengguna menggulir:

<Shell ...
       FlyoutHeaderBehavior="CollapseOnScroll">
    ...
</Shell>

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

<Shell ...>
    <Shell.FlyoutFooter>
        <controls:FlyoutFooter />
    </Shell.FlyoutFooter>
</Shell>

Jenis diperlihatkan FlyoutFooter dalam contoh berikut:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="Xaminals.Controls.FlyoutFooter">
    <StackLayout>
        <Label Text="Xaminals"
               TextColor="GhostWhite"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
               TextColor="GhostWhite"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentView>

Ini menghasilkan footer flyout berikut:

Cuplikan layar footer flyout

Atau, tampilan footer flyout dapat didefinisikan dengan mengatur Shell.FlyoutFooterTemplate properti ke DataTemplate:

<Shell ...>
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="Xaminals"
                       TextColor="GhostWhite"
                       FontAttributes="Bold"
                       HorizontalOptions="Center" />
                <Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
                       TextColor="GhostWhite"
                       HorizontalOptions="Center" />
            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
</Shell>

Footer flyout diperbaiki ke bagian bawah flyout, dan bisa menjadi ketinggian apa pun. Selain itu, footer tidak pernah mengaburkan item menu apa pun.

Lebar dan tinggi flyout

Lebar dan tinggi flyout dapat disesuaikan dengan mengatur Shell.FlyoutWidth dan Shell.FlyoutHeight melampirkan properti ke double nilai:

<Shell ...
       FlyoutWidth="400"
       FlyoutHeight="200">
    ...
</Shell>

Ini memungkinkan skenario seperti memperluas flyout di seluruh layar, atau mengurangi tinggi flyout sehingga tidak mengaburkan bilah tab.

Ikon Flyout

Secara default, aplikasi Shell memiliki ikon hamburger yang, ketika ditekan, membuka flyout. Ikon ini dapat diubah dengan mengatur Shell.FlyoutIcon properti yang dapat diikat, dari jenis ImageSource, ke ikon yang sesuai:

<Shell ...
       FlyoutIcon="flyouticon.png">
    ...       
</Shell>

Latar belakang flyout

Warna latar belakang flyout dapat diatur dengan properti yang Shell.FlyoutBackgroundColor dapat diikat:

<Shell ...
       FlyoutBackgroundColor="AliceBlue">
    ...
</Shell>

Catatan

Shell.FlyoutBackgroundColor juga dapat diatur dari Lembar Gaya Bertingkat (CSS). Untuk informasi selengkapnya, lihat Xamarin.Forms Properti khusus Shell.

Atau, latar belakang flyout dapat ditentukan dengan mengatur Shell.FlyoutBackground properti yang dapat diikat ke Brush:

<Shell ...
       FlyoutBackground="LightGray">
    ...
</Shell>

Dalam contoh ini, latar belakang flyout dicat dengan abu-abu SolidColorBrushmuda .

Contoh berikut menunjukkan pengaturan latar belakang flyout ke LinearGradientBrush:

<Shell ...>
    <Shell.FlyoutBackground>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>
    ...
</Shell>

Untuk informasi selengkapnya tentang kuas, lihat Xamarin.Forms Sikat.

Gambar latar belakang flyout

Flyout dapat memiliki gambar latar belakang opsional, yang muncul di bawah header flyout dan di belakang item flyout, item menu, dan footer flyout. Gambar latar belakang dapat ditentukan dengan mengatur FlyoutBackgroundImage properti yang dapat diikat, dari jenis ImageSource, ke file, sumber daya tersemat, URI, atau aliran.

Rasio aspek gambar latar belakang dapat dikonfigurasi dengan mengatur FlyoutBackgroundImageAspect properti yang dapat diikat, dari jenis Aspect, ke salah Aspect satu anggota enumerasi:

  • AspectFill - mengklip gambar sehingga mengisi area tampilan sambil mempertahankan rasio aspek.
  • AspectFit - kotak surat gambar, jika diperlukan, sehingga gambar pas ke area tampilan, dengan ruang kosong ditambahkan ke atas/bawah atau samping tergantung pada apakah gambar lebar atau tinggi. Ini adalah nilai FlyoutBackgroundImageAspect default properti.
  • Fill - membentangkan gambar untuk sepenuhnya dan mengisi area tampilan. Ini dapat mengakibatkan distorsi gambar.

Contoh berikut menunjukkan pengaturan properti ini:

<Shell ...
       FlyoutBackgroundImage="photo.jpg"
       FlyoutBackgroundImageAspect="AspectFill">
    ...
</Shell>

Ini menghasilkan gambar latar belakang yang muncul di flyout, di bawah header flyout:

Cuplikan layar gambar latar belakang flyout

Latar belakang flyout

Latar belakang flyout, yang merupakan tampilan overlay flyout, dapat ditentukan dengan mengatur Shell.FlyoutBackdrop properti terlampir ke Brush:

<Shell ...
       FlyoutBackdrop="Silver">
    ...
</Shell>

Dalam contoh ini, latar belakang flyout dicat dengan perak SolidColorBrush.

Penting

Properti FlyoutBackdrop terlampir dapat diatur pada elemen Shell apa pun, tetapi hanya akan diterapkan saat diatur pada Shellobjek , , FlyoutItematau TabBar .

Contoh berikut menunjukkan pengaturan backdrop flyout ke LinearGradientBrush:

<Shell ...>
    <Shell.FlyoutBackdrop>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackdrop>
    ...
</Shell>

Untuk informasi selengkapnya tentang kuas, lihat Xamarin.Forms Sikat.

Perilaku flyout

Flyout dapat diakses melalui ikon hamburger atau dengan menggesek dari sisi layar. Namun, perilaku ini dapat diubah dengan mengatur Shell.FlyoutBehavior properti terlampir ke salah FlyoutBehavior satu anggota enumerasi:

  • Disabled – menunjukkan bahwa flyout tidak dapat dibuka oleh pengguna.
  • Flyout – menunjukkan bahwa flyout dapat dibuka dan ditutup oleh pengguna. Ini adalah nilai default untuk FlyoutBehavior properti .
  • Locked – menunjukkan bahwa flyout tidak dapat ditutup oleh pengguna, dan tidak tumpang tindih dengan konten.

Contoh berikut menunjukkan cara menonaktifkan flyout:

<Shell ...
       FlyoutBehavior="Disabled">
    ...
</Shell>

Catatan

Properti FlyoutBehavior terlampir dapat diatur pada Shellobjek halaman , FlyoutItem, ShellContent, dan , untuk mengambil alih perilaku flyout default.

Gulir vertikal flyout

Secara default, flyout dapat digulir secara vertikal saat item flyout tidak pas di flyout. Perilaku ini dapat diubah dengan mengatur Shell.FlyoutVerticalScrollMode properti yang dapat diikat ke salah ScrollMode satu anggota enumerasi:

  • Disabled – menunjukkan bahwa pengguliran vertikal akan dinonaktifkan.
  • Enabled – menunjukkan bahwa pengguliran vertikal akan diaktifkan.
  • Auto – menunjukkan bahwa pengguliran vertikal akan diaktifkan jika item flyout tidak pas di flyout. Ini adalah nilai FlyoutVerticalScrollMode default properti.

Contoh berikut menunjukkan cara menonaktifkan pengguliran vertikal:

<Shell ...
       FlyoutVerticalScrollMode="Disabled">
    ...
</Shell>

Urutan tab FlyoutItem

Secara default, urutan FlyoutItem tab objek adalah urutan yang sama di mana objek tersebut tercantum di XAML, atau ditambahkan secara terprogram ke koleksi anak. Urutan ini adalah urutan di mana FlyoutItem objek akan dinavigasi dengan keyboard, dan seringkali urutan default ini adalah urutan terbaik.

Urutan tab default dapat diubah dengan mengatur FlyoutItem.TabIndex properti, yang menunjukkan urutan FlyoutItem objek menerima fokus saat pengguna menavigasi melalui item dengan menekan tombol Tab. Nilai default properti adalah 0, dan dapat diatur ke nilai apa pun int .

Aturan berikut berlaku saat menggunakan urutan tab default, atau mengatur TabIndex properti:

  • FlyoutItem objek dengan sama dengan TabIndex 0 ditambahkan ke urutan tab berdasarkan urutan deklarasinya dalam koleksi XAML atau anak.
  • FlyoutItem objek dengan TabIndex lebih dari 0 ditambahkan ke urutan tab berdasarkan nilainya TabIndex .
  • FlyoutItem objek dengan TabIndex kurang dari 0 ditambahkan ke urutan tab dan muncul sebelum nilai nol.
  • Konflik pada diselesaikan TabIndex dengan urutan deklarasi.

Setelah menentukan urutan tab, menekan tombol Tab akan mengalihkan fokus melalui FlyoutItem objek dalam urutan naik TabIndex , membungkus ke awal setelah objek akhir tercapai.

Selain mengatur urutan FlyoutItem tab objek, mungkin perlu untuk mengecualikan beberapa objek dari urutan tab. Ini dapat dicapai dengan FlyoutItem.IsTabStop properti , yang menunjukkan apakah FlyoutItem disertakan dalam navigasi tab. Nilai defaultnya adalah true, dan ketika nilainya adalah false FlyoutItem diabaikan oleh infrastruktur navigasi tab, terlepas dari apakah diatur TabIndex .

Pilihan FlyoutItem

Ketika aplikasi Shell yang menggunakan flyout dijalankan pertama kali, Shell.CurrentItem properti akan diatur ke objek pertama FlyoutItem dalam objek subkelas Shell . Namun, properti dapat diatur ke yang lain FlyoutItem, seperti yang ditunjukkan dalam contoh berikut:

<Shell ...
       CurrentItem="{x:Reference aboutItem}">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        ...
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
                  Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>

Contoh ini mengatur CurrentItem properti ke ShellContent objek bernama aboutItem, yang menghasilkannya dipilih dan ditampilkan. Dalam contoh ini, konversi implisit digunakan untuk membungkus ShellContent objek dalam Tab objek, yang dibungkus dalam FlyoutItem objek.

Kode C# yang setara, diberikan ShellContent objek bernama aboutItem, adalah:

CurrentItem = aboutItem;

Dalam contoh ini, CurrentItem properti diatur di kelas subkelas Shell . Atau, CurrentItem properti dapat diatur di kelas apa pun melalui Shell.Current properti statis:

Shell.Current.CurrentItem = aboutItem;

Catatan

Aplikasi dapat memasukkan status di mana memilih item flyout bukan operasi yang valid. Dalam kasus seperti itu FlyoutItem , dapat dinonaktifkan dengan mengatur propertinya IsEnabled ke false. Ini akan mencegah pengguna untuk dapat memilih item flyout.

Visibilitas FlyoutItem

Item flyout terlihat di flyout secara default. Namun, item dapat disembunyikan di flyout dengan FlyoutItemIsVisible properti , dan dihapus dari flyout dengan IsVisible properti :

  • FlyoutItemIsVisible, dari jenis bool, menunjukkan apakah item disembunyikan dalam flyout, tetapi masih dapat dijangkau dengan GoToAsync metode navigasi. Nilai default properti ini adalah true.
  • IsVisible, dari jenis bool, menunjukkan apakah item harus dihapus dari pohon visual dan karenanya tidak muncul di flyout. Nilai defaultnya adalah true.

Contoh berikut menunjukkan menyembunyikan item di flyout:

<Shell ...>
    <FlyoutItem ...
                FlyoutItemIsVisible="False">
        ...
    </FlyoutItem>
</Shell>

Catatan

Ada juga Shell.FlyoutItemIsVisible properti terlampir, yang dapat diatur pada FlyoutItemobjek , , MenuItemTab, dan ShellContent .

Buka dan tutup flyout secara terprogram

Flyout dapat dibuka dan ditutup secara terprogram dengan mengatur Shell.FlyoutIsPresented properti yang dapat diikat ke boolean nilai yang menunjukkan apakah flyout saat ini terbuka:

<Shell ...
       FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>

Atau, ini dapat dilakukan dalam kode:

Shell.Current.FlyoutIsPresented = false;