Expander

Kontrolka Expander udostępnia rozszerzalny kontener do hostowania dowolnej zawartości. Kontrolka ma dwie główne właściwości do przechowywania zawartości:

Tę Header właściwość można udostępnić w dowolnym widoku, aby umożliwić pełne dostosowanie. Element Header będzie zawsze widoczny, a interakcja z nim (kliknięcie lub stuknięcie) spowoduje wyświetlenie lub zwinięcie elementu Content.

Note

Nie zaleca się umieszczania kontrolek wewnątrz nagłówka, które umożliwiają interakcję użytkownika.

Content

Jest to główna treść, która będzie wyświetlana, gdy nastąpi interakcja z właściwością Header (po kliknięciu lub stuknięciu) lub gdy właściwość IsExpanded zostanie zmodyfikowana.

Note

Expander może działać w nieoczekiwany sposób, jeśli jest umieszczony wewnątrz elementu ListView lub elementu CollectionView. Można go jednak kontrolować za pomocą implementacji niestandardowej, ustawiając wartość public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Ta akcja jest wykonywana za każdym razem, gdy nagłówek jest naciśnięty. Uwaga: zmiana tego działania może spowodować odmienne działanie w CollectionView i ListView na wszystkich platformach.

Zrzut ekranu przedstawiający kontrolkę Expander w stanie zwiniętym i rozwiniętym

Podstawowy sposób użycia

W poniższych przykładach pokazano, jak używać widoku Expander, ustawiając właściwość Header na formant Label, a element Content jako element HorizontalStackLayout, wewnątrz którego znajdują się elementy Image i Label.

XAML

Dołączanie przestrzeni nazw XAML

Aby można było używać zestawu narzędzi w języku XAML, należy dodać następujące xmlns elementy do strony lub widoku:

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

Dlatego następuje:

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

Zostanie zmodyfikowana tak, aby zawierała następujące xmlns elementy:

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

Korzystanie z ekspandera

W poniższym przykładzie pokazano, jak dodać widok Expander w kodzie 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#

W poniższym przykładzie pokazano, jak dodać widok Expander w języku 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
        }
    }
};

Znaczniki języka C#

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

Właściwości

Majątek Typ Description
Command ICommand Jest wykonywane po dotknięciu nagłówka Expander.
CommandParameter object Parametr przekazany do Command.
Direction ExpandDirection Definiuje kierunek ekspandera.
Content IView? Definiuje zawartość, która ma być wyświetlana po rozwinięciu elementu Expander.
Header IView? Definiuje zawartość nagłówka.
IsExpanded bool Określa, czy element Expander jest rozwinięty. Ta właściwość używa TwoWay trybu powiązania i ma wartość falsedomyślną .

Wyliczenie ExpandDirection definiuje następujących członków:

Value Description
Down Wskazuje, że zawartość Expander znajduje się pod nagłówkiem.
Up Wskazuje, że Expander zawartość znajduje się powyżej nagłówka.

Kontrolka Expander definiuje również zdarzenie ExpandedChanged, które jest wywoływane po dotknięciu nagłówka Expander.

ExpandedChangedEventArgs

Argument zdarzenia zawierający stan ExpanderIsExpanded.

Właściwości

Majątek Typ Description
Jest rozwinięte bool Określa, czy Expander jest rozwinięty.

Examples

Przykład tej funkcji można znaleźć w przykładzie przykładowej aplikacji .NET MAUI Community Toolkit Sample Application.

API

Kod źródłowy Expander można znaleźć w repozytorium .NET MAUI Community Toolkit GitHub.

  • Last updated on