Expander

Il Expander controllo fornisce un contenitore espandibile per ospitare qualsiasi contenuto. Il controllo ha due proprietà principali per archiviare il contenuto:

Intestazione

Questa Header proprietà può essere fornita con qualsiasi visualizzazione per consentire la personalizzazione completa. L'oggetto Header sarà sempre visibile e interagirà con esso (facendo clic o toccando) mostrerà/comprimere l'oggetto Content.

Nota

Non è consigliabile inserire controlli all'interno dell'intestazione che consentono l'interazione dell'utente.

Contenuto

Si tratta del contenuto principale che mostrerà quando la Header proprietà viene interagita con essa (selezionata o toccata) o la IsExpanded proprietà viene modificata.

Nota

Expander non è supportato all'interno ListView di iOS/MacCatalyst e genera NotSupportedException. Tuttavia, può essere sostituito con l'implementazione personalizzata impostando public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Questa azione viene eseguita ogni volta che viene toccata l'intestazione. Prestare attenzione, modificando questa azione, è possibile ricevere comportamenti diversi in e ListView in CollectionView tutte le piattaforme.

Utilizzo di base

Negli esempi seguenti viene illustrato come utilizzare la Expander visualizzazione impostando la Header proprietà come Label controllo e per Content essere un HorizontalStackLayout oggetto con un Image oggetto e un Label oggetto all'interno.

XAML

Inclusione dello spazio dei nomi XAML

Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:

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

Di conseguenza:

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

Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:

<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 dell'espansore

L'esempio seguente illustra come aggiungere una Expander visualizzazione in 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#

L'esempio seguente illustra come aggiungere una Expander visualizzazione in 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
        }
    }
};

C# Markup

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

Proprietà

Proprietà	Type	Descrizione
Command	ICommand	Viene eseguito quando viene toccata l'intestazione Expander .
CommandParameter	object	Parametro passato a Command.
Direction	ExpandDirection	Definisce la direzione dell'espansore.
Content	IView?	Definisce il contenuto da visualizzare quando si Expander espande.
Header	IView?	Definisce il contenuto dell'intestazione.
IsExpanded	bool	Determina se l'oggetto Expander è espanso. Questa proprietà usa la TwoWay modalità di associazione e ha un valore predefinito .false

L'enumerazione ExpandDirection definisce i membri seguenti:

Valore	Descrizione
Down	Indica che il Expander contenuto si trova sotto l'intestazione.
Up	Indica che il Expander contenuto è sopra l'intestazione.

Il Expander controllo definisce anche un ExpandedChanged evento generato quando viene toccata l'intestazione Expander .

ExpandedChangedEventArgs

Argomento dell'evento che contiene ExpanderIsExpanded lo stato.

Proprietà

Proprietà	Type	Descrizione
Isexpanded	bool	Determina se l'oggetto Expander è espanso.

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per Expander over nel repository GitHub di .NET MAUI Community Toolkit.