Expander

Das Expander Steuerelement stellt einen erweiterbaren Container zum Hosten von Inhalten bereit. Das Steuerelement verfügt über zwei Haupteigenschaften zum Speichern Ihrer Inhalte:

Kopfzeile

Diese Header Eigenschaft kann mit jeder Ansicht bereitgestellt werden, um die vollständige Anpassung zu ermöglichen. Das Header ist immer sichtbar, und durch Klicken oder Tippen darauf wird das Content angezeigt bzw. eingeklappt.

Content

Dies ist der Hauptinhalt, der angezeigt wird, wenn die Header Eigenschaft damit interagiert (geklickt oder getippt) oder die IsExpanded Eigenschaft geändert wird.

Grundlegende Nutzung

Die folgenden Beispiele zeigen, wie Sie die Expander-Ansicht verwenden, indem Sie die Eigenschaft Header auf ein Steuerelement vom Typ Label und Content auf ein HorizontalStackLayout mit einem Image und einem Label darin festlegen.

XAML

Einbinden des XAML-Namespace

Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:

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

Daher das Folgende:

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

Würde geändert werden, um das xmlns wie folgt einzubinden:

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

Den Expander verwenden

Das folgende Beispiel zeigt, wie Sie eine Expander Ansicht in XAML hinzufügen.

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

Das folgende Beispiel zeigt, wie Sie eine Expander Ansicht in C# hinzufügen.

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

Eigenschaften

Die ExpandDirection-Aufzählung definiert die folgenden Elemente:

Das Expander Steuerelement definiert auch ein ExpandedChanged Ereignis, das ausgelöst wird, wenn auf die Expander Kopfzeile getippt wird.

ExpandedChangedEventArgs

Ereignisargument, das den Zustand enthält ExpanderIsExpanded .

Eigenschaften

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für Expander im .NET MAUI Community Toolkit GitHub Repository.