Expander

Het Expander besturingselement biedt een uitvouwbare container waarin inhoud kan worden ondergebracht. Het besturingselement heeft twee belangrijkste eigenschappen om uw inhoud in op te slaan:

Koptekst

Deze Header eigenschap kan worden geleverd met elke weergave om volledige aanpassing mogelijk te maken. De Header zal altijd zichtbaar zijn en als je erop klikt of tikt, wordt de Content weergegeven of samengevouwen.

Note

Het wordt niet aanbevolen om besturingselementen in de header te plaatsen die gebruikersinteractie toestaan.

Content

Dit is de hoofdinhoud die wordt weergegeven wanneer de Header eigenschap ermee wordt gecommuniceerd (erop geklikt of getikt) of dat de IsExpanded eigenschap wordt gewijzigd.

Note

Expander kan onverwacht werken als deze in ListView of CollectionView is geplaatst. Het kan echter worden beheerd met de aangepaste implementatie door de instelling in te stellen public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Deze actie wordt telkens uitgevoerd wanneer op de header wordt getikt. Let op, door deze actie te wijzigen, ontvangt u mogelijk ander gedrag in CollectionView en ListView op alle platforms.

Basaal gebruik

De volgende voorbeelden laten zien hoe u de Expander-weergave kunt gebruiken door de eigenschap Header in te stellen op een Label-besturingselement en Content op een HorizontalStackLayout met daarin een Image en een Label.

XAML

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

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

Daarom volgt het volgende:

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

Zou als volgt worden gewijzigd om de xmlns op te nemen:

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

De expander gebruiken

In het volgende voorbeeld ziet u hoe u een Expander weergave toevoegt 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#

In het volgende voorbeeld ziet u hoe u een Expander weergave toevoegt 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#-markeringen

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

Eigenschappen

Property	Type	Description
Command	ICommand	Wordt uitgevoerd wanneer de Expander koptekst wordt getikt.
CommandParameter	object	De parameter die wordt doorgegeven aan Command.
Direction	ExpandDirection	Hiermee stelt u de richting van de expander in.
Content	IView?	Hiermee definieert u de inhoud die moet worden weergegeven wanneer de Expander uitbreiding wordt uitgevoerd.
Header	IView?	Hiermee definieert u de koptekstinhoud.
IsExpanded	bool	Bepaalt of de Expander optie is uitgevouwen. Deze eigenschap maakt gebruik van de TwoWay bindingsmodus en heeft een standaardwaarde van false.

De opsomming ExpandDirection definieert de volgende leden:

Value	Description
Down	Geeft aan dat de Expander inhoud zich onder de koptekst bevindt.
Up	Geeft aan dat de Expander inhoud boven de koptekst staat.

Het Expander besturingselement definieert ook een ExpandedChanged gebeurtenis die wordt geactiveerd wanneer de Expander header wordt getikt.

ExpandedChangedEventArgs

Gebeurtenisargument dat de status bevat ExpanderIsExpanded .

Eigenschappen

Property	Type	Description
IsExpanded	bool	Bepaalt of Expander is uitgevouwen.

Examples

Je kunt een voorbeeld van hoe deze functie werkt vinden in de .NET MAUI Community Toolkit Sample Application.

API

U vindt de broncode voor Expander in de .NET MAUI Community Toolkit GitHub opslagplaats.