Expander
Kontrol Expander
menyediakan kontainer yang dapat diperluas untuk menghosting konten apa pun. Kontrol memiliki dua properti utama untuk menyimpan konten Anda:
Header
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.
Penggunaan dasar
Contoh berikut menunjukkan cara menggunakan Expander
tampilan dengan mengatur Header
properti menjadi Label
kontrol dan Content
menjadi HorizontalStackLayout
dengan dan Image
Label
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 false default . |
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 Expander
IsExpanded
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.
.NET MAUI Community Toolkit