Expander

Kontrollen Expander tillhandahåller en utbyggbar container som är värd för allt innehåll. Kontrollen har två huvudsakliga egenskaper för att lagra ditt innehåll:

Den här Header egenskapen kan tillhandahållas med valfri vy för att möjliggöra fullständig anpassning. Header kommer alltid att vara synlig, och om du klickar eller trycker på den visas eller döljs Content.

Note

Det rekommenderas inte att placera kontroller i sidhuvudet som användaren kan interagera med.

Content

Det här är huvudinnehållet som visas när Header egenskapen interageras med den (klickas eller knackas) eller egenskapen IsExpanded ändras.

Note

Expander kan fungera oväntat om det placeras inuti ListView eller CollectionView. Det kan dock styras med den anpassade implementeringen genom att ange public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Den här åtgärden utförs varje gång rubriken trycks på. Var uppmärksam genom att ändra den här åtgärden så kan du få olika beteende i CollectionView och ListView på alla plattformar.

Skärmbild av en expander i komprimerade och expanderade tillstånd

Grundläggande användning

Följande exempel visar hur du använder vyn Expander genom att ange egenskapen Header till kontrollen Label och Content till en HorizontalStackLayout med en Image och en Label inuti.

XAML

Inklusive XAML-namnområdet

För att kunna använda verktygslådan i XAML måste följande xmlns läggas till på sidan eller vyn:

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

Därför följande:

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

Skulle ändras för att inkludera xmlns på följande sätt:

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

Använda expanderaren

I följande exempel visas hur du lägger till en Expander vy i 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#

I följande exempel visas hur du lägger till en Expander vy i 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#-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();

Egenskaper

Fastighet Type Description
Command ICommand Körs när rubriken Expander trycks på.
CommandParameter object Parametern som skickas till Command.
Direction ExpandDirection Definierar utökningsriktningen.
Content IView? Definierar innehållet som ska visas när Expander expanderas.
Header IView? Definierar rubrikinnehållet.
IsExpanded bool Avgör om Expander är expanderad. Den här egenskapen använder bindningsläget TwoWay och har standardvärdet false.

Uppräkningen ExpandDirection definierar följande medlemmar:

Value Description
Down Anger att innehållet Expander finns under rubriken.
Up Anger att innehållet Expander ligger ovanför rubriken.

Kontrollen Expander definierar också en ExpandedChanged händelse som utlöses när Expander rubriken knackas.

ExpandedChangedEventArgs

Händelseargument som innehåller ExpanderIsExpanded tillstånd.

Egenskaper

Fastighet Type Description
IsExpanded bool Avgör om Expander är expanderad.

Exempel

Du hittar ett exempel på den här funktionen i praktiken i .NET MAUI Community Toolkit Sample Application.

API

Källkoden för Expander finns på lagringsplatsen .NET MAUI Community Toolkit GitHub.

  • Last updated on