Expansor

O Expander controlo fornece um contentor expansível para alojar qualquer conteúdo. O controlo tem duas propriedades principais para armazenar o seu conteúdo:

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

Observação

Não é recomendado colocar controlos dentro do cabeçalho que permitam a interação do utilizador.

Content

Este é o conteúdo principal que aparece quando a Header propriedade é interagida com ela (clicada ou tocada) ou quando a IsExpanded propriedade for modificada.

Observação

Expander pode ter um comportamento inesperado se for colocado dentro de ListView ou CollectionView. No entanto, pode ser controlado com a implementação personalizada definindo public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Esta ação é executada sempre que o cabeçalho é tocado. Por favor, preste atenção, ao alterar esta ação pode receber comportamentos diferentes em CollectionView e ListView em todas as plataformas.

Captura de ecrã de um Expansor nos estados colapsado e expandido

Utilização básica

Os exemplos seguintes mostram como utilizar a vista Expander definindo a propriedade Header como um controlo Label e a Content como HorizontalStackLayout com um Image e um Label no interior.

XAML

Incluindo o namespace XAML

Para usar o kit de ferramentas em XAML, a seguinte xmlns precisa ser adicionada à sua página ou vista.

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

Por conseguinte, 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 da seguinte forma:

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

Utilizar o expansor

O exemplo seguinte mostra como adicionar uma Expander vista 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 seguinte mostra como adicionar uma Expander vista 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

Propriedade Tipo Description
Command ICommand É executado quando o cabeçalho Expander é premido.
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 expande.
Header IView? Define o conteúdo do cabeçalho.
IsExpanded bool Determina se o Expander é expandido. Esta propriedade utiliza o TwoWay modo de ligação, e tem um valor padrão de false.

A ExpandDirection enumeração define os seguintes membros:

Value Description
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 controlo Expander define também um evento ExpandedChanged que é acionado quando o cabeçalho Expander é tocado.

ExpandedChangedEventArgs

Argumento de evento que contém ExpanderIsExpanded estado.

Propriedades

Propriedade Tipo Description
IsExpanded bool Determina se o Expander é expandido.

Exemplos

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

API

Você pode encontrar o código-fonte para Expander no repositório GitHub do .NET MAUI Community Toolkit.

  • Last updated on