Expander

Artikel
03/18/2023

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 lain. 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 kapan informasi atau opsi dapat dikelompokkan bersama. 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 Windows UI Library 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. 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 WinUI 2 Gallery mencakup contoh interaktif 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

Buka aplikasi Galeri WinUI 3 dan lihat tindakan Expander.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif 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 yang Expander terlihat seperti ilustrasi sebelumnya.

<Expander Header="This text is in the header"
               Content="This is in the content"/>

Konten perluas

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

Expander terbuka dengan empat kontrol Expander yang ditumpuk dalam kontennya. Masing-masing kontrol Expander berlapis memiliki Tombol Radio dan teks di header-nya

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 pas dengan kontennya. Penting untuk menggunakan teknik yang benar untuk mengontrol ukuran untuk menghindari penampilan atau perilaku yang Expander 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 turunan panel, atur HorizontalAlignment ke Stretch dan biarkan panel tata letak mengontrol ukuran.

Di sini, serangkaian kontrol terkait Expander ditempatkan di StackPanel. HorizontalAlignment dari masing-masing Expander di StackPanel diatur ke Stretch menggunakan Gaya di StackPanelSumber 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>

Tiga kontrol expander ditumpuk secara vertikal, semua lebar yang sama

Tinggi

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 digulirkan. Kontrol Expander tidak secara otomatis menyediakan kapabilitas pengguliran.

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

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 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 atau drop-down terbuka 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 Perluasan 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 acara Perluasan dan menciutkan semua Expander kontrol dalam grup selain yang diklik pengguna.

Perhatian

Bergantung pada pengalaman aplikasi dan pengguna Anda, mungkin akan lebih 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.

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

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

Kontrol Expander yang diciutkan dengan opsi terpilih yang diringkas 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 memberikan tampilan unik pada kontrol. 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 diperlihatkan 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>

Expander

Apakah ini kontrol yang tepat?

UWP dan WinUI 2

Membuat Expander

Konten perluas

Perataan konten

Mengontrol ukuran Expander

Lebar

Tinggi

Konten yang dapat digulir

Memperluas dan menciutkan area konten

Memperluas peristiwa

Peristiwa yang diciutkan

Gaya ringan

Rekomendasi

Contoh kode

Saran dan Komentar

Sumber Daya Tambahan:

Expander

Apakah ini kontrol yang tepat?

UWP dan WinUI 2

Membuat Expander

Konten perluas

Perataan konten

Mengontrol ukuran Expander

Lebar

Tinggi

Konten yang dapat digulir

Memperluas dan menciutkan area konten

Memperluas peristiwa

Peristiwa yang diciutkan

Gaya ringan

Rekomendasi

Contoh kode

Artikel terkait

Saran dan Komentar

Sumber Daya Tambahan: