Expansor

O controle Expander fornece um contêiner expansível para hospedar qualquer conteúdo. O controle tem duas propriedades principais para armazenar seu conteúdo:

Cabeçalho

Essa propriedade Header pode ser fornecida com qualquer exibição para permitir a personalização completa. O Header sempre estará visível e a interação com ele (clique ou toque) mostrará/recolherá o Content.

Observação

Não é recomendável colocar controles dentro do cabeçalho que permitem a interação do usuário.

Sumário

Esse é o conteúdo principal que será mostrado quando a propriedade Header interagir com elo (por clique ou toque) ou quando a propriedade IsExpanded for modificada.

Observação

Não há suporte para Expander na ListView no iOS/MacCatalyst e isso gera NotSupportedException. No entanto, ele pode ser substituído pela implementação personalizada com a definição de public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Essa ação é executada sempre que o cabeçalho recebe um toque. Preste atenção, porque alterando essa ação, você pode receber um comportamento diferente em CollectionView e ListView em todas as plataformas.

Uso básico

Os exemplos a seguir mostram como usar a exibição do Expander definindo a propriedade Header como um controle Label e o Content como HorizontalStackLayout com uma Image e um Label dentro.

XAML

Incluir o namespace XAML

Para usar o kit de ferramentas no XAML, o xmlns a seguir precisa ser adicionado à sua página ou exibição:

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

Portanto, o seguinte:

<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>

Seria modificado para incluir o xmlns conforme o seguinte:

<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>

Como usar o Expander

O exemplo a seguir mostra como adicionar uma exibição do Expander em 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#

O exemplo a seguir mostra como adicionar uma exibição do Expander em 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
        }
    }
};

Markup do 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();

Propriedades

Propriedade	Type	Descrição
Command	ICommand	Executa quando o cabeçalho Expander recebe um toque.
CommandParameter	object	O parâmetro que é transmitido para Command.
Direction	ExpandDirection	Define a direção do expansor.
Content	IView?	Define o conteúdo a ser exibido quando o Expander é expandido.
Header	IView?	Define o conteúdo do cabeçalho.
IsExpanded	bool	Determina se o Expander é expandido. Essa propriedade usa o modo de associação de TwoWay e tem um valor padrão de false.

A enumeração ExpandDirection define os seguintes membros:

Valor	Descrição
Down	Indica que o conteúdo do Expander está abaixo do cabeçalho.
Up	Indica que o conteúdo do Expander está acima do cabeçalho.

O controle Expander também define um evento ExpandedChanged que é disparado quando o cabeçalho Expander recebe um toque.

ExpandedChangedEventArgs

Argumento de evento que contém o estado ExpanderIsExpanded.

Propriedades

Propriedade	Type	Descrição
IsExpanded	bool	Determina se o Expander é expandido.

Exemplos

Encontre um exemplo desse recurso em ação no Aplicativo de exemplo do Kit de Ferramentas da Comunidade do .NET MAUI.

API

O código-fonte do Expander pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.