FlyoutPage

Examina el ejemplo.

.NET Multi-platform App UI (.NET MAUI) FlyoutPage es una página que administra dos páginas relacionadas de información: una página de control flotante que presenta elementos y una página de detalles en la que se muestran detalles sobre los elementos de la página de control flotante.

FlyoutPage tiene dos comportamientos de diseño:

• En un diseño emergente, la página de detalles cubre total o parcialmente la página de control flotante. Al seleccionar un elemento en la página de control flotante, se navegará a la página de detalles correspondiente. Las aplicaciones que se ejecutan en teléfonos siempre usan este comportamiento de diseño.
• En un diseño dividido: la página de control flotante se muestra a la izquierda y la página de detalles a la derecha. Las aplicaciones que se ejecutan en tabletas o en el escritorio pueden usar este comportamiento de diseño, Windows lo usa de forma predeterminada.

Para obtener más información sobre el comportamiento de diseño, consulta Comportamiento de diseño.

FlyoutPage define las siguientes propiedades:

• Detail, de tipo Page, define la página de detalles que se muestra para el elemento seleccionado en la página de control flotante.
• Flyout, de tipo Page, define la página de control flotante.
• FlyoutLayoutBehavior, de tipo FlyoutLayoutBehavior, indica el comportamiento de diseño de las páginas de control flotante y de detalles.
• IsGestureEnabled, de tipo bool, determina si un gesto de deslizar el dedo cambiará entre las páginas de control flotante y de detalles. El valor predeterminado de esta propiedad es true.
• IsPresented, de tipo bool, determina si se muestra la página de control flotante o de detalles. El valor predeterminado de esta propiedad es false, que muestra la página de detalles. Debe establecerse en true para mostrar la página de control flotante.

Las propiedades IsGestureEnabled, IsPresented y FlyoutLayoutBehavior están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

FlyoutPage también define un evento IsPresentedChanged, que se genera cuando cambia el valor de la propiedad IsPresented.

Advertencia

FlyoutPage no es compatible con las aplicaciones de Shell de .NET MAUI y se producirá una excepción si intenta usar FlyoutPage en una aplicación de Shell. Para obtener más información sobre las aplicaciones Shell, consulta Shell.

Creación de una instancia de FlyoutPage

Para crear una página de control flotante, crea un objeto FlyoutPage y establece sus propiedades Flyout y Detail. La propiedad Flyout debe establecerse en el objeto ContentPage y la propiedad Detail debe establecerse en un objeto TabbedPage, NavigationPage o ContentPage. Esto ayuda a garantizar una experiencia de usuario coherente en todas las plataformas.

Importante

FlyoutPage está diseñada para ser una página raíz de una aplicación. Su empleo como página secundaria en otros tipos de páginas podría dar lugar a un comportamiento inesperado e incoherente.

El ejemplo siguiente muestra FlyoutPage que establece las propiedades Flyout y Detail:

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

En este ejemplo, la propiedad Flyout se establece en un objeto ContentPage y la propiedad Detail se establece en un objeto NavigationPage que contiene un objeto ContentPage.

En el ejemplo siguiente se muestra la definición del objeto FlyoutMenuPage, que es de tipo ContentPage:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <CollectionView x:Name="collectionView"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:FlyoutPageItem}">
                <local:FlyoutPageItem Title="Contacts"
                                      IconSource="contacts.png"
                                      TargetType="{x:Type local:ContactsPage}" />
                <local:FlyoutPageItem Title="TodoList"
                                      IconSource="todo.png"
                                      TargetType="{x:Type local:TodoListPage}" />
                <local:FlyoutPageItem Title="Reminders"
                                      IconSource="reminders.png"
                                      TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" />
                    <Label Grid.Column="1"
                           Margin="20,0"
                           Text="{Binding Title}"
                           FontSize="20"
                           FontAttributes="Bold"
                           VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

En este ejemplo, la página de control flotante consta de CollectionView que se rellena con datos al establecer su propiedad ItemsSource en una matriz de objetos FlyoutPageItem. En el ejemplo siguiente se muestra la definición de la clase FlyoutPageItem:

public class FlyoutPageItem
{
    public string Title { get; set; }
    public string IconSource { get; set; }
    public Type TargetType { get; set; }
}

Se asigna un elemento DataTemplate a la propiedad CollectionView.ItemTemplate para mostrar cada FlyoutPageItem. DataTemplate contiene un elemento Grid que consta de un elemento Image y un Label. Image muestra el valor de la propiedad IconSource y Label muestra el valor de la propiedad Title, para cada FlyoutPageItem. Además, la página de control flotante tiene sus propiedades Title y IconImageSource establecidas. El icono aparece en la página de detalles, siempre que esta tenga una barra de título.

Nota:

La página Flyout debe tener su propiedad Title establecida, o se produce una excepción.

En la captura de pantalla siguiente se muestra la página de control flotante resultante:

Creación y visualización de la página de detalles

El objeto FlyoutMenuPage contiene CollectionView al que se hace referencia desde la clase MainPage. Esto permite que la clase MainPage registre un controlador para el evento SelectionChanged. Esto permite al objeto MainPage establecer la propiedad Detail en la página que representa al elemento seleccionado CollectionView. El ejemplo siguiente muestra el controlador de eventos:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.collectionView.SelectionChanged += OnSelectionChanged;
    }

    void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as FlyoutPageItem;
        if (item != null)
        {            
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            if (!((IFlyoutPageController)this).ShouldShowSplitMode)
                IsPresented = false;
        }
    }
}

En este ejemplo, el controlador de eventos OnSelectionChanged recupera CurrentSelection del objeto CollectionView y establece la página de detalles en una instancia del tipo de página almacenado en la propiedad TargetType de FlyoutPageItem. La página de detalles se muestra estableciendo la propiedad FlyoutPage.IsPresented en false, siempre que FlyoutPage no use un diseño split. Cuando FlyoutPage usa un diseño split, se muestran las páginas de control flotante y de detalles, por lo que no es necesario establecer la propiedad FlyoutPage.IsPresented.

Comportamiento del diseño

La forma en que FlyoutPage muestra la página de control flotante y la de detalles depende del factor de forma del dispositivo en el que se ejecuta la aplicación, de la orientación del dispositivo y del valor de la propiedad FlyoutLayoutBehavior. Esta propiedad se debe establecer en un valor de enumeración FlyoutLayoutBehavior, que define los miembros siguientes:

• Default: las páginas se muestran con el valor predeterminado de la plataforma.
• Popover: la página de detalles cubre total o parcialmente la página de control flotante.
• Split: la página de control flotante se muestra a la izquierda y la página de detalles a la derecha.
• SplitOnLandscape: se usa una pantalla dividida cuando el dispositivo está en orientación horizontal.
• SplitOnPortrait: se usa una pantalla dividida cuando el dispositivo está en orientación vertical.

En el ejemplo siguiente se muestra cómo se establece la propiedad FlyoutLayoutBehavior de FlyoutPage:

<FlyoutPage ...
            FlyoutLayoutBehavior="Split">
  ...
</FlyoutPage>

Importante

El valor de la propiedad FlyoutLayoutBehavior solo afecta a las aplicaciones que se ejecutan en el escritorio o en tabletas. Las aplicaciones que se ejecutan en teléfonos siempre tienen el comportamiento Popover.