Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Examinar el ejemploLa experiencia de navegación proporcionada por .NET MAUI Shell está basada en menús desplegables y pestañas. Un flyout es el menú raíz opcional de una aplicación de Shell y es totalmente personalizable. Es accesible a través de un icono o deslizando desde el lado de la pantalla. El menú desplegable consta de un encabezado opcional, elementos del menú desplegable, elementos de menú opcionales y un pie de página opcional.
Elementos del menú desplegable
Se pueden agregar uno o varios elementos de control flotante al control flotante y cada elemento de control flotante se representa mediante un FlyoutItem objeto . Cada FlyoutItem objeto debe ser un elemento secundario del objeto con subclases Shell . Los elementos del menú flotante aparecen en la parte superior del menú cuando no hay un encabezado presente.
En el ejemplo siguiente se crea un flyout que contiene dos elementos desplegables:
<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 propiedad, de tipo string, define el título del elemento emergente. La FlyoutItem.Icon propiedad , de tipo ImageSource, define el icono del elemento flotante:
En este ejemplo, cada objeto ShellContent sólo se puede acceder a través de elementos desplegables y no a través de pestañas. Esto se debe a que, de forma predeterminada, las pestañas solo se mostrarán si el elemento flotante contiene más de una pestaña.
Importante
En una aplicación de Shell, las páginas se crean a petición en respuesta a la navegación. Esto se logra mediante el uso de la DataTemplate extensión de marcado para establecer la ContentTemplate propiedad de cada ShellContent objeto en un ContentPage objeto .
Shell tiene operadores de conversión implícitos que permiten simplificar la jerarquía visual de Shell, sin introducir vistas adicionales en el árbol visual. Esto es posible porque un objeto con subclases Shell solo puede contener FlyoutItem objetos o un TabBar objeto, que solo puede contener Tab objetos, que solo pueden contener ShellContent objetos. Estos operadores de conversión implícitos se pueden usar para quitar los FlyoutItem objetos y Tab del ejemplo anterior:
<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>
Esta conversión implícita envuelve automáticamente cada objeto ShellContent en objetos Tab, que a su vez se encapsulan en objetos FlyoutItem.
Nota:
Todos los FlyoutItem objetos en un objeto subclass Shell se agregan automáticamente a la colección Shell.FlyoutItems, que define la lista de elementos que se mostrarán en el menú desplegable.
Opciones de visualización desplegable
La FlyoutItem.FlyoutDisplayOptions propiedad configura cómo se muestra un elemento desplegable y sus elementos secundarios en el menú desplegable. Esta propiedad se debe establecer en un miembro de enumeración FlyoutDisplayOptions:
-
AsSingleItemindica que FlyoutItem estará visible como una sola entrada en el panel flotante, independientemente del número de Tab u ShellContent objetos secundarios que contiene. Al seleccionar, se muestra el primer contenido secundario y los usuarios pueden cambiar entre contenidos secundarios mediante pestañas si hay más de un contenido secundario. Se trata del valor predeterminado de la propiedad FlyoutDisplayOptions. -
AsMultipleItems, indica que los hijos directos (Tab y ShellContent objetos) de FlyoutItem aparecerán como entradas independientes en el menú desplegable. Esto permite a los usuarios navegar directamente a cualquier contenido secundario desde el desplegable, en lugar de tener que usar pestañas.
Use AsSingleItem cuando quieras agrupar páginas relacionadas en una sola entrada de menú desplegable con navegación por pestañas. Use AsMultipleItems cuando quiera que cada página sea accesible directamente desde el menú flotante.
Se puede mostrar un elemento de control flotante para cada objeto Tab dentro de un FlyoutItem estableciendo la propiedad FlyoutItem.FlyoutDisplayOptions a 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>
En este ejemplo, se crean elementos flotantes para el Tab objeto que es un elemento secundario del FlyoutItem objeto y los ShellContent objetos que son elementos secundarios del FlyoutItem objeto . Esto ocurre porque cada ShellContent objeto que es un elemento secundario del FlyoutItem objeto se encapsula automáticamente en un Tab objeto . Además, se crea un elemento flotante para el objeto final ShellContent, el cual se ajusta automáticamente dentro de un objeto Tab y luego en un objeto FlyoutItem.
Nota:
Las pestañas se muestran cuando un FlyoutItem contiene más de un objeto ShellContent.
Esto da como resultado los siguientes elementos desplegables:
Definir la apariencia de FlyoutItem
La apariencia de cada FlyoutItem se puede personalizar estableciendo la Shell.ItemTemplate propiedad adjunta a 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>
En este ejemplo se muestra el título de cada FlyoutItem objeto en cursiva:
Dado que Shell.ItemTemplate es una propiedad adjunta, se pueden adjuntar plantillas diferentes a objetos específicos FlyoutItem .
Nota:
Shell proporciona las propiedades Title y FlyoutIcon a BindingContext del ItemTemplate.
Además, Shell incluye tres clases de estilo, que se aplican automáticamente a FlyoutItem los objetos. Para obtener más información, vea Objetos FlyoutItem y MenuItem de estilo.
Plantilla predeterminada para FlyoutItems
A continuación se muestra el valor predeterminado DataTemplate utilizado para cada FlyoutItem:
<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>
Importante
Al combinar OnPlatform con AppThemeBinding, evite anidar AppThemeBinding dentro de un elemento <OnPlatform> con x:TypeArguments="Color", ya que esto puede provocar errores de conversión de tipos en tiempo de ejecución en Android. En su lugar, use la sintaxis de extensión de marcado en línea como se muestra anteriormente o aplique colores directamente mediante clases de estilo.
Esta plantilla se puede usar como base para realizar modificaciones en el diseño desplegable existente y también muestra los estados visuales implementados para los elementos del desplegable.
Además, los elementos Grid, Image y Label tienen valores x:Name y, por tanto, se pueden destinar utilizando el Administrador de Estados Visuales. Para obtener más información, vea Establecer el estado en varios elementos.
Nota:
La misma plantilla también se puede usar para MenuItem objetos .
Reemplazar el contenido del menú flotante
Los elementos de control flotante, que representan el contenido del control flotante, se pueden reemplazar opcionalmente por su propio contenido estableciendo la Shell.FlyoutContent propiedad enlazable en :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>
En este ejemplo, el contenido del control flotante se reemplaza por un CollectionView que muestra el título de cada elemento en la colección FlyoutItems.
Nota:
La propiedad FlyoutItems, en la clase Shell, es una colección de solo lectura de elementos desplegables.
Como alternativa, el contenido del flyout se puede definir estableciendo la propiedad enlazable en Shell.FlyoutContentTemplateDataTemplate.
<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>
Importante
Opcionalmente se puede mostrar un encabezado desplegable encima del contenido desplegable, y un pie de página desplegable debajo del contenido desplegable. Si el contenido del control flotante se puede desplazar, Shell intentará respetar el comportamiento de desplazamiento del encabezado de control flotante.
Elementos de menú
Los elementos de menú se pueden agregar opcionalmente al menú emergente, y cada elemento de menú se representa mediante un objeto MenuItem. La posición de MenuItem los objetos en el menú desplegable depende de su orden de declaración en la jerarquía visual de Shell. Por lo tanto, los objetos MenuItem declarados antes de los objetos FlyoutItem aparecerán antes que los objetos FlyoutItem en el control flotante, y los objetos MenuItem declarados después de los objetos FlyoutItem aparecerán después de los objetos FlyoutItem en el control flotante.
La MenuItem clase tiene un Clicked evento y una Command propiedad . Por lo tanto, los objetos MenuItem permiten escenarios que ejecutan una acción en respuesta al tocar la MenuItem.
MenuItem Los objetos se pueden agregar al panel emergente, como se indica en el siguiente ejemplo:
<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>
En este ejemplo se agrega un MenuItem objeto a la ventana emergente, debajo de todos los elementos de la ventana emergente.
El MenuItem ejecuta un ICommand denominado HelpCommand, que abre la dirección URL especificada por la propiedad CommandParameter en el navegador web del sistema.
Definir la apariencia del elemento de menú
La apariencia de cada MenuItem se puede personalizar estableciendo la Shell.MenuItemTemplate propiedad adjunta a 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>
En este ejemplo, se adjunta el DataTemplate a cada MenuItem, mostrando el título del MenuItem en cursiva.
Dado que Shell.MenuItemTemplate es una propiedad adjunta, se pueden adjuntar plantillas diferentes a objetos específicos MenuItem .
Nota:
Shell proporciona las propiedades Text y IconImageSource a BindingContext del MenuItemTemplate. También puede usar Title en lugar de Text y Icon en lugar de IconImageSource, lo que le permitirá reutilizar la misma plantilla para los elementos de menú y los elementos desplegables.
La plantilla predeterminada para FlyoutItem los objetos también se puede usar para MenuItem los objetos . Para obtener más información, consulte Plantilla predeterminada para FlyoutItems.
Estilizar objetos FlyoutItem y MenuItem
Shell incluye tres clases de estilo, que se aplican automáticamente a FlyoutItem objetos y MenuItem . Los nombres de clase de estilo son FlyoutItemLabelStyle, FlyoutItemImageStyley FlyoutItemLayoutStyle.
En el código XAML siguiente se muestra un ejemplo de definición de estilos para estas clases de estilo:
<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>
Estos estilos se aplicarán automáticamente a los objetos FlyoutItem y MenuItem, sin tener que establecer sus StyleClass propiedades en los nombres de clase de estilo.
Además, las clases de estilo personalizadas se pueden definir y aplicar a objetos FlyoutItem y MenuItem. Para obtener más información sobre las clases de estilo, vea Clases de estilo.
Encabezado desplegable
El encabezado del flyout es el contenido que aparece en la parte superior del flyout de manera opcional, siendo su apariencia definida por un object que se puede establecer con la Shell.FlyoutHeader propiedad enlazable.
<Shell ...>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
</Shell>
El FlyoutHeader tipo se muestra en el ejemplo siguiente:
<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>
Esto tiene como resultado el siguiente encabezado desplegable:
Alternativamente, la apariencia del encabezado flotante se puede definir estableciendo la propiedad enlazable Shell.FlyoutHeaderTemplate en 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>
De forma predeterminada, el encabezado del menú desplegable permanecerá fijo en el menú desplegable, mientras que el contenido siguiente se desplazará si hay suficientes elementos. Sin embargo, este comportamiento se puede cambiar configurando la propiedad enlazable Shell.FlyoutHeaderBehavior en uno de los miembros de la enumeración FlyoutHeaderBehavior.
-
Default: indica que se usará el comportamiento predeterminado de la plataforma. Se trata del valor predeterminado de la propiedadFlyoutHeaderBehavior. -
Fixed: indica que el encabezado del menú desplegable permanece visible y sin cambios en todo momento. -
Scroll- indica que el encabezado del panel desplegable desaparece de la vista a medida que el usuario desplaza los elementos. -
CollapseOnScroll: indica que el encabezado desplegable se reduce solo a un título cuando el usuario desplaza los elementos.
En el siguiente ejemplo se muestra cómo contraer el encabezado desplegable a medida que el usuario se desplaza:
<Shell ...
FlyoutHeaderBehavior="CollapseOnScroll">
...
</Shell>
Pie de página desplegable
El pie de página del compartimiento desplegable es el contenido que puede aparecer de forma opcional en la parte inferior del mismo, cuya apariencia se define por un object que se puede establecer con la Shell.FlyoutFooter propiedad vinculable:
<Shell ...>
<Shell.FlyoutFooter>
<controls:FlyoutFooter />
</Shell.FlyoutFooter>
</Shell>
El FlyoutFooter tipo se muestra en el ejemplo siguiente:
<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>
Importante
En el ejemplo xaml anterior se definió un nuevo espacio de nombres XAML denominado sys: xmlns:sys="clr-namespace:System;assembly=netstandard". Este espacio de nombres XAML se asigna sys al espacio de nombres .NET System . La asignación permite usar los tipos de .NET que se definen en ese espacio de nombres, como DateTime, en el XAML. Para obtener más información, consulta Espacios de nombres XAML.
Esto da como resultado el siguiente pie de página desplegable:
Como alternativa, la apariencia del pie de página del menú desplegable se puede definir estableciendo la Shell.FlyoutFooterTemplate propiedad a 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>
El pie de página del control flotante se fija en la parte inferior del control flotante y puede ser cualquier altura. Además, el pie de página nunca oculta los elementos de menú.
Ancho y alto del panel flotante
El ancho y el alto del panel desplegable se pueden personalizar estableciendo las propiedades adjuntas Shell.FlyoutWidth y Shell.FlyoutHeight a los valores de double.
<Shell ...
FlyoutWidth="400"
FlyoutHeight="200">
...
</Shell>
Esto permite escenarios como expandir el desplegable en toda la pantalla o reducir la altura del desplegable para que no oculte la barra de pestañas.
Icono de menú desplegable
De forma predeterminada, las aplicaciones Shell tienen un icono de hamburguesa que, cuando se presiona, abre el panel desplegable. Este icono se puede cambiar estableciendo la Shell.FlyoutIcon propiedad enlazable, de tipo ImageSource, en un icono adecuado:
<Shell ...
FlyoutIcon="flyouticon.png">
...
</Shell>
Fondo del panel flotante
El color de fondo del menú desplegable se puede establecer con la Shell.FlyoutBackgroundColor propiedad enlazable.
<Shell ...
FlyoutBackgroundColor="AliceBlue">
...
</Shell>
Nota:
Shell.FlyoutBackgroundColor También se puede establecer desde una hoja de estilos en cascada (CSS). Para obtener más información, vea Propiedades específicas del shell maui de .NET.
Como alternativa, se puede especificar el fondo del desplegable estableciendo la propiedad enlazable Shell.FlyoutBackground en un Brush.
<Shell ...
FlyoutBackground="LightGray">
...
</Shell>
En este ejemplo, el fondo de la ventana emergente se pinta con un gris claro SolidColorBrush.
En el siguiente ejemplo se muestra cómo establecer el fondo de un flyout a 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>
Para obtener más información sobre los pinceles, vea .NET MAUI Pinceles.
Imagen de fondo del menú desplegable
El panel emergente puede tener una imagen de fondo opcional, que aparece debajo del encabezado del panel emergente y detrás de cualquier elemento del panel, elemento del menú y pie de página del panel emergente. La imagen de fondo se puede especificar estableciendo la FlyoutBackgroundImage propiedad enlazable, de tipo ImageSource, en un archivo, un recurso incrustado, un URI o una secuencia.
La relación de aspecto de la imagen de fondo se puede configurar estableciendo la propiedad enlazable FlyoutBackgroundImageAspect, de tipo Aspect, en uno de los miembros de la enumeración Aspect:
-
AspectFill: recorta la imagen para que rellene el área de visualización mientras conserva la relación de aspecto. -
AspectFit- realiza el encuadre de la imagen mediante bandas negras, si es necesario, para que la imagen se ajuste al área de visualización, agregando espacio en blanco en la parte superior/inferior o en los lados según si la imagen es más ancha o alta. Se trata del valor predeterminado de la propiedadFlyoutBackgroundImageAspect. -
Fill: amplía la imagen para rellenar completamente y exactamente el área de visualización. Esto puede dar lugar a una distorsión de imagen.
En el ejemplo siguiente se muestra cómo establecer estas propiedades:
<Shell ...
FlyoutBackgroundImage="photo.jpg"
FlyoutBackgroundImageAspect="AspectFill">
...
</Shell>
Esto da como resultado que una imagen de fondo aparezca en el menú desplegable, debajo del encabezado del menú desplegable.
Fondo de control flotante
El fondo de la superposición flotante, que es la apariencia de la superposición, se puede especificar estableciendo la Shell.FlyoutBackdrop propiedad adjunta a un Brush:
<Shell ...
FlyoutBackdrop="Silver">
...
</Shell>
En este ejemplo, el fondo emergente está pintado de color plata SolidColorBrush.
Importante
La propiedad adjunta FlyoutBackdrop se puede establecer en cualquier elemento Shell, pero solo se aplicará cuando se establezca en objetos Shell, FlyoutItem o TabBar.
El siguiente ejemplo muestra cómo configurar el fondo de un flyout a 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>
Para obtener más información sobre los pinceles, vea Pinceles MAUI de .NET.
Comportamiento del control flotante
El menú desplegable se puede abrir a través del icono de hamburguesa o deslizando desde el borde de la pantalla. Sin embargo, este comportamiento se puede cambiar estableciendo la Shell.FlyoutBehavior propiedad adjuntada a uno de los FlyoutBehavior miembros de enumeración:
-
Disabled– indica que el menú desplegable no puede ser abierto por el usuario. -
Flyout– indica que el usuario puede abrir y cerrar la ventana emergente. Se trata del valor predeterminado de la propiedadFlyoutBehavior. -
Locked: indica que el usuario no puede cerrar la ventana emergente y que esta no se superpone al contenido.
En el ejemplo siguiente se muestra cómo deshabilitar el panel desplegable:
<Shell ...
FlyoutBehavior="Disabled">
...
</Shell>
Nota:
La propiedad adjunta FlyoutBehavior se puede establecer en Shell, FlyoutItem, ShellContent y objetos de página para anular el comportamiento predeterminado del desplegable.
Desplazamiento vertical del panel desplegable
De forma predeterminada, un menú desplegable se puede desplazar verticalmente cuando los elementos no caben en él. Este comportamiento se puede modificar estableciendo la propiedad enlazable Shell.FlyoutVerticalScrollMode a uno de los miembros de la enumeración ScrollMode.
-
Disabled: indica que el desplazamiento vertical se deshabilitará. -
Enabled: indica que se habilitará el desplazamiento vertical. -
Auto– indica que el desplazamiento vertical se habilitará si los elementos del menú flotante no caben dentro. Se trata del valor predeterminado de la propiedadFlyoutVerticalScrollMode.
En el ejemplo siguiente se muestra cómo deshabilitar el desplazamiento vertical:
<Shell ...
FlyoutVerticalScrollMode="Disabled">
...
</Shell>
Selección de FlyoutItem
Cuando una aplicación Shell que usa un flyout se ejecuta por primera vez, se establecerá la propiedad Shell.CurrentItem en el primer objeto FlyoutItem en el objeto Shell de la subclase. Sin embargo, la propiedad se puede establecer en otra FlyoutItem, como se muestra en el ejemplo siguiente:
<Shell ...
CurrentItem="{x:Reference aboutItem}">
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
...
</FlyoutItem>
<ShellContent x:Name="aboutItem"
Title="About"
Icon="info.png"
ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>
En este ejemplo se establece la CurrentItem propiedad en el ShellContent objeto denominado aboutItem, que da como resultado que se seleccione y se muestre. En este ejemplo, se usa una conversión implícita para encapsular el objeto ShellContent en un objeto Tab, que se encapsula en un objeto FlyoutItem.
El código de C# equivalente, dado un ShellContent objeto denominado aboutItem, es:
CurrentItem = aboutItem;
En este ejemplo, la CurrentItem propiedad se establece en la clase subclasada Shell . Como alternativa, la CurrentItem propiedad se puede establecer en cualquier clase a través de la Shell.Current propiedad estática:
Shell.Current.CurrentItem = aboutItem;
Nota:
Una aplicación puede especificar un estado en el que seleccionar un elemento flotante no es una operación válida. En tales casos, el FlyoutItem se puede deshabilitar estableciendo su propiedad IsEnabled en false. Esto impedirá que los usuarios puedan seleccionar el elemento flotante.
Visibilidad de FlyoutItem
Los elementos del desplegable están visibles de forma predeterminada. No obstante, un elemento se puede ocultar en el menú desplegable con la FlyoutItemIsVisible propiedad y eliminarlo del menú desplegable con la IsVisible propiedad:
-
FlyoutItemIsVisible, de tipobool, indica si el elemento está oculto en el panel desplegable, pero sigue siendo accesible con método de navegación GoToAsync. El valor predeterminado de esta propiedad estrue. -
IsVisible, de tipobool, indica si el elemento debe ser eliminado del árbol visual y, por tanto, no aparecerá en el menú emergente. Su valor predeterminado estrue.
En el siguiente ejemplo se muestra cómo ocultar un elemento en el flyout.
<Shell ...>
<FlyoutItem ...
FlyoutItemIsVisible="False">
...
</FlyoutItem>
</Shell>
Nota:
También hay una propiedad adjunta Shell.FlyoutItemIsVisible, que se puede establecer en objetos FlyoutItem, MenuItem, Tab, y ShellContent.
Abrir y cerrar el menú desplegable programáticamente
El panel desplegable se puede abrir y cerrar mediante programación estableciendo la propiedad enlazable en un valor que indica si el desplegable está abierto actualmente:
<Shell ...
FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>
Como alternativa, esto se puede realizar en el código:
Shell.Current.FlyoutIsPresented = false;
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
