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.

Expander yang diciutkan yang diperluas lalu diciutkan. Header memiliki teks

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.

Membuat Expander

API Penting:Kelas Expander, properti Header, properti Konten

Buka aplikasi Galeri WinUI 3 dan lihat Tindakan Expander

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 Konten dari Expander dapat berupa semua jenis objek, tetapi biasanya berupa string atau UIElement. Untuk detail selengkapnya tentang mengatur 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.

Expander terbuka dengan empat kontrol Expander yang tertanam dalam kontennya. Masing-masing kontrol Expander yang tertanam memiliki Tombol Radio dan teks di headernya

Penjajaran 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 Expander agar terhindar dari penampilan atau perilaku yang tidak diinginkan.

Lebar

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 anak dari Panel, atur HorizontalAlignment ke Stretch dan biarkan panel tata letak mengendalikan ukurannya.

Di sini, serangkaian kontrol terkait Expander ditempatkan di StackPanel. HorizontalAlignment setiap Expander di dalam StackPanel diatur ke Stretch menggunakan Gaya di Sumber StackPanel, dan lebar StackPanel menentukan lebar kontrol Expander.

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

Tiga kontrol expander ditumpuk secara vertikal, semua lebar yang sama

Tinggi

Jangan tentukan Tinggi pada Expander. Jika Anda melakukannya, kontrol akan mempertahankan ruang itu bahkan ketika areal konten diperkecil, 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 dalam konten Expander, atur tinggi pada pengendali ScrollViewer 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>

Expander dengan teks yang dapat digulir sebagai kontennya

Memperluas dan menciutkan area konten

Secara default, Expander diciutkan dan diperluas ke bawah.

Atur properti IsExpanded agar area konten secara awal 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.

Petunjuk / Saran

UI sementara, seperti Flyout atau drop-down terbuka dari ComboBox, akan ditutup saat Anda mengklik atau mengetuk di luarnya. Ini disebut light-dismiss . Area konten dari Expander tidak dianggap sementara dan tidak melapisi UI lain, sehingga tidak mendukung pengabaian otomatis.

Anda juga dapat menangani event Memperluas dan Menciutkan untuk mengambil tindakan saat konten ditampilkan atau disembunyikan. Berikut adalah beberapa contoh peristiwa ini.

Memperluas acara

Dalam contoh ini, Anda memiliki sekelompok expander dan ingin hanya satu yang terbuka pada saat bersamaan. Ketika pengguna membuka Expander, Anda menangani event Expand dan menutup semua Expander kontrol dalam grup kecuali kontrol yang diklik oleh pengguna.

Perhatian

Bergantung pada aplikasi dan pengalaman pengguna Anda, mungkin berguna 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 runtuh

Dalam contoh ini, Anda menangani peristiwa Yang Diciutkan dan mengisi Header dengan ringkasan opsi yang dipilih di Content.

Gambar ini memperlihatkan Expander dengan kontennya diperluas dan opsi yang dipilih.

Kontrol Expander yang diperluas dengan opsi terpilih yang diperlihatkan di area konten

Saat diciutkan, opsi yang dipilih dirangkum di header sehingga pengguna masih dapat melihatnya tanpa membuka Expander.

Kontrol Expander dalam keadaan tertutup dengan opsi yang dipilih dirangkum di header

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

Recommendations

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 penangan acara Expanding 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>

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan Windows App SDK 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:Expander class, Header property, Content property
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 />

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-11-25