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.

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.

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

De opsomming ExpandDirection definieert de volgende leden:

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

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.