Ekspander

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

Nagłówek

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

Uwaga

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

Zawartość

Jest to główna zawartość, która będzie wyświetlana, gdy Header właściwość jest z nią wchodzić w interakcję (klikniętą lub naciśniętą) albo IsExpanded właściwość jest modyfikowana.

Uwaga

Expander program nie jest obsługiwany w systemie ListView iOS/MacCatalyst i zgłasza wyjątek NotSupportedException. Można go jednak zastąpić implementacją niestandardową, ustawiając wartość public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Ta akcja jest wykonywana za każdym razem, gdy nagłówek jest naciśnięty. Zwróć uwagę, zmieniając tę akcję, możesz otrzymywać różne zachowania na CollectionView wszystkich platformach i ListView na wszystkich platformach.

Podstawowy sposób użycia

W poniższych przykładach pokazano, jak używać Expander widoku, ustawiając Header właściwość jako kontrolkę Label i Content jako element z HorizontalStackLayout elementem Image i Label wewnątrz.

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"

W związku z tym następujące 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">

</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ć Expander widok w języku 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ć Expander widok 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

Właściwości	Type	Opis
Command	ICommand	Wykonuje po naciśnię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 Expander .
Header	IView?	Definiuje zawartość nagłówka.
IsExpanded	bool	Określa, czy Expander element jest rozwinięty. Ta właściwość używa TwoWay trybu powiązania i ma wartość falsedomyślną .

Wyliczenie ExpandDirection definiuje następujące elementy członkowskie:

Wartość	Opis
Down	Wskazuje, że Expander zawartość znajduje się w nagłówku.
Up	Wskazuje, że Expander zawartość znajduje się powyżej nagłówka.

Kontrolka Expander definiuje ExpandedChanged również zdarzenie, które jest wyzwalane po naciśnięciu nagłówka Expander .

Expandedchangedeventargs

Argument zdarzenia, który zawiera ExpanderIsExpanded stan.

Właściwości

Właściwości	Type	Opis
Isexpanded	bool	Określa, czy Expander element jest rozwinięty.

Przykłady

Przykład tej funkcji można znaleźć w aplikacji przykładowej zestawu narzędzi .NET MAUI Community Toolkit.

interfejs API

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