Expander

El Expander control proporciona un contenedor expandible para hospedar cualquier contenido. El control tiene dos propiedades principales para almacenar el contenido:

Esta Header propiedad puede proporcionarse en cualquier vista para permitir una personalización completa. El Header siempre estará visible y, al interactuar con él (haciendo clic o pulsando), se mostrará o contraerá el Content.

Note

No se recomienda colocar controles dentro del encabezado que permitan la interacción del usuario.

Content

Este es el contenido principal que se mostrará cuando la Header propiedad se interactúe con ella (se hace clic o pulsa) o se modifica la IsExpanded propiedad.

Note

Expander puede funcionar inesperadamente si se coloca dentro de ListView o CollectionView. Sin embargo, se puede controlar con la implementación personalizada estableciendo public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Esta acción se ejecuta cada vez que se pulsa el encabezado. Preste atención al cambiar esta acción, puede recibir un comportamiento diferente en CollectionView y ListView en todas las plataformas.

Captura de pantalla de un Expander en estado contraído y expandido

Uso básico

Los siguientes ejemplos muestran cómo usar la vista Expander estableciendo la propiedad Header en un control Label y Content en un HorizontalStackLayout con un Image y un Label dentro.

XAML

Incluir el espacio de nombres XAML

Para usar el kit de herramientas en XAML, es necesario agregar el siguiente xmlns a la página o vista:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Por lo tanto, lo siguiente:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Se modificaría para incluir el xmlns de la siguiente manera:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Uso del expansador

En el ejemplo siguiente se muestra cómo agregar una Expander vista en XAML.

<toolkit:Expander>
    <toolkit:Expander.Header>
        <Label Text="Baboon"
               FontAttributes="Bold"
               FontSize="Medium" />
    </toolkit:Expander.Header>
    <HorizontalStackLayout Padding="10">
        <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               Aspect="AspectFill"
               HeightRequest="120"
               WidthRequest="120" />
        <Label Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
               FontAttributes="Italic" />
    </HorizontalStackLayout>
</toolkit:Expander>

C#

En el ejemplo siguiente se muestra cómo agregar una Expander vista en C#.

using CommunityToolkit.Maui.Views;

var expander = new Expander
{
    Header = new Label
    {
        Text = "Baboon",
        FontAttributes = FontAttributes.Bold,
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
    }
};

expander.Content = new HorizontalStackLayout
{
    Padding = new Thickness(10),

    Children =
    {
        new Image
        {
            Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
            Aspect = Aspect.AspectFill,
            HeightRequest = 120,
            WidthRequest = 120
        },

        new Label
        {
            Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
            FontAttributes = FontAttributes.Italic
        }
    }
};

Marcado de C#

using CommunityToolkit.Maui.Views;

Content = new Expander
{
    Header = new Label()
        .Text("Baboon")
        .Font(bold: true, size: 18),

    Content = new HorizontalStackLayout
    {
        new Image()
            .Source("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg")
            .Size(120)
            .Aspect(Aspect.AspectFill),

        new Label()
            .Text("Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.")
            .Font(italic: true)

    }.Padding(10)

}.CenterHorizontal();

Propiedades

Propiedad Tipo Descripción
Command ICommand Se ejecuta cuando se pulsa el Expander encabezado.
CommandParameter object Parámetro que se pasa a Command.
Direction ExpandDirection Define la dirección del expansador.
Content IView? Define el contenido que se va a mostrar cuando Expander se expande.
Header IView? Define el contenido del encabezado.
IsExpanded bool Determina si Expander se expande . Esta propiedad usa el TwoWay modo de enlace y tiene un valor predeterminado de false.

La enumeración ExpandDirection define los miembros siguientes:

Value Descripción
Down Indica que el Expander contenido está bajo el encabezado .
Up Indica que el Expander contenido está por encima del encabezado.

El Expander control también define un ExpandedChanged evento que se desencadena cuando se pulsa el Expander encabezado.

ExpandedChangedEventArgs

Argumento de evento que contiene el estado ExpanderIsExpanded.

Propiedades

Propiedad Tipo Descripción
IsExpanded bool Determina si Expander se expande .

Ejemplos

Puede encontrar un ejemplo de esta característica en acción en la aplicación de ejemplo .NET MAUI Community Toolkit.

API

Puede encontrar el código fuente de Expander en el repositorio .NET MAUI Community Toolkit GitHub.

  • Last updated on