Flyout .NET MAUI Shell
Telusuri sampelPengalaman navigasi yang disediakan oleh .NET Multi-platform App UI (.NET MAUI) 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:
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://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>
Properti FlyoutItem.Title , jenis string, menentukan judul item flyout. Properti FlyoutItem.Icon , dari jenis ImageSource, menentukan ikon item flyout:
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
Di 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://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>
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 turunan langsungnya 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://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"
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:
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:
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="{OnPlatform 44, Android=50}"
ColumnSpacing="{OnPlatform WinUI=0}"
RowSpacing="{OnPlatform WinUI=0}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="{AppThemeBinding Light=Black, Dark=White}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{OnPlatform Android=54, iOS=50, WinUI=Auto}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="FlyoutItemImage"
Source="{Binding FlyoutIcon}"
VerticalOptions="Center"
HorizontalOptions="{OnPlatform Default=Center, WinUI=Start}"
HeightRequest="{OnPlatform Android=24, iOS=22, WinUI=16}"
WidthRequest="{OnPlatform Android=24, iOS=22, WinUI=16}">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.Platforms>
<On Platform="WinUI"
Value="12,0,12,0" />
</OnPlatform.Platforms>
</OnPlatform>
</Image.Margin>
</Image>
<Label x:Name="FlyoutItemLabel"
Grid.Column="1"
Text="{Binding Title}"
FontSize="{OnPlatform Android=14, iOS=14}"
FontAttributes="{OnPlatform iOS=Bold}"
HorizontalOptions="{OnPlatform WinUI=Start}"
HorizontalTextAlignment="{OnPlatform WinUI=Start}"
VerticalTextAlignment="Center">
<Label.TextColor>
<OnPlatform x:TypeArguments="Color">
<OnPlatform.Platforms>
<On Platform="Android"
Value="{AppThemeBinding Light=Black, Dark=White}" />
</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="18" />
</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="18" />
</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
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/dotnet/maui/fundamentals/shell" />
</Shell>
Contoh ini menambahkan MenuItem objek ke flyout, di bawah semua item flyout:
Objek MenuItem menjalankan bernama ICommandHelpCommand, yang membuka URL yang ditentukan oleh CommandParameter properti di browser web sistem.
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:
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 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://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xaminals.Controls.FlyoutHeader"
HeightRequest="200">
<Grid BackgroundColor="Black">
<Image Aspect="AspectFill"
Source="store.jpg"
Opacity="0.6" />
<Label Text="Animals"
TextColor="White"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
</ContentView>
Ini menghasilkan header flyout berikut:
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="store.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 nilaiFlyoutHeaderBehaviordefault 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
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://schemas.microsoft.com/dotnet/2021/maui"
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>
Penting
Contoh XAML sebelumnya mendefinisikan namespace XAML baru bernama sys: xmlns:sys="clr-namespace:System;assembly=netstandard". Namespace XAML ini memetakan sys ke namespace .NET System . Pemetaan memungkinkan Anda menggunakan jenis .NET yang ditentukan dalam namespace tersebut, seperti DateTime, di XAML. Untuk informasi selengkapnya, lihat Namespace XAML.
Ini menghasilkan footer flyout berikut:
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 properti spesifik .NET MAUI 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 .NET MAUI Brushes.
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 nilaiFlyoutBackgroundImageAspectdefault 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:
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 .NET MAUI Brushes.
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 untukFlyoutBehaviorproperti .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 nilaiFlyoutVerticalScrollModedefault properti.
Contoh berikut menunjukkan cara menonaktifkan pengguliran vertikal:
<Shell ...
FlyoutVerticalScrollMode="Disabled">
...
</Shell>
Pilihan FlyoutItem
Saat aplikasi Shell yang menggunakan flyout dijalankan terlebih dahulu, Shell.CurrentItem properti akan diatur ke objek pertama FlyoutItem di 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 jenisbool, menunjukkan apakah item disembunyikan dalam flyout, tetapi masih dapat dijangkau dengan GoToAsync metode navigasi. Nilai default properti ini adalahtrue.IsVisible, dari jenisbool, menunjukkan apakah item harus dihapus dari pohon visual dan karenanya tidak muncul di flyout. Nilai defaultnya adalahtrue.
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;
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk