Expander

Das Steuerelement Expander stellt einen erweiterbaren Container zum Hosten von Inhalten bereit. Das Steuerelement bietet zwei Haupteigenschaften zum Speichern Ihrer Inhalte:

Header

Diese Header-Eigenschaft kann mit jeder Ansicht bereitgestellt werden, um eine vollständige Anpassung zu ermöglichen. Der Header ist immer sichtbar, und wenn Sie damit interagieren (klicken oder tippen), wird der Content angezeigt/reduziert.

Hinweis

Es wird nicht empfohlen, Steuerelemente in den Header einzufügen, die eine Benutzerinteraktion ermöglichen.

Inhalt

Das ist der Hauptinhalt, der angezeigt wird, wenn mit der Header-Eigenschaft interagiert wird (klicken oder tippen) oder die IsExpanded-Eigenschaft geändert wird.

Hinweis

Expander wird in ListView unter iOS/MacCatalyst nicht unterstützt und löst „NotSupportedException“ aus. Er kann jedoch durch die benutzerdefinierte Implementierung ersetzt werden, indem public Action<TappedEventArgs>? HandleHeaderTapped { get; set; } festgelegt wird. Diese Aktion wird jedes Mal ausgeführt, wenn auf den Header getippt wird. Bitte beachten Sie, dass Sie durch die Änderung dieser Aktion auf allen Plattformen ein unterschiedliches Verhalten in CollectionView und ListView erhalten können.

Grundlegende Verwendung

Die folgenden Beispiele zeigen, wie Sie die Expander-Ansicht verwenden, indem Sie die Header-Eigenschaft auf ein Label-Steuerelement und den Content auf ein HorizontalStackLayout mit einem enthaltenen Image und Label 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"

Der folgende Abschnitt:

<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 dann geändert werden, um xmlns 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>

Verwenden von Expander

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

Eigenschaft	Typ	Beschreibung
Command	ICommand	Wird ausgeführt, wenn auf den Expander-Header getippt wird.
CommandParameter	object	Der Parameter, der Command übergeben wird.
Direction	ExpandDirection	Definiert die Expander-Richtung.
Content	IView?	Definiert den Inhalt, der angezeigt werden soll, wenn der Expander erweitert wird.
Header	IView?	Definiert den Headerinhalt.
IsExpanded	bool	Bestimmt, ob der Expander erweitert wird. Diese Eigenschaft verwendet den TwoWay-Bindungsmodus und hat einen Standardwert von false.

Die ExpandDirection-Enumeration definiert die folgenden Members:

Wert	Beschreibung
Down	Gibt an, dass sich der Expander-Inhalt unter dem Header befindet.
Up	Gibt an, dass sich der Expander-Inhalt über dem Header befindet.

Das Expander-Steuerelement definiert auch ein ExpandedChanged-Ereignis, das ausgelöst wird, wenn auf den Expander-Header getippt wird.

ExpandedChangedEventArgs

Ereignisargument, das den ExpanderIsExpanded-Zustand enthält.

Eigenschaften

Eigenschaft	Typ	Beschreibung
IsExpanded	bool	Bestimmt, ob der Expander erweitert wird.

Beispiele

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

API

Sie finden den Quellcode für Expander über das GitHub-Repository für das .NET MAUI Community Toolkit.