Expander

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

Encabezado

Esta Header propiedad se puede proporcionar con cualquier vista para permitir la personalización completa. Siempre Header estará visible e interactuará con él (haciendo clic o pulsando) se mostrará o contraerá Content.

Nota:

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

Contenido

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.

Nota:

Expander no se admite en ListView iOS/MacCatalyst y genera NotSupportedException. Sin embargo, se puede reemplazar por 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.

Uso básico

En los ejemplos siguientes se muestra cómo usar la Expander vista estableciendo la Header propiedad para que sea un Label control y para Content que sea con HorizontalStackLayout un Image elemento y un Label elemento 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, el 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#

El siguiente ejemplo muestra cómo añadir una vista Expander 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:

Valor	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 ExpanderIsExpanded el estado.

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 muestra del kit de herramientas de la comunidad de .NET MAUI.

API

Puede encontrar el código fuente de Expander en el repositorio de GitHub del Kit de herramientas de la comunidad de .NET MAUI.