Expander

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

Questa Header proprietà può essere fornita con qualsiasi visualizzazione per consentire la personalizzazione completa. Header sarà sempre visibile e interagire con esso (facendo clic o toccando) mostrerà/comprimerà Content.

Note

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

Content

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

Note

Expander può funzionare in modo imprevisto se è posizionato all'interno ListView o CollectionView. Tuttavia, può essere controllato con l'implementazione personalizzata impostando public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Questa azione viene eseguita ogni volta che viene toccata l'intestazione. Tieni presente che, modificando questa impostazione, potresti riscontrare un comportamento diverso in CollectionView e ListView su tutte le piattaforme.

Schermata di un Expander negli stati compresso ed espanso

Utilizzo di base

Negli esempi seguenti viene illustrato come utilizzare la vista Expander impostando la proprietà Header come controllo Label e Content come HorizontalStackLayout con un Image e un Label al suo 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
        }
    }
};

Linguaggio di markup 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();

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 Expander si 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:

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

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

ExpandedChangedEventArgs

Argomento dell'evento che contiene lo stato ExpanderIsExpanded.

Proprietà

Proprietà Type Descrizione
Espanso 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 nel repository .NET MAUI Community Toolkit GitHub.

  • Last updated on