Expander

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

Essa propriedade Header pode ser usada com qualquer visualização para permitir total personalização. O Header sempre estará visível e, ao interagir com ele (clicando ou tocando), o Content será expandido/recolhido.

Note

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

Content

Esse é o conteúdo principal que será mostrado quando a Header propriedade for interagida com ela (clicada ou tocada) ou a IsExpanded propriedade for modificada.

Note

Expander pode funcionar inesperadamente se ele for colocado dentro ListView ou CollectionView. No entanto, ele pode ser controlado com a implementação personalizada definindo public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Essa ação é executada sempre que o cabeçalho é tocado. Preste atenção: ao alterar esta ação, você poderá observar um comportamento diferente em CollectionView e ListView em todas as plataformas.

Captura de tela de um Expansor em estados recolhidos e expandidos

Uso Básico

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

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

Marcação em 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

Property Tipo Descrição
Command ICommand É executado quando o Expander cabeçalho recebe um toque.
CommandParameter object O parâmetro que é passado 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 está expandido. Essa propriedade usa o TwoWay modo de associação e tem um valor padrão de false.

A enumeração ExpandDirection define os seguintes membros:

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

O Expander controle também define um ExpandedChanged evento que é acionado quando o Expander cabeçalho é tocado.

ExpandedChangedEventArgs

Argumento de evento que contém o estado ExpanderIsExpanded.

Propriedades

Property Tipo Descrição
IsExpanded bool Determina se o Expander está expandido.

Exemplos

Você pode encontrar um exemplo desse recurso em ação no aplicativo de exemplo .NET MAUI Community Toolkit.

API

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

  • Last updated on