.NET MAUI Shell-Flyouts
Durchsuchen Sie das BeispielDie von der .NET Multi-Platform App UI (.NET MAUI) Shell bereitgestellte Navigationserfahrung basiert auf Flyouts und Registerkarten. Ein Flyout ist das optionale Stammmenü für eine Shell-App und lässt sich vollständig anpassen. Der Zugriff erfolgt über ein Symbol oder durch Wischen von einer Bildschirmseite. Das Flyout besteht aus einem optionalen Header, Flyout-Elementen, optionalen Menüelementen und einer optionalen Fußzeile.
Flyout-Elemente
Ein oder mehrere Flyoutelemente können zum Flyout hinzugefügt werden, und jedes Flyoutelement wird von einem FlyoutItem-Objekt dargestellt. Jedes FlyoutItem-Objekt muss ein untergeordnetes Element des Shell-Objekts mit Unterklassen sein. Flyoutelemente werden ganz oben im Flyout angezeigt, wenn kein Flyoutheader vorhanden ist.
Im folgenden Beispiel wird ein Flyout erstellt, das zwei Flyoutelemente enthält:
<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>
Die FlyoutItem.Title-Eigenschaft vom Typ string definiert den Titel des Flyoutelements. Die FlyoutItem.Icon-Eigenschaft vom Typ ImageSource definiert das Symbol des Flyoutelements:
In diesem Beispiel kann nur über Flyoutelemente und nicht über Registerkarten auf die einzelnen ShellContent-Objekte zugegriffen werden. Dies liegt daran, dass Registerkarten standardmäßig nur angezeigt werden, wenn das Flyoutelement mehr als eine Registerkarte enthält.
Wichtig
In einer Shell-App werden Seiten bei Bedarf als Reaktion auf die Navigation erstellt. Dies wird mithilfe der DataTemplate-Markuperweiterung erreicht, um die ContentTemplate-Eigenschaft der einzelnen ShellContent-Objekte auf ein ContentPage-Objekt festzulegen.
Shell verfügt über implizite Konvertierungsoperatoren, die es ermöglichen, die visuelle Hierarchie der Shell zu vereinfachen, ohne zusätzliche Ansichten in die visuelle Struktur einzufügen. Dies ist möglich, weil ein Shell-Objekt mit Unterklassen immer nur FlyoutItem-Objekte oder ein TabBar-Objekt enthalten darf, die immer nur Tab-Objekte enthalten dürfen, die wiederum immer nur ShellContent-Objekte enthalten dürfen. Diese impliziten Konvertierungsoperatoren können verwendet werden, um die Objekte FlyoutItem und Tab aus dem vorherigen Beispiel zu entfernen:
<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>
Diese implizite Konvertierung schließt jedes ShellContent-Objekt automatisch in Tab-Objekte ein, die in FlyoutItem-Objekten eingeschlossen sind.
Hinweis
Alle FlyoutItem-Objekte in einem Shell-Objekt mit Unterklassen werden automatisch zur Shell.FlyoutItems-Sammlung hinzugefügt, die die Liste der im Flyout angezeigten Elemente definiert.
Anzeigeoptionen für Flyouts
Die FlyoutItem.FlyoutDisplayOptions-Eigenschaft konfiguriert ein Flyoutelement, und seine untergeordneten Elemente werden im Flyout angezeigt. Diese Eigenschaft sollte auf einen FlyoutDisplayOptions-Enumerationsmember festgelegt werden:
AsSingleItem: Gibt an, dass das Element als ein einzelnes Element angezeigt wird. Dies ist der Standardwert der FlyoutDisplayOptions-Eigenschaft.AsMultipleItems, gibt an, dass das Element und seine direkt untergeordneten Elemente im Flyout als Gruppe von Elementen sichtbar sein werden.
Ein Flyoutelement für jedes Tab-Objekt innerhalb eines FlyoutItem kann angezeigt werden, indem die FlyoutItem.FlyoutDisplayOptions-Eigenschaft auf AsMultipleItems festgelegt wird:
<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>
In diesem Beispiel werden Flyoutelemente für das Tab-Objekt erstellt, das ein untergeordnetes Element des FlyoutItem-Objekts ist, sowie für die ShellContent-Objekte, die untergeordnete Elemente des FlyoutItem-Objekts sind. Grund hierfür ist, dass jedes ShellContent-Objekt, das ein untergeordnetes Element des FlyoutItem-Objekts ist, automatisch in ein Tab-Objekt umschlossen wird. Darüber hinaus wird ein Flyoutelement für das endgültige ShellContent-Objekt erstellt, das automatisch in ein Tab-Objekt und dann in ein FlyoutItem-Objekt eingeschlossen wird.
Hinweis
Registerkarten werden angezeigt, wenn ein FlyoutItem-Objekt mehr als ein ShellContent-Objekt enthält.
Dies führt zu folgenden Flyout-Elementen:
Definieren der FlyoutItem-Darstellung
Die Darstellung jedes FlyoutItem-Objekts kann angepasst werden, indem die angefügte Eigenschaft Shell.ItemTemplate auf eine DataTemplate-Klasse festgelegt wird:
<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>
Dieses Beispiel stellt die Titel der einzelnen FlyoutItem-Objekte in Kursivschrift dar:
Da Shell.ItemTemplate eine angefügte Eigenschaft ist, können verschiedene Vorlagen an bestimmte FlyoutItem-Objekte angefügt werden.
Hinweis
Die Shell stellt die Eigenschaften Title und FlyoutIcon für die BindingContext-Klasse von ItemTemplate zur Verfügung.
Die Shell enthält zudem drei Formatklassen, die automatisch auf FlyoutItem-Objekte angewendet werden. Weitere Informationen finden Sie unter Formatvorlage für FlyoutItem- und MenuItem-Objekte.
Standardvorlage für FlyoutItems
Im Folgenden sehen Sie die DataTemplate-Standardvorlage, die für jede FlyoutItem-Klasse verwendet wird:
<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>
Diese Vorlage kann als Grundlage für Änderungen am vorhandenen Layout für Flyout-Elemente verwendet werden. Außerdem werden die visuellen Zustände angezeigt, die für Flyout-Elemente implementiert werden.
Darüber hinaus enthalten die Grid-, Image- und Label-Elemente x:Name-Werte und können deshalb im Visual State-Manager als Ziel festgelegt werden. Weitere Informationen finden Sie unter Festlegen des Zustands für mehrere Elemente.
Hinweis
Die gleiche Vorlage kann auch für MenuItem-Objekte verwendet werden.
Ersetzen von Flyoutinhalten
FlyoutItem-Elemente bilden den Flyoutinhalt und können optional durch eigenen Inhalt ersetzt werden, indem Sie die bindbare Eigenschaft Shell.FlyoutContent auf ein Objekt festlegen:
<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>
In diesem Beispiel wird der Flyoutinhalt durch ein CollectionView-Objekt ersetzt, das die Titel der einzelnen Elemente in der Sammlung FlyoutItems anzeigt.
Hinweis
Die FlyoutItems-Eigenschaft in der Shell-Klasse ist eine schreibgeschützte Sammlung von Flyoutelementen.
Der Flyoutinhalt kann auch definiert werden, indem Sie die bindbare Eigenschaft Shell.FlyoutContentTemplate auf ein DataTemplate-Objekt festlegen:
<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>
Wichtig
Über dem Flyoutinhalt kann optional ein Flyoutheader angezeigt werden. Gleichermaßen kann optional eine Flyoutfußzeile unter dem Inhalt angezeigt werden. Wenn das Scrollen in Ihrem Flyoutinhalt möglich ist, versucht die Shell, das Scrollverhalten Ihres Flyoutheaders zu berücksichtigen.
Menüelemente
Menüelemente können optional zum Flyout hinzugefügt werden, und jedes Menüelement wird durch ein MenuItem-Objekt dargestellt. Die Position von MenuItem-Objekten auf dem Flyout hängt von der Deklarationsreihenfolge in der visuellen Shell-Hierarchie ab. Daher werden alle MenuItem-Objekte, die vor FlyoutItem-Objekten deklariert wurden, vor den FlyoutItem-Objekten im Flyout angezeigt, und alle MenuItem-Objekte, die nach FlyoutItem-Objekten deklariert wurden, werden nach den FlyoutItem-Objekten im Flyout angezeigt.
Die MenuItem-Klasse verfügt über ein Clicked-Ereignis und eine Command-Eigenschaft. Daher ermöglichen MenuItem-Objekte Szenarien, die eine Aktion als Reaktion auf das Antippen eines MenuItem-Objekts ausführen.
MenuItem-Objekte können wie im folgenden Beispiel gezeigt dem Flyout hinzugefügt werden:
<Shell ...>
...
<MenuItem Text="Help"
IconImageSource="help.png"
Command="{Binding HelpCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />
</Shell>
In diesem Beispiel wird dem Flyout unterhalb aller Flyoutelemente ein MenuItem-Objekt hinzugefügt:
Das MenuItem-Objekt führt einen ICommand namens HelpCommand aus, der die durch die CommandParameter-Eigenschaft angegebene URL im Systemwebbrowser öffnet.
Hinweis
Das BindingContext jedes MenuItem-Objekts wird von dem Shell-Objekt mit Unterklassen geerbt.
Definieren der Darstellung des MenuItem-Objekts
Die Darstellung jedes MenuItem-Objekts kann angepasst werden, indem die angefügte Eigenschaft Shell.MenuItemTemplate auf eine DataTemplate-Klasse festgelegt wird:
<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>
In diesem Beispiel wird jedem MenuItem-Objekt die DataTemplate hinzugefügt, wodurch der Titel des MenuItem-Objekts in Kursivschrift angezeigt wird:
Da Shell.MenuItemTemplate eine angefügte Eigenschaft ist, können verschiedene Vorlagen an bestimmte MenuItem-Objekte angefügt werden.
Hinweis
Die Shell stellt die Eigenschaften Text und IconImageSource für die BindingContext-Klasse von MenuItemTemplate zur Verfügung. Sie können auch Title anstelle von Text und Icon anstelle von IconImageSource verwenden. Dadurch können Sie dieselbe Vorlage für Menüelemente und Flyoutelemente wiederverwenden.
Die Standardvorlage für FlyoutItem-Objekte kann auch für MenuItem-Objekte verwendet werden. Weitere Informationen finden Sie unter Standardvorlage für FlyoutItems.
Formatvorlage für FlyoutItem- und MenuItem-Objekte
Die Shell enthält drei Formatklassen, die automatisch auf FlyoutItem- und MenuItem-Objekte angewendet werden. Die Namen dieser Formatklassen lauten FlyoutItemLabelStyle, FlyoutItemImageStyle und FlyoutItemLayoutStyle.
Der folgende XAML-Code zeigt ein Beispiel für das Definieren von Formaten für diese Formatklassen:
<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>
Diese Formate werden automatisch auf FlyoutItem- und MenuItem-Objekte angewendet, ohne dass deren StyleClass-Eigenschaften auf die Namen der Formatklassen festgelegt werden müssen.
Darüber hinaus können benutzerdefinierte Formatklassen definiert und auf FlyoutItem- und MenuItem-Objekte angewendet werden. Weitere Informationen über Stilklassen finden Sie unter Stilklassen.
Flyout-Header
Der Flyoutheader ist der Inhalt, der optional oben im Flyout angezeigt wird, wobei seine Darstellung durch ein object definiert wird, das über die bindbare Eigenschaft Shell.FlyoutHeader festgelegt werden kann:
<Shell ...>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
</Shell>
Der FlyoutHeader-Typ wird im folgenden Beispiel gezeigt:
<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>
Dies führt zu folgendem Flyout-Header:
Alternativ kann die Darstellung des Flyoutheaders definiert werden, indem die bindbare Eigenschaft Shell.FlyoutHeaderTemplate auf eine DataTemplate festgelegt wird:
<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>
Standardmäßig wird der Flyout-Header im Flyout fixiert, während der Inhalt unten scrollt, wenn genügend Elemente vorhanden sind. Allerdings kann dieses Verhalten geändert werden, indem die bindbare Eigenschaft Shell.FlyoutHeaderBehavior auf einen der FlyoutHeaderBehavior-Enumerationsmember festgelegt wird:
Default– Gibt an, dass das plattformspezifische Standardverhalten verwendet wird. Dies ist der Standardwert derFlyoutHeaderBehavior-Eigenschaft.Fixed– Gibt an, dass der Flyout-Header jederzeit sichtbar und unverändert bleibt.Scroll– Gibt an, dass der Flyout-Header beim Durchblättern der Elemente durch den Benutzer aus der Sicht des Benutzers heraus scrollt.CollapseOnScroll– Gibt an, dass der Flyout-Header beim Durchblättern der Elemente durch den Benutzer zu einem Titel reduziert wird.
Das folgende Beispiel zeigt, wie der Flyout-Header beim Durchblättern der Elemente durch den Benutzer reduziert wird:
<Shell ...
FlyoutHeaderBehavior="CollapseOnScroll">
...
</Shell>
Flyout-Fußzeile
Die Flyoutfußzeile ist der Inhalt, der optional unten im Flyout angezeigt wird, wobei seine Darstellung durch ein object definiert wird, das mit der bindbaren Eigenschaft Shell.FlyoutFooter festgelegt werden kann:
<Shell ...>
<Shell.FlyoutFooter>
<controls:FlyoutFooter />
</Shell.FlyoutFooter>
</Shell>
Der FlyoutFooter-Typ wird im folgenden Beispiel gezeigt:
<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>
Wichtig
Im vorherigen XAML-Beispiel wurde ein neuer XAML-Namespace mit dem Namen sys: xmlns:sys="clr-namespace:System;assembly=netstandard"definiert. Dieser XAML-Namespace ist sysdem .NET System Namespace zugeordnet. Mit der Zuordnung können Sie die in diesem Namespace definierten .NET-Typen verwenden, wie etwa DateTime in XAML. Weitere Informationen finden Sie unter XAML Namespace.
Dies führt zu folgenden Flyout-Fußzeilen:
Alternativ kann die Darstellung der Flyout-Fußzeile definiert werden, indem die Shell.FlyoutFooterTemplate-Eigenschaft auf eine DataTemplate festgelegt wird:
<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>
Die Flyout-Fußzeile ist am unteren Rand des Flyouts festgelegt und kann eine beliebige Höhe aufweisen. Außerdem werden von der Fußzeile keine Menüelemente verdeckt.
Breite und Höhe des Flyouts
Die Breite und Höhe des Flyouts können angepasst werden, indem die angefügten Eigenschaften Shell.FlyoutWidth und Shell.FlyoutHeight auf double-Werte festgelegt werden:
<Shell ...
FlyoutWidth="400"
FlyoutHeight="200">
...
</Shell>
Dadurch wird es beispielweise ermöglicht, das Flyout auf den gesamten Bildschirm auszuweiten oder die Höhe die Flyouts so zu reduzieren, dass die Registerkartenleiste nicht verdeckt wird.
Flyout-Symbol
Shell-Anwendungen verfügen standardmäßig über ein Hamburger-Symbol, das beim Drücken das Flyout öffnet. Dieses Symbol kann durch Festlegen der bindbaren Eigenschaft Shell.FlyoutIcon vom Typ ImageSource in ein passendes Symbol geändert werden:
<Shell ...
FlyoutIcon="flyouticon.png">
...
</Shell>
Flyouthintergrund
Die Hintergrundfarbe des Flyouts kann mit der bindbaren Eigenschaft Shell.FlyoutBackgroundColor festgelegt werden:
<Shell ...
FlyoutBackgroundColor="AliceBlue">
...
</Shell>
Hinweis
Die Shell.FlyoutBackgroundColor kann auch über ein Cascading Stylesheet (CSS) festgelegt werden. Weitere Informationen finden Sie unter .NET MAUI Shell-spezifische Eigenschaften.
Alternativ kann der Hintergrund des Flyouts angegeben werden, indem die bindbare Eigenschaft Shell.FlyoutBackground auf einen Brush festgelegt wird:
<Shell ...
FlyoutBackground="LightGray">
...
</Shell>
In diesem Beispiel wird für den Hintergrund des Flyouts ein hellgrauer SolidColorBrush verwendet.
Das folgende Beispiel zeigt, wie der Flyouthintergrund auf einen LinearGradientBrush festgelegt wird:
<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>
Weitere Informationen zu Pinseln finden Sie unter -.NET MAUI- Pinsel.
Flyout-Hintergrundbild
Das Flyout kann über ein optionales Hintergrundbild verfügen, das unterhalb des Flyoutheaders und hinter allen Flyoutelementen, Menüelementen und der Flyoutfußzeile angezeigt wird. Das Hintergrundbild kann angegeben werden, indem die bindbare FlyoutBackgroundImage-Eigenschaft vom Typ ImageSource auf eine Datei, eine eingebettete Ressource, einen URI oder einen Stream festgelegt wird.
Das Seitenverhältnis des Hintergrundbilds kann konfiguriert werden, indem die bindbare FlyoutBackgroundImageAspect-Eigenschaft vom Typ Aspect auf einen der Aspect-Enumerationsmember festgelegt wird:
AspectFill: Beschneidet das Bild so, dass es den Anzeigebereich ausfüllt und gleichzeitig das Seitenverhältnis beibehalten wird.AspectFit: Wendet das Letterboxformat auf das Bild an, wenn erforderlich, damit das Bild in den Anzeigebereich passt, wobei abhängig davon, ob das Bild breit oder hoch ist, Leerraum am oberen bzw. unteren Rand oder seitlich hinzugefügt wird. Dies ist der Standardwert derFlyoutBackgroundImageAspect-Eigenschaft.Fill: Streckt das Bild so, dass es den Anzeigebereich vollständig und genau ausfüllt. Dies kann zu einer Bildverzerrung führen.
Das folgende Beispiel zeigt, wie diese Eigenschaften festgelegt werden:
<Shell ...
FlyoutBackgroundImage="photo.jpg"
FlyoutBackgroundImageAspect="AspectFill">
...
</Shell>
Dies führt dazu, dass im Flyout unter dem Flyoutheader ein Hintergrundbild angezeigt wird:
Flyouthintergrund
Der Hintergrund des Flyouts ist die Darstellung der Flyoutüberlagerung und kann angegeben werden, indem die angefügte Eigenschaft Shell.FlyoutBackdrop auf einen Brush festgelegt wird:
<Shell ...
FlyoutBackdrop="Silver">
...
</Shell>
In diesem Beispiel wird der Flyouthintergrund mit einem silbernen SolidColorBrush gezeichnet.
Wichtig
Die angefügte Eigenschaft FlyoutBackdrop kann für jedes beliebige Shellelement festgelegt werden, wird jedoch nur angewendet, wenn sie auf Shell-, FlyoutItem- oder TabBar-Objekte festgelegt wird.
Das folgende Beispiel zeigt, wie der Flyouthintergrund auf einen LinearGradientBrush festgelegt wird:
<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>
Weitere Informationen zu Pinseln finden Sie unter -.NET MAUI- Pinsel.
Flyout-Verhalten
Auf das Flyout kann über das Hamburger-Symbol oder durch Streichen von der Seite des Bildschirms zugegriffen werden. Allerdings kann dieses Verhalten geändert werden, indem die angefügte Eigenschaft Shell.FlyoutBehavior auf einen der FlyoutBehavior-Enumerationsmember festgelegt wird:
Disabled– Gibt an, dass das Flyout vom Benutzer nicht geöffnet werden kann.Flyout– Gibt an, dass das Flyout vom Benutzer geöffnet und geschlossen werden kann. Dies ist der Standardwert derFlyoutBehavior-Eigenschaft.Locked– Gibt an, dass das Flyout vom Benutzer nicht geschlossen werden kann und dass es keine Inhalte überlappt.
Im folgenden Beispiel wird die Deaktivierung des Flyouts veranschaulicht:
<Shell ...
FlyoutBehavior="Disabled">
...
</Shell>
Hinweis
Die angefügte Eigenschaft FlyoutBehavior kann auf Shell, FlyoutItem, ShellContent und Seitenobjekte festgelegt werden, um das Standardverhalten des Flyouts zu überschreiben.
Flyout mit vertikalem Scrollen
Standardmäßig kann ein Flyout vertikal gescrollt werden, wenn die Flyoutelemente nicht in das Flyout passen. Dieses Verhalten kann geändert werden, indem die bindbare Eigenschaft Shell.FlyoutVerticalScrollMode auf einen der ScrollMode-Enumerationsmember festgelegt wird:
Disabled: Gibt an, dass das vertikale Scrollen deaktiviert wird.Enabled: Gibt an, dass das vertikale Scrollen aktiviert wird.Auto: Gibt an, dass das vertikale Scrollen aktiviert wird, wenn die Flyoutelemente nicht in das Flyout passen. Dies ist der Standardwert derFlyoutVerticalScrollMode-Eigenschaft.
Im folgenden Beispiel wird gezeigt, wie Sie das vertikale Scrollen deaktivieren:
<Shell ...
FlyoutVerticalScrollMode="Disabled">
...
</Shell>
FlyoutItem-Auswahl
Wenn eine Shell-App, die ein Flyout verwendet, zum ersten Mal ausgeführt wird, wird die Eigenschaft Shell.CurrentItem auf das erste FlyoutItem-Objekt in dem untergeordneten Shell-Objekt gesetzt. Allerdings kann die Eigenschaft wie im folgenden Beispiel gezeigt, auf ein anderes FlyoutItem-Objekt festgelegt werden:
<Shell ...
CurrentItem="{x:Reference aboutItem}">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
...
</FlyoutItem>
<ShellContent x:Name="aboutItem"
Title="About"
Icon="info.png"
ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>
In diesem Beispiel wird die CurrentItem-Eigenschaft auf das ShellContent-Objekt namens aboutItem festgelegt, das daraufhin ausgewählt und angezeigt wird. In diesem Beispiel wird eine implizite Konvertierung zum Einschließen des ShellContent-Objekts in ein Tab-Objekt verwendet, das in ein FlyoutItem-Objekt eingeschlossen ist.
Wenn ein ShellContent-Objekt mit dem Namen aboutItem vorhanden ist, lautet der äquivalente C#-Code wie folgt:
CurrentItem = aboutItem;
In diesem Beispiel wird die CurrentItem-Eigenschaft in der Shell-Klasse mit Unterklassen festgelegt. Alternativ kann die CurrentItem-Eigenschaft in jeder Klasse über die statische Shell.Current-Eigenschaft festgelegt werden:
Shell.Current.CurrentItem = aboutItem;
Hinweis
Eine App kann in einen Zustand geraten, in dem die Auswahl eines Flyout-Elements keine gültige Operation ist. In solchen Fällen kann das FlyoutItem deaktiviert werden, indem die zugehörige IsEnabled-Eigenschaft auf false festgelegt wird. Dadurch wird verhindert, dass Benutzer das Flyoutelement auswählen können.
Sichtbarkeit von FlyoutItem-Elementen
FlyoutItem-Elemente sind im Flyout standardmäßig sichtbar. Allerdings kann ein Element im Flyout mit der FlyoutItemIsVisible-Eigenschaft ausgeblendet und mit der IsVisible-Eigenschaft aus dem Flyout entfernt werden:
FlyoutItemIsVisiblevom Typboolgibt an, ob das Element im Flyout ausgeblendet wird, aber dennoch mit der GoToAsync-Navigationsmethode erreichbar ist. Der Standardwert dieser Eigenschaft isttrue.IsVisiblevom Typboolgibt an, ob das Element aus der visuellen Struktur entfernt werden und daher nicht im Flyout angezeigt werden sollte. Der Standardwert lautettrue.
Im folgenden Beispiel wird gezeigt, wie ein Element im Flyout ausgeblendet wird:
<Shell ...>
<FlyoutItem ...
FlyoutItemIsVisible="False">
...
</FlyoutItem>
</Shell>
Hinweis
Außerdem gibt es die angefügte Eigenschaft Shell.FlyoutItemIsVisible, die für FlyoutItem-, MenuItem-, Tab- und ShellContent-Objekte festgelegt werden kann.
Programmgesteuertes Öffnen und Schließen des Flyouts
Das Flyout kann programmgesteuert geöffnet und geschlossen werden, indem die bindbare Eigenschaft Shell.FlyoutIsPresented auf einen boolean-Wert festgelegt wird, der angibt, ob das Flyout aktuell geöffnet ist:
<Shell ...
FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>
Alternativ kann dies im Code ausgeführt werden:
Shell.Current.FlyoutIsPresented = false;
