Bagikan melalui

Expander

  • Artikel

Kontrol Expander menyediakan kontainer yang dapat diperluas untuk menghosting konten apa pun. Kontrol memiliki dua properti utama untuk menyimpan konten Anda:

Properti ini Header dapat disediakan dengan tampilan apa pun untuk memungkinkan penyesuaian penuh. Header akan selalu terlihat dan berinteraksi dengannya (mengklik atau mengetuk) akan menampilkan/menciutkan Content.

Catatan

Tidak disarankan untuk menempatkan kontrol di dalam header yang memungkinkan interaksi pengguna.

Konten

Ini adalah konten utama yang akan ditampilkan ketika Header properti berinteraksi dengannya (diklik atau diketuk) atau IsExpanded properti dimodifikasi.

Catatan

Expander tidak didukung di dalam ListView pada iOS/MacCatalyst dan melempar NotSupportedException. Namun, dapat diganti dengan implementasi kustom dengan mengatur public Action<TappedEventArgs>? HandleHeaderTapped { get; set; }. Tindakan ini dijalankan setiap kali header diketuk. Harap perhatikan, dengan mengubah tindakan ini Anda mungkin menerima perilaku yang berbeda di CollectionView dan ListView di semua platform.

Screenshot of an Expander in collapsed and expanded states

Penggunaan dasar

Contoh berikut menunjukkan cara menggunakan Expander tampilan dengan mengatur Header properti menjadi Label kontrol dan Content menjadi HorizontalStackLayout dengan dan ImageLabel di dalamnya.

XAML

Menyertakan namespace XAML

Untuk menggunakan toolkit di XAML, hal berikut xmlns perlu ditambahkan ke halaman atau tampilan Anda:

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

Oleh karena itu hal-hal berikut:

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

Akan dimodifikasi untuk menyertakan xmlns sebagai berikut:

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

Menggunakan Expander

Contoh berikut menunjukkan cara menambahkan Expander tampilan di 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#

Contoh berikut menunjukkan cara menambahkan Expander tampilan di 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();

Properti

Properti Tipe Deskripsi
Command ICommand Dijalankan saat header diketuk Expander .
CommandParameter object Parameter yang diteruskan ke Command.
Direction ExpandDirection Menentukan arah expander.
Content IView? Menentukan konten yang akan ditampilkan saat meluas Expander .
Header IView? Menentukan konten header.
IsExpanded bool Menentukan apakah Expander diperluas. Properti ini menggunakan TwoWay mode pengikatan, dan memiliki nilai falsedefault .

Enumerasi ExpandDirection menentukan anggota berikut:

Nilai Deskripsi
Down Menunjukkan bahwa Expander konten berada di bawah header.
Up Menunjukkan bahwa Expander konten berada di atas header.

Expander Kontrol juga menentukan ExpandedChanged peristiwa yang diaktifkan saat header diketukExpander.

ExpandedChangedEventArgs

Argumen peristiwa yang berisi ExpanderIsExpanded status.

Properti

Properti Tipe Deskripsi
IsExpanded bool Menentukan apakah Expander diperluas.

Contoh

Anda dapat menemukan contoh fitur ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk Expander lebih pada repositori GitHub .NET MAUI Community Toolkit.