Expander
Kontrol Expander memungkinkan Anda menampilkan atau menyembunyikan konten yang kurang penting yang terkait dengan konten utama yang selalu terlihat. Item yang terkandung dalam Header selalu terlihat. Pengguna dapat memperluas dan menciutkan area Konten , tempat konten sekunder ditampilkan, dengan berinteraksi dengan header. Ketika area konten diperluas, itu mendorong elemen UI lain keluar dari jalan; tidak melapisi UI lainnya. Expander
dapat meluas ke atas atau ke bawah.
Header
Area dan Content
dapat berisi konten apa pun, dari teks sederhana hingga tata letak UI yang kompleks. Misalnya, Anda dapat menggunakan kontrol untuk menampilkan opsi tambahan untuk item.
Apakah ini kontrol yang tepat?
Expander
Gunakan saat beberapa konten utama harus selalu terlihat, tetapi konten sekunder terkait mungkin disembunyikan hingga diperlukan. UI ini umumnya digunakan ketika ruang tampilan dibatasi dan ketika informasi atau opsi dapat dikelompokkan bersama-sama. Menyembunyikan konten sekunder hingga diperlukan juga dapat membantu memfokuskan pengguna pada bagian terpenting aplikasi Anda.
UWP dan WinUI 2
Penting
Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.
Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.
Expander untuk aplikasi UWP memerlukan WinUI 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat WinUI 2. API untuk kontrol ini ada di namespace Microsoft.UI.Xaml.Controls .
- WinUI 2 Apis: Kelas expander, properti Header, Properti konten
- Buka aplikasi Galeri WinUI 2 dan lihat tindakan Expander. Aplikasi Galeri WinUI 2 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.
Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc
) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:Expander />
Membuat Expander
- API Penting: Kelas expander, properti Header, Properti konten
Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub
Contoh ini menunjukkan cara membuat Expander sederhana dengan gaya default. Properti Header menentukan elemen yang selalu terlihat. Properti Konten menentukan elemen yang dapat diciutkan dan diperluas. Contoh ini membuat Expander
yang terlihat seperti ilustrasi sebelumnya.
<Expander Header="This text is in the header"
Content="This is in the content"/>
Konten perluas
Properti Expander
Konten dari dapat berupa semua jenis objek, tetapi biasanya merupakan string atau UIElement. Untuk detail selengkapnya tentang mengatur Content
properti, lihat bagian Keterangan dari kelas ContentControl .
Anda dapat menggunakan UI interaktif yang kompleks sebagai konten Expander
, termasuk kontrol berlapis Expander
dalam konten induk Expander
seperti yang ditunjukkan di sini.
Perataan konten
Anda dapat meratakan konten dengan mengatur properti HorizontalContentAlignment dan VerticalContentAlignment pada Expander
kontrol. Saat Anda mengatur properti ini, perataan hanya berlaku untuk konten yang diperluas, bukan header.
Mengontrol ukuran Expander
Secara default, area Header dan Konten secara otomatis berukuran agar sesuai dengan kontennya. Penting untuk menggunakan teknik yang benar untuk mengontrol ukuran untuk menghindari penampilan atau perilaku yang Expander
tidak diinginkan.
Width
Jika konten lebih lebar dari header, lebar header meningkat agar sesuai dengan area konten saat diperluas, dan menyusut saat area konten diciutkan. Untuk mencegah lebar kontrol berubah saat diperluas atau diciutkan, Anda dapat mengatur lebar eksplisit, atau, jika kontrol adalah turunan panel, atur HorizontalAlignment ke Stretch dan biarkan panel tata letak mengontrol ukuran.
Di sini, serangkaian kontrol terkait Expander
ditempatkan di StackPanel. HorizontalAlignment
Masing-masing Expander
dalam StackPanel
diatur ke Stretch
menggunakan Gaya di StackPanel
Sumber Daya, dan lebar StackPanel
menentukan lebar Expander
kontrol.
<StackPanel x:Name="ExpanderStack" MaxWidth="600">
<StackPanel.Resources>
<Style TargetType="Expander">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</StackPanel.Resources>
<Expander Header="Choose your crust"> ... </Expander>
<Expander Header="Choose your sauce"> ... </Expander>
<Expander Header="Choose your toppings"> ... </Expander>
</StackPanel>
Height
Jangan tentukan Tinggi pada Expander
. Jika Anda melakukannya, kontrol akan mencadangkan ruang itu bahkan ketika area konten diciutkan, yang mengalahkan tujuan .Expander
Untuk menentukan ukuran area konten yang diperluas, atur dimensi ukuran pada konten Expander
. Jika perlu, Anda dapat membatasi Height
konten dan membuat konten dapat digulir.
Konten yang dapat digulir
Jika konten Anda terlalu besar untuk ukuran area konten, Anda dapat membungkus konten ScrollViewer untuk membuat area konten dapat digulir. Kontrol Expander
tidak secara otomatis menyediakan kemampuan gulir.
Saat Anda menempatkan ScrollViewer
di Expander
konten, atur tinggi pada ScrollViewer
kontrol ke tinggi yang diperlukan untuk area konten. Jika Anda mengatur dimensi tinggi pada konten di dalam ScrollViewer
, ScrollViewer
tidak mengenali pengaturan ini dan karenanya tidak menyediakan konten yang dapat digulir.
Contoh berikut menunjukkan cara membuat Expander
kontrol yang berisi teks yang dapat digulir sebagai kontennya.
<Expander Header="Expander with scrollable content">
<ScrollViewer MaxHeight="200">
<Grid>
<TextBlock TextWrapping="Wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</TextBlock>
</Grid>
</ScrollViewer>
</Expander>
Memperluas dan menciutkan area konten
Secara default, Expander diciutkan dan diperluas ke bawah.
- Atur properti IsExpanded agar
true
area konten awalnya diperluas. - Atur properti ExpandDirection ke Atas untuk membuat konten diperluas ke atas.
<Expander IsExpanded="True" ExpandDirection="Up">
Expander
Diperluas atau diciutkan baik secara terprogram dengan mengatur IsExpanded
properti, atau dengan berinteraksi dengan Header
; tidak dapat dimatikan cahaya.
Tip
UI sementara, seperti Flyout
drop-down atau buka dari ComboBox
, ditutup saat Anda mengklik atau mengetuk di luarnya. Ini disebut pengalih cahaya. Area Expander
konten tidak dianggap sementara dan tidak melapisi UI lain, sehingga tidak mendukung pengabaian ringan.
Anda juga dapat menangani peristiwa Perluas dan Ciutkan untuk mengambil tindakan saat konten ditampilkan atau disembunyikan. Berikut adalah beberapa contoh peristiwa ini.
Memperluas peristiwa
Dalam contoh ini, Anda memiliki sekelompok expander dan hanya ingin membuka satu per satu. Saat pengguna membuka Expander
, Anda menangani peristiwa Perluas dan menciutkan semua Expander
kontrol dalam grup selain yang diklik pengguna.
Perhatian
Bergantung pada pengalaman aplikasi dan pengguna Anda, mungkin mudah untuk secara otomatis menciutkan Expander
kontrol saat pengguna memperluas kontrol yang berbeda. Namun, ini juga mengambil kontrol dari pengguna. Jika perilaku mungkin berguna, pertimbangkan untuk menjadikannya opsi yang dapat diatur pengguna dengan mudah.
<StackPanel x:Name="ExpanderStack">
<Expander Header="Choose your crust"
Expanding="Expander_Expanding"> ... </Expander>
<Expander Header="Choose your sauce"
Expanding="Expander_Expanding"> ... </Expander>
<Expander Header="Choose your toppings"
Expanding="Expander_Expanding"> ... </Expander>
</StackPanel>
// Let the user opt out of custom behavior.
private bool _autoCollapse = true;
private void Expander_Expanding(muxc.Expander sender,
muxc.ExpanderExpandingEventArgs args)
{
if (_autoCollapse == true)
{
foreach (muxc.Expander ex in ExpanderStack.Children)
{
if (ex != sender && ex.IsExpanded)
ex.IsExpanded = false;
}
}
}
Peristiwa yang diciutkan
Dalam contoh ini, Anda menangani peristiwa Yang Diciutkan dan mengisi Header
dengan ringkasan opsi yang dipilih di Content
.
Gambar ini memperlihatkan Expander
dengan konten diperluas dan opsi dipilih.
Saat diciutkan, opsi yang dipilih dirangkum di header sehingga pengguna masih dapat melihatnya tanpa membuka Expander
.
<Expander IsExpanded="True"
Expanding="Expander_Expanding"
Collapsed="Expander_Collapsed">
<Expander.Header>
<Grid>
<TextBlock Text="Choose your crust"/>
<TextBlock x:Name="tbCrustSelections"
HorizontalAlignment="Right"
Style="{StaticResource CaptionTextBlockStyle}"/>
</Grid>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<RadioButtons x:Name="rbCrustType" SelectedIndex="0">
<x:String>Classic</x:String>
<x:String>Whole wheat</x:String>
<x:String>Gluten free</x:String>
</RadioButtons>
<RadioButtons x:Name="rbCrustStyle" SelectedIndex="0"
Margin="48,0,0,0">
<x:String>Regular</x:String>
<x:String>Thin</x:String>
<x:String>Pan</x:String>
<x:String>Stuffed</x:String>
</RadioButtons>
</StackPanel>
</Expander>
private void Expander_Collapsed(muxc.Expander sender,
muxc.ExpanderCollapsedEventArgs args)
{
// Update the header with options selected in the content.
tbCrustSelections.Text = rbCrustType.SelectedItem.ToString() +
", " + rbCrustStyle.SelectedItem.ToString();
}
Gaya ringan
Anda dapat memodifikasi default Style
dan ControlTemplate
untuk memberi kontrol tampilan yang unik. Lihat bagian Gaya Kontrol dan Templat dari dokumen EXPANDER API untuk daftar sumber daya tema yang tersedia. Untuk informasi selengkapnya, lihat bagian Gaya ringan dari artikel Kontrol gaya.
Rekomendasi
Expander
Gunakan saat ruang tampilan dibatasi dan beberapa konten sekunder mungkin disembunyikan hingga pengguna memintanya.
Contoh kode
XAML ini membuat grup Expander
kontrol yang ditunjukkan di bagian lain dari artikel ini. Kode untuk Expanding
penanganan aktivitas dan Collapsed
juga ditampilkan di bagian sebelumnya.
<StackPanel x:Name="ExpanderStack" MaxWidth="600">
<StackPanel.Resources>
<Style TargetType="Expander">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</StackPanel.Resources>
<Expander IsExpanded="True"
Expanding="Expander_Expanding"
Collapsed="Expander_Collapsed">
<Expander.Header>
<Grid>
<TextBlock Text="Choose your crust"/>
<TextBlock x:Name="tbCrustSelections"
HorizontalAlignment="Right"
Style="{StaticResource CaptionTextBlockStyle}"/>
</Grid>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<RadioButtons x:Name="rbCrustType" SelectedIndex="0">
<x:String>Classic</x:String>
<x:String>Whole wheat</x:String>
<x:String>Gluten free</x:String>
</RadioButtons>
<RadioButtons x:Name="rbCrustStyle" SelectedIndex="0"
Margin="48,0,0,0">
<x:String>Regular</x:String>
<x:String>Thin</x:String>
<x:String>Pan</x:String>
<x:String>Stuffed</x:String>
</RadioButtons>
</StackPanel>
</Expander>
<Expander Header="Choose your sauce" Margin="24"
Expanding="Expander_Expanding">
<RadioButtons SelectedIndex="0" MaxColumns="2">
<x:String>Classic red</x:String>
<x:String>Garlic</x:String>
<x:String>Pesto</x:String>
<x:String>Barbecue</x:String>
</RadioButtons>
</Expander>
<Expander Header="Choose your toppings"
Expanding="Expander_Expanding">
<StackPanel>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="House special"/>
</Expander.Header>
<TextBlock Text="Cheese, pepperoni, sausage, black olives, mushrooms"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="Vegetarian"/>
</Expander.Header>
<TextBlock Text="Cheese, mushrooms, black olives, green peppers, artichoke hearts"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="All meat"/>
</Expander.Header>
<TextBlock Text="Cheese, pepperoni, sausage, ground beef, salami"
TextWrapping="WrapWholeWords"/>
</Expander>
<Expander>
<Expander.Header>
<RadioButton GroupName="Toppings" Content="Choose your own"/>
</Expander.Header>
<StackPanel Orientation="Horizontal">
<StackPanel>
<CheckBox Content="Cheese"/>
<CheckBox Content="Pepperoni"/>
<CheckBox Content="Sausage"/>
</StackPanel>
<StackPanel>
<CheckBox Content="Ground beef"/>
<CheckBox Content="Salami"/>
<CheckBox Content="Mushroom"/>
</StackPanel>
<StackPanel>
<CheckBox Content="Black olives"/>
<CheckBox Content="Green peppers"/>
<CheckBox Content="Artichoke hearts"/>
</StackPanel>
</StackPanel>
</Expander>
</StackPanel>
</Expander>
</StackPanel>
Artikel terkait
Windows developer