Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Parcourir l'exempleL’expérience de navigation fournie par l’interface utilisateur d’application multiplateforme .NET (.NET MAUI) Shell est basée sur des menus volants et des onglets. Un menu déroulant est le menu principal facultatif d’une application Shell et est entièrement personnalisable. Il est accessible via une icône ou en balayant du côté de l’écran. Le panneau déroulant se compose d’un en-tête facultatif, d’éléments du panneau, d’éléments de menu facultatifs et d’un pied de page facultatif :
Éléments de menu déroulant
Un ou plusieurs éléments du menu déroulant peuvent être ajoutés au menu déroulant, et chaque élément est représenté par un objet FlyoutItem. Chaque FlyoutItem objet doit être un enfant de l’objet sous-classé Shell . Les éléments du menu apparaissent en haut du menu déroulant en l'absence d'un en-tête de menu déroulant.
L’exemple suivant crée un menu déroulant contenant deux éléments de menu :
<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>
La FlyoutItem.Title propriété, de type string, définit le titre de l’élément de menu volant. La FlyoutItem.Icon propriété, de type ImageSource, définit l’icône de l’élément de menu volant :
Dans cet exemple, chaque ShellContent objet est accessible uniquement via des éléments volants, et non via des onglets. Cela est dû au fait que par défaut, les onglets ne sont affichés que si l’élément de menu volant contient plusieurs onglets.
Important
Dans une application Shell, les pages sont créées à la demande en réponse à la navigation. Pour ce faire, utilisez l’extension de DataTemplate balisage pour définir la propriété ContentTemplate de chaque objet ShellContent à un objet ContentPage.
Shell dispose d'opérateurs de conversion implicites qui permettent à la hiérarchie visuelle de la Shell d’être simplifiée, sans introduire de vues supplémentaires dans l’arborescence visuelle. Cela est possible car un objet sous-classé Shell ne peut contenir que des objets FlyoutItem ou un objet TabBar, qui ne peut contenir que des objets Tab, qui ne peuvent contenir que des objets ShellContent. Ces opérateurs de conversion implicite peuvent être utilisés pour supprimer les objets FlyoutItem et Tab de l'exemple précédent.
<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>
Cette conversion implicite encapsule automatiquement chaque objet ShellContent dans des objets Tab, qui sont encapsulés dans des objets FlyoutItem.
Note
Tous les FlyoutItem objets d’un objet sous-classé Shell sont automatiquement ajoutés à la collection Shell.FlyoutItems, qui définit la liste des éléments qui seront affichés dans le volet.
Options d’affichage de flyout
La propriété FlyoutItem.FlyoutDisplayOptions configure la façon dont un élément de menu déroulant et ses enfants sont affichés dans le menu déroulant. Cette propriété doit être définie sur un membre de l’énumération FlyoutDisplayOptions :
-
AsSingleItem, indique que le FlyoutItem sera visible comme une seule entrée dans le menu volant, quel que soit le nombre d’objets Tab ou ShellContent enfants qu'il contient. Lorsqu’il est sélectionné, le premier contenu enfant s’affiche et les utilisateurs peuvent basculer entre les enfants à l’aide d’onglets (s’il existe plusieurs enfants). C’est la valeur par défaut de la propriété FlyoutDisplayOptions. -
AsMultipleItems, indique que les enfants directs (Tab et ShellContent, les objets) de FlyoutItem apparaîtront chacun comme des entrées distinctes dans le menu volant. Cela permet aux utilisateurs d’accéder directement à n’importe quel contenu enfant à partir du menu volant, plutôt que d’avoir à utiliser des onglets.
Utilisez AsSingleItem quand vous souhaitez regrouper les pages associées sous une entrée volante unique avec navigation par onglet. Utilisez AsMultipleItems quand vous souhaitez que chaque page soit directement accessible à partir du menu volant.
Un élément contextuel pour chaque Tab objet dans un FlyoutItem peut être affiché en définissant la propriété FlyoutItem.FlyoutDisplayOptions sur 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>
Dans cet exemple, des éléments déroulants sont créés pour l'objet Tab, qui est un enfant de l'objet FlyoutItem, et pour les objets ShellContent, qui sont des enfants de l'objet FlyoutItem. Cela se produit parce que chaque ShellContent objet enfant de l’objet FlyoutItem est automatiquement encapsulé dans un Tab objet. En outre, un item de menu volant est créé pour l’objet final ShellContent, qui est automatiquement encapsulé dans un objet Tab, puis dans un objet FlyoutItem.
Note
Les onglets sont affichés lorsqu’un FlyoutItemShellContent objet contient plusieurs objets.
Cela entraîne les éléments du menu déroulant suivants :
Définir l’apparence de FlyoutItem
L’apparence de chaque FlyoutItem peut être personnalisée en définissant la propriété jointe Shell.ItemTemplate sur un DataTemplate:
<Shell ...
xmlns:local="clr-namespace:Xaminals"
x:DataType="local:AppShell">
...
<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>
Cet exemple montre comment afficher le titre de chaque FlyoutItem objet en italique :
Étant donné qu’il Shell.ItemTemplate s’agit d’une propriété jointe, différents modèles peuvent être attachés à des objets spécifiques FlyoutItem .
Note
Shell fournit les propriétés Title et FlyoutIcon au BindingContext du ItemTemplate.
En outre, Shell inclut trois classes de style, qui sont automatiquement appliquées aux FlyoutItem objets. Pour plus d’informations, consultez Les objets Style FlyoutItem et MenuItem.
Modèle par défaut pour FlyoutItems
La valeur par défaut DataTemplate utilisée pour chacun FlyoutItem est indiquée ci-dessous :
<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=#1A000000, Dark=#1AFFFFFF}" />
</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}"
TextColor="{OnPlatform Android={AppThemeBinding Light=#DE000000, Dark=White}}"
FontSize="{OnPlatform Android=14, iOS=14}"
FontAttributes="{OnPlatform iOS=Bold}"
HorizontalOptions="{OnPlatform WinUI=Start}"
HorizontalTextAlignment="{OnPlatform WinUI=Start}"
VerticalTextAlignment="Center">
<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>
Important
Lors de la combinaison de
Ce modèle peut être utilisé comme base pour apporter des modifications à la mise en page existante du flyout, et affiche également les états visuels implémentés pour les éléments du flyout.
En outre, les éléments Grid, Image et Label ont tous des valeurs x:Name et peuvent donc être ciblés avec le gestionnaire d'état visuel. Pour plus d’informations, consultez Définir l’état sur plusieurs éléments.
Note
Le même modèle peut également être utilisé pour les objets MenuItem.
Remplacer le contenu du menu volant
Les éléments volants, qui représentent le contenu du menu volant, peuvent éventuellement être remplacés par votre propre contenu en définissant la Shell.FlyoutContent propriété pouvant être liée à un object:
<Shell ...
xmlns:local="clr-namespace:Xaminals"
x:Name="shell"
x:DataType="local:AppShell">
...
<Shell.FlyoutContent>
<CollectionView BindingContext="{x:Reference shell}"
IsGrouped="True"
ItemsSource="{Binding FlyoutItems}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="local:AppShell">
<Label Text="{Binding Title}"
TextColor="White"
FontSize="18" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Shell.FlyoutContent>
</Shell>
Dans cet exemple, le contenu du menu volant est remplacé par un CollectionView qui affiche le titre de chaque élément de la FlyoutItems collection.
Note
La FlyoutItems propriété, dans la Shell classe, est une collection en lecture seule d’éléments de menu déroulant.
Vous pouvez également définir le contenu du menu volant en définissant la propriété Shell.FlyoutContentTemplate qui peut être liée à un DataTemplate.
<Shell ...
xmlns:local="clr-namespace:Xaminals"
x:Name="shell"
x:DataType="local:AppShell">
...
<Shell.FlyoutContentTemplate>
<DataTemplate>
<CollectionView BindingContext="{x:Reference shell}"
IsGrouped="True"
ItemsSource="{Binding FlyoutItems}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="local:AppShell">
<Label Text="{Binding Title}"
TextColor="White"
FontSize="18" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</DataTemplate>
</Shell.FlyoutContentTemplate>
</Shell>
Important
Un en-tête volant peut facultativement être affiché au-dessus de votre contenu volant, et un pied de page volant peut facultativement être affiché sous votre contenu volant. Si le contenu de votre volet est défilable, Shell tentera de respecter le comportement de défilement de l'en-tête du volet.
Éléments de menu
Les éléments de menu peuvent éventuellement être ajoutés au menu volant, et chaque élément de menu est représenté par un MenuItem objet. La position des objets sur le menu déroulant dépend de leur ordre de MenuItem déclaration dans la hiérarchie visuelle Shell. Par conséquent, tous les objets MenuItem déclarés avant les objets FlyoutItem apparaîtront avant les objets FlyoutItem dans le menu volant, et tous les objets MenuItem déclarés après les objets FlyoutItem apparaîtront après les objets FlyoutItem dans le menu volant.
La MenuItem classe a un Clicked événement et une Command propriété. Par conséquent, les objets MenuItem activent des scénarios qui exécutent une action en réponse à un MenuItem lorsque celui-ci est touché.
MenuItem les objets peuvent être ajoutés au volet, comme illustré dans l’exemple suivant :
<Shell ...
xmlns:local="clr-namespace:Xaminals"
x:DataType="local:AppShell">
...
<MenuItem Text="Help"
IconImageSource="help.png"
Command="{Binding HelpCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />
</Shell>
Cet exemple ajoute un objet MenuItem au menu volant, sous tous les éléments du menu volant :
L’objet MenuItem exécute un ICommand nom HelpCommand, qui ouvre l’URL spécifiée par la CommandParameter propriété dans le navigateur web système.
Définir l’apparence de MenuItem
L’apparence de chaque MenuItem peut être personnalisée en définissant la propriété jointe Shell.MenuItemTemplate sur un DataTemplate:
<Shell ...
xmlns:local="clr-namespace:Xaminals"
x:DataType="local:AppShell">
<Shell.MenuItemTemplate>
<DataTemplate x:DataType="MenuItem">
<Grid ColumnDefinitions="0.2*,0.8*">
<Image Source="{Binding IconImageSource}"
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>
Cet exemple attache l’objet DataTemplate à chaque MenuItem objet, affichant le titre de l’objet MenuItem en italique :
Étant donné qu’il Shell.MenuItemTemplate s’agit d’une propriété jointe, différents modèles peuvent être attachés à des objets spécifiques MenuItem .
Note
Shell fournit les propriétés Text et IconImageSource au BindingContext du MenuItemTemplate. Vous pouvez également utiliser Title à la place de Text et Icon à la place de IconImageSource, ce qui vous permettra de réutiliser le même modèle pour les éléments de menu et les éléments volants.
Le modèle par défaut pour FlyoutItem les objets peut également être utilisé pour MenuItem les objets. Pour plus d’informations, consultez le modèle par défaut pour FlyoutItems.
Style les objets FlyoutItem et MenuItem
Shell inclut trois classes de style, qui sont automatiquement appliquées aux objets FlyoutItem et MenuItem. Les noms des classes de style sont FlyoutItemLabelStyle, FlyoutItemImageStyleet FlyoutItemLayoutStyle.
Le code XAML suivant montre un exemple de définition de styles pour ces classes de style :
<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>
Ces styles seront automatiquement appliqués aux objets FlyoutItem et MenuItem, sans avoir à définir leurs propriétés StyleClass aux noms de classes de style.
De plus, les classes de style personnalisées peuvent être définies et appliquées aux objets FlyoutItem et MenuItem. Pour plus d’informations sur les classes de style, consultez Classes de style.
En-tête de menu volant
L'en-tête du volet est le contenu qui apparaît éventuellement en haut de la fenêtre déroulante, son apparence étant définie par une object qui peut être définie avec la propriété Shell.FlyoutHeader liée.
<Shell ...>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
</Shell>
Le FlyoutHeader type est illustré dans l’exemple suivant :
<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>
Le résultat est l'en-tête de sous-fenêtre suivant :
Vous pouvez également définir l’apparence de l’en-tête de menu volant en configurant la Shell.FlyoutHeaderTemplate propriété pouvant être liée à un 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>
Par défaut, l'en-tête du flyout est fixe tandis que le contenu ci-dessous est défilé s'il y a suffisamment d'éléments. Toutefois, ce comportement peut être modifié en définissant la Shell.FlyoutHeaderBehavior propriété pouvant être liée à l’un des membres d’énumération FlyoutHeaderBehavior :
-
Default: indique que le comportement par défaut de la plateforme sera utilisé. C’est la valeur par défaut de la propriétéFlyoutHeaderBehavior. -
Fixed: indique que l’en-tête de menu volant reste visible et inchangé à tout moment. -
Scroll: indique que l’en-tête déroulant sort de l'affichage lorsque l’utilisateur fait défiler les éléments. -
CollapseOnScroll: indique que l’en-tête de menu volant s’réduit uniquement à un titre, car l’utilisateur fait défiler les éléments.
L’exemple suivant montre comment réduire l’en-tête de menu volant lorsque l’utilisateur fait défiler :
<Shell ...
FlyoutHeaderBehavior="CollapseOnScroll">
...
</Shell>
Pied de page dépliant
Le pied de page du panneau volant est le contenu qui peut apparaître en bas du panneau, avec son apparence définie par une propriété object qu'on peut lier avec la propriété Shell.FlyoutFooter.
<Shell ...>
<Shell.FlyoutFooter>
<controls:FlyoutFooter />
</Shell.FlyoutFooter>
</Shell>
Le FlyoutFooter type est illustré dans l’exemple suivant :
<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 x:DataType="sys:DateTime"
Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="GhostWhite"
HorizontalOptions="Center" />
</StackLayout>
</ContentView>
Important
L’exemple XAML précédent a défini un nouvel espace de noms XAML nommé sys: xmlns:sys="clr-namespace:System;assembly=netstandard". Cet espace de noms XAML associe sys à l’espace de noms .NET System. Le mappage vous permet d’utiliser les types .NET définis dans cet espace de noms, tels que DateTime, dans le code XAML. Pour plus d’informations, consultez Espaces de noms XAML.
Cela entraîne le pied de page déroulant suivant :
Vous pouvez également définir l’apparence du volet de pied de page en définissant la Shell.FlyoutFooterTemplate propriété sur un DataTemplate:
<Shell ...
xmlns:sys="clr-namespace:System;assembly=netstandard">
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<StackLayout>
<Label Text="Xaminals"
TextColor="GhostWhite"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Label x:DataType="sys:DateTime"
Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="GhostWhite"
HorizontalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
</Shell>
Le pied de page du volet est fixé en bas du volet et peut avoir n'importe quelle hauteur. En outre, le pied de page ne masque jamais les éléments de menu.
Largeur et hauteur de la fenêtre contextuelle
La largeur et la hauteur du menu volant peuvent être personnalisées en définissant les propriétés attachées Shell.FlyoutWidth et Shell.FlyoutHeight aux valeurs double.
<Shell ...
FlyoutWidth="400"
FlyoutHeight="200">
...
</Shell>
Cela permet des scénarios tels que le développement du menu volant sur l’écran entier ou la réduction de la hauteur du menu volant afin qu’il ne masque pas la barre d’onglets.
Icône de menu déroulant
Par défaut, les applications Shell ont une icône hamburger qui, lorsqu’elle est appuyée, ouvre le menu. Cette icône peut être modifiée en définissant la Shell.FlyoutIcon propriété pouvant être liée, de type ImageSource, sur une icône appropriée :
<Shell ...
FlyoutIcon="flyouticon.png">
...
</Shell>
Arrière-plan de volet
La couleur d’arrière-plan du volet peut être définie avec la propriété liable Shell.FlyoutBackgroundColor.
<Shell ...
FlyoutBackgroundColor="AliceBlue">
...
</Shell>
Note
Il Shell.FlyoutBackgroundColor peut également être défini à partir d’une feuille de style en cascade (CSS). Pour plus d’informations, consultez les propriétés spécifiques de .NET MAUI Shell.
Vous pouvez également spécifier l’arrière-plan du volet en définissant la Shell.FlyoutBackground propriété liée sur un Brush:
<Shell ...
FlyoutBackground="LightGray">
...
</Shell>
Dans cet exemple, le fond du menu déroulant est peint avec un gris clair SolidColorBrush.
L’exemple suivant montre comment définir l’arrière-plan du volet déroulant sur un 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>
Pour plus d’informations sur les pinceaux, consultez les pinceaux .NET MAUI.
Image d’arrière-plan volant
Le volet peut avoir une image d’arrière-plan facultative, qui apparaît sous l’en-tête du volet et derrière tous les éléments du volet, les éléments de menu et le pied de page du volet. L’image d’arrière-plan peut être spécifiée en définissant la FlyoutBackgroundImage propriété pouvant être liée, de type ImageSource, sur un fichier, une ressource incorporée, un URI ou un flux.
Les proportions de l’image d’arrière-plan peuvent être configurées en définissant la FlyoutBackgroundImageAspect propriété pouvant être liée, de type Aspect, sur l’un des membres d’énumération Aspect :
-
AspectFill: recadre l’image afin qu’elle remplisse la zone d’affichage tout en préservant le rapport d’aspect. -
AspectFit- ajoute des barres noires à l'image, si nécessaire, afin que l'image s'intègre dans la zone d'affichage, avec des espaces vides ajoutés en haut/en bas ou sur les côtés selon que l'image est horizontale ou verticale. C’est la valeur par défaut de la propriétéFlyoutBackgroundImageAspect. -
Fill- étire l’image pour remplir complètement et exactement la zone d’affichage. Cela peut entraîner une distorsion de l’image.
L’exemple suivant montre comment définir ces propriétés :
<Shell ...
FlyoutBackgroundImage="photo.jpg"
FlyoutBackgroundImageAspect="AspectFill">
...
</Shell>
Cela entraîne l’affichage d’une image d’arrière-plan dans le volet, en dessous de l’en-tête du volet :
Arrière-plan de volet escamotable
Le fond du menu volant, qui représente la superposition du menu, peut être spécifié en configurant la propriété attachée Shell.FlyoutBackdrop à un Brush:
<Shell ...
FlyoutBackdrop="Silver">
...
</Shell>
Dans cet exemple, le fond déroulant est peint en argenté SolidColorBrush.
Important
La propriété FlyoutBackdrop jointe peut être définie sur n’importe quel élément Shell, mais elle sera appliquée uniquement lorsqu’elle est définie sur des objets Shell, FlyoutItem ou TabBar.
L’exemple suivant montre comment définir le fond d'un flyout sur un 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>
Pour plus d’informations sur les pinceaux, consultez les pinceaux .NET MAUI.
Comportement du panneau déroulant
Le menu déroulant est accessible via l’icône hamburger ou en balayant depuis le bord de l’écran. Toutefois, ce comportement peut être modifié en définissant la Shell.FlyoutBehavior propriété jointe sur l’un des membres d’énumération FlyoutBehavior :
-
Disabled: indique que le volet ne peut pas être ouvert par l’utilisateur. -
Flyout: indique que le menu volant peut être ouvert et fermé par l’utilisateur. Il s'agit de la valeur par défaut de la propriétéFlyoutBehavior. -
Locked: indique que le menu flottant ne peut pas être fermé par l’utilisateur et qu’il ne chevauche pas le contenu.
L’exemple suivant montre comment désactiver le menu contextuel :
<Shell ...
FlyoutBehavior="Disabled">
...
</Shell>
Note
La propriété jointe FlyoutBehavior peut être définie sur Shell, FlyoutItem, ShellContent et les objets de page, pour remplacer le comportement de menu volant par défaut.
Déroulement vertical du menu déroulant
Par défaut, un menu volant peut être fait défiler verticalement lorsque les éléments de menu volant ne tiennent pas dans le menu volant. Ce comportement peut être modifié en définissant la Shell.FlyoutVerticalScrollMode propriété pouvant être liée à l’un des membres d’énumération ScrollMode :
-
Disabled: indique que le défilement vertical sera désactivé. -
Enabled: indique que le défilement vertical sera activé. -
Auto: indique que le défilement vertical sera activé si les éléments du menu déroulant ne tiennent pas dans le menu déroulant. C’est la valeur par défaut de la propriétéFlyoutVerticalScrollMode.
L’exemple suivant montre comment désactiver le défilement vertical :
<Shell ...
FlyoutVerticalScrollMode="Disabled">
...
</Shell>
La sélection de FlyoutItem
Lorsqu’une application Shell qui utilise un menu volant est exécutée pour la première fois, la Shell.CurrentItem propriété est définie sur le premier FlyoutItem objet de l’objet sous-classé Shell . Toutefois, la propriété peut être définie sur une autre FlyoutItem, comme illustré dans l’exemple suivant :
<Shell ...
CurrentItem="{x:Reference aboutItem}">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
...
</FlyoutItem>
<ShellContent x:Name="aboutItem"
Title="About"
Icon="info.png"
ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>
Cet exemple montre comment définir la CurrentItem propriété sur l’objet ShellContent nommé aboutItem, ce qui entraîne sa sélection et son affichage. Dans cet exemple, une conversion implicite est utilisée pour encapsuler l’objet ShellContent dans un Tab objet, qui est encapsulé dans un FlyoutItem objet.
Le code C# équivalent, étant donné un ShellContent objet nommé aboutItem, est :
CurrentItem = aboutItem;
Dans cet exemple, la CurrentItem propriété est définie dans la classe sous-classée Shell . Vous pouvez également définir la CurrentItem propriété dans n’importe quelle classe via la Shell.Current propriété statique :
Shell.Current.CurrentItem = aboutItem;
Note
Une application peut entrer un état dans lequel la sélection d’un élément de menu volant n’est pas une opération valide. Dans ce cas, le FlyoutItem peut être désactivé en définissant sa propriété IsEnabled sur false. Cela empêchera les utilisateurs de sélectionner l'élément de sous-menu.
Visibilité de FlyoutItem
Les éléments du menu déroulant sont visibles dans le menu déroulant par défaut. Toutefois, un élément peut être masqué dans le menu volant avec la FlyoutItemIsVisible propriété et supprimé du menu volant avec la IsVisible propriété :
-
FlyoutItemIsVisible, de typebool, indique si l’élément est masqué dans le sous-menu, mais est toujours accessible avec la méthode de navigation GoToAsync. La valeur par défaut de cette propriété esttrue. -
IsVisible, de typebool, indique si l’élément doit être supprimé de l’arborescence visuelle et ne s’affiche donc pas dans le menu volant. Sa valeur par défaut esttrue.
L’exemple suivant montre le masquage d’un élément dans le menu volant :
<Shell ...>
<FlyoutItem ...
FlyoutItemIsVisible="False">
...
</FlyoutItem>
</Shell>
Note
Il existe également une Shell.FlyoutItemIsVisible propriété jointe, qui peut être définie sur FlyoutItem, MenuItem, Tabet ShellContent des objets.
Ouvrir et fermer le menu volant par programmation
Le menu volant peut être ouvert et fermé par programmation en définissant la Shell.FlyoutIsPresented propriété pouvant être liée sur une boolean valeur qui indique si le menu volant est actuellement ouvert :
<Shell ...
FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>
Vous pouvez également effectuer cette opération dans le code :
Shell.Current.FlyoutIsPresented = false;
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.
