Tombol

Artikel
03/18/2023

Tombol memberi pengguna cara untuk memicu tindakan segera. Beberapa tombol dikhususkan untuk tugas tertentu, seperti navigasi, tindakan berulang, atau menu presentasi.

Kerangka kerja Extensible Application Markup Language (XAML) menyediakan kontrol tombol standar serta beberapa kontrol tombol khusus.

Kontrol	Deskripsi
Tombol	Tombol yang memulai tindakan segera. Dapat digunakan dengan peristiwa Klik atau Pengikatan perintah .
RepeatButton	Tombol yang menaikkan peristiwa Klik terus menerus saat ditekan.
HyperlinkButton	Tombol yang ditata seperti hyperlink dan digunakan untuk navigasi. Untuk informasi selengkapnya tentang hyperlink, lihat Hyperlink.
DropDownButton	Tombol dengan chevron untuk membuka flyout yang terpasang.
SplitButton	Tombol dengan dua sisi. Satu sisi memulai tindakan, dan sisi lain membuka menu.
ToggleSplitButton	Tombol alih dengan dua sisi. Satu sisi hidup/mati, dan sisi lain membuka menu.
Tombol Alih	Tombol yang dapat menyala atau nonaktif.

Apakah ini kontrol yang tepat?

Gunakan kontrol Tombol untuk memungkinkan pengguna memulai tindakan segera, seperti mengirimkan formulir.

Jangan gunakan kontrol Tombol saat tindakan adalah menavigasi ke halaman lain; sebagai gantinya, gunakan kontrol HyperlinkButton . Untuk informasi selengkapnya tentang hyperlink, lihat Hyperlink.

Penting

Untuk navigasi wizard, gunakan tombol berlabel Kembali dan Berikutnya. Untuk jenis navigasi atau navigasi mundur lainnya ke tingkat atas, gunakan tombol kembali.

Gunakan kontrol RepeatButton saat pengguna mungkin ingin memicu tindakan berulang kali. Misalnya, gunakan kontrol RepeatButton untuk menaikkan atau menurunkan nilai dalam penghitung.

Gunakan kontrol DropDownButton saat tombol memiliki flyout yang berisi lebih banyak opsi. Chevron default memberikan indikasi visual bahwa tombol menyertakan flyout.

Gunakan kontrol SplitButton saat Anda ingin pengguna dapat memulai tindakan segera atau memilih dari opsi tambahan secara independen.

Gunakan kontrol ToggleButton saat Anda ingin pengguna dapat segera beralih antara dua status yang saling eksklusif, dan tombol paling cocok untuk kebutuhan UI Anda. Kecuali UI Anda mendapat manfaat dari tombol, mungkin pilihan yang lebih baik untuk menggunakan AppBarToggleButton, CheckBox, RadioButton, atau ToggleSwitch.

Rekomendasi

Pastikan tujuan dan status tombol jelas untuk pengguna.
Ketika ada beberapa tombol untuk keputusan yang sama (seperti dalam dialog konfirmasi), sajikan tombol penerapan dalam urutan ini, di mana [Do it] dan [Jangan melakukannya] adalah respons khusus terhadap instruksi utama:
- OK/[Do it]/Yes
  - [Jangan lakukan itu]/Tidak
  - Batalkan
Hanya mengekspos satu atau dua tombol kepada pengguna pada satu waktu, misalnya, Terima dan Batal. Jika Anda perlu mengekspos lebih banyak tindakan kepada pengguna, pertimbangkan untuk menggunakan kotak centang atau tombol radio tempat pengguna dapat memilih tindakan, dengan satu tombol perintah untuk memicu tindakan tersebut.
Untuk tindakan yang perlu tersedia di beberapa halaman dalam aplikasi Anda, alih-alih menduplikasi tombol di beberapa halaman, pertimbangkan untuk menggunakan bilah aplikasi bawah.

Teks tombol

Konten tombol biasanya teks. Saat Anda mendesain teks tersebut, gunakan rekomendasi berikut:

Gunakan teks ringkas, spesifik, dan penjelasan mandiri yang menjelaskan dengan jelas tindakan yang dilakukan tombol. Biasanya teks tombol adalah satu kata kerja.
Gunakan font default, kecuali pedoman merek Anda memberi tahu Anda untuk menggunakan sesuatu yang berbeda.
Untuk teks yang lebih pendek, hindari tombol perintah sempit dengan menggunakan lebar tombol minimum 120px.
Untuk teks yang lebih panjang, hindari tombol perintah lebar dengan membatasi teks hingga panjang maksimum 26 karakter.
Jika konten teks tombol dinamis (yaitu, dilokalkan), pertimbangkan bagaimana tombol akan diubah ukurannya dan apa yang akan terjadi pada kontrol di sekitarnya.

Perlu diperbaiki: Tombol dengan teks yang meluap.
Opsi 1: Tingkatkan lebar tombol, tombol tumpukan, dan bungkus jika panjang teks lebih besar dari 26 karakter.
Opsi 2: Tingkatkan tinggi tombol, dan bungkus teks.

Tata letak tombol tunggal yang direkomendasikan

Jika tata letak Anda hanya memerlukan satu tombol, tata letak harus diratakan kiri atau kanan berdasarkan konteks kontainernya.

Dialog hanya dengan satu tombol harus meratakan kanan tombol. Jika dialog Anda hanya berisi satu tombol, pastikan tombol melakukan tindakan yang aman dan tidak merusak. Jika Anda menggunakan ContentDialog dan menentukan satu tombol, itu akan secara otomatis rata kanan.
Jika tombol Anda muncul dalam UI kontainer (misalnya, dalam pemberitahuan toast, flyout, atau item tampilan daftar), Anda harus meratakan kanan tombol dalam kontainer.
Di halaman yang berisi satu tombol (misalnya, tombol Terapkan di bagian bawah halaman pengaturan), Anda harus meratakan kiri tombol. Ini memastikan bahwa tombol selaras dengan konten halaman lainnya.

Tombol kembali

Tombol kembali adalah elemen UI yang disediakan sistem yang memungkinkan navigasi mundur melalui tumpukan belakang atau riwayat navigasi pengguna. Anda tidak perlu membuat tombol kembali sendiri, tetapi Anda mungkin harus melakukan beberapa pekerjaan untuk memungkinkan pengalaman navigasi mundur yang baik. Untuk informasi selengkapnya, lihat Riwayat navigasi dan navigasi mundur untuk aplikasi Windows.

Contoh

Contoh ini menggunakan tiga tombol, Simpan, Jangan Simpan, dan Batalkan, dalam dialog yang menanyakan kepada pengguna apakah mereka ingin menyimpan pekerjaan mereka.

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.

Kontrol DropDownButton, SplitButton, dan ToggleSplitButton untuk aplikasi UWP disertakan sebagai bagian dari Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. API untuk kontrol ini ada di namespace Layanan Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

UWP API:Kelas tombol, kelas RepeatButton, kelas HyperlinkButton, DropDownButton, SplitButton, ToggleSplitButton, ToggleButton, Klik peristiwa, Properti perintah, Properti konten
WinUI 2 Apis:DropDownButton, SplitButton, ToggleSplitButton
Buka aplikasi Galeri WinUI 2 dan lihat tombol beraksi. 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.

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

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:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Membuat tombol

API Penting:Kelas tombol, Klik peristiwa, Properti perintah, properti Konten

Buka aplikasi Galeri WinUI 3 dan lihat tombol beraksi.

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 memperlihatkan tombol yang merespons klik.

Buat tombol di XAML.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

Atau buat tombol dalam kode.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

Menangani peristiwa Klik .

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

Interaksi tombol

Saat Anda mengetuk kontrol Tombol dengan jari atau stylus, atau menekan tombol mouse kiri saat penunjuk berada di atasnya, tombol akan menaikkan peristiwa Klik . Jika tombol memiliki fokus keyboard, menekan tombol Enter atau Spasi juga menaikkan peristiwa Klik .

Anda umumnya tidak dapat menangani peristiwa PointerPressed tingkat rendah pada objek Tombol karena memiliki perilaku Klik sebagai gantinya. Untuk informasi selengkapnya, lihat Gambaran umum peristiwa dan peristiwa yang dirutekan.

Anda dapat mengubah cara tombol menaikkan peristiwa Klik dengan mengubah properti ClickMode . Nilai default ClickMode adalah Rilis, tetapi Anda juga dapat mengatur nilai ClickMode tombol ke Hover atau Press. Jika ClickMode adalah Hover, peristiwa Klik tidak dapat dinaikkan dengan menggunakan keyboard atau sentuhan.

Konten tombol

Tombol adalah kontrol konten kelas ContentControl . Properti konten XAML-nya adalah Konten, yang memungkinkan sintaks seperti ini untuk XAML: <Button>A button's content</Button>. Anda dapat mengatur objek apa pun sebagai konten tombol. Jika konten adalah objek UIElement , konten dirender di tombol . Jika konten adalah jenis objek lain, representasi stringnya ditampilkan di tombol .

Konten tombol biasanya teks. Saat Anda mendesain teks tersebut, ikuti Rekomendasi teks tombol yang tercantum sebelumnya.

Anda juga dapat menyesuaikan visual yang membentuk tampilan tombol. Misalnya, Anda dapat mengganti teks dengan ikon, atau menggunakan ikon selain teks.

Di sini, StackPanel yang berisi gambar dan teks diatur sebagai konten tombol.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

Tombol terlihat seperti ini.

Buat tombol ulangi

API Penting:Kelas RepeatButton, Klik peristiwa, Properti konten

Buka aplikasi Galeri WinUI 3 dan lihat RepeatButton beraksi.

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

Kontrol RepeatButton adalah tombol yang menaikkan peristiwa Klik berulang kali sejak ditekan hingga dirilis. Atur properti Tunda untuk menentukan waktu kontrol RepeatButton menunggu setelah ditekan sebelum mulai mengulangi tindakan klik. Atur properti Interval untuk menentukan waktu antara pengulangan tindakan klik. Waktu untuk kedua properti ditentukan dalam milidetik.

Contoh berikut menunjukkan dua kontrol RepeatButton yang peristiwa Klik masing-masing digunakan untuk menambah dan mengurangi nilai yang diperlihatkan dalam blok teks.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>

private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

Tombol turun bawah Buat

API Penting: kelas DropDownButton, properti Flyout

Buka aplikasi Galeri WinUI 3 dan lihat Menu Dropdown Beraksi.

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

DropDownButton adalah tombol yang menunjukkan chevron sebagai indikator visual bahwa ia memiliki flyout terpasang yang berisi lebih banyak opsi. Ini memiliki perilaku yang sama dengan kontrol Tombol standar dengan flyout; hanya penampilan yang berbeda.

Tombol drop-down mewarisi peristiwa Klik , tetapi Anda biasanya tidak menggunakannya. Sebagai gantinya, Anda menggunakan properti Flyout untuk melampirkan flyout dan memanggil tindakan dengan menggunakan opsi menu di flyout. Flyout terbuka secara otomatis saat tombol diklik. Pastikan untuk menentukan properti Penempatan flyout Anda untuk memastikan penempatan yang diinginkan sehubungan dengan tombol . Algoritma penempatan default mungkin tidak menghasilkan penempatan yang dimaksudkan dalam semua situasi. Untuk informasi selengkapnya tentang flyout, lihat Flyout dan Menu flyout dan bilah menu.

Contoh - tombol drop-down

Contoh ini memperlihatkan cara membuat tombol drop-down dengan flyout yang berisi perintah untuk perataan paragraf dalam kontrol RichEditBox . (Untuk informasi dan kode selengkapnya, lihat Kotak edit kaya).

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

Buat tombol pisahkan

API Penting: kelas SplitButton, Klik peristiwa, properti Flyout

Buka aplikasi Galeri WinUI 3 dan lihat SplitButton beraksi.

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

Kontrol SplitButton memiliki dua bagian yang dapat dipanggil secara terpisah. Satu bagian berperilaku seperti tombol standar dan memanggil tindakan segera. Bagian lain memanggil flyout yang berisi opsi tambahan yang dapat dipilih pengguna.

Catatan

Saat dipanggil dengan sentuhan, tombol pisahkan ber perilaku sebagai tombol drop-down; kedua bagian tombol memanggil flyout. Dengan metode input lainnya, pengguna dapat memanggil setengah tombol secara terpisah.

Perilaku umum untuk tombol pisah adalah:

Saat pengguna mengklik bagian tombol, tangani peristiwa Klik untuk memanggil opsi yang saat ini dipilih di menu drop-down.
Saat drop-down terbuka, tangani pemanggilan item di menu drop-down untuk mengubah opsi mana yang dipilih, lalu panggil. Penting untuk memanggil item flyout karena tombol Klik peristiwa tidak terjadi saat menggunakan sentuhan.

Tip

Ada banyak cara untuk memasukkan item ke drop-down dan menangani pemanggilannya. Jika Anda menggunakan ListView atau GridView, salah satu caranya adalah menangani peristiwa SelectionChanged . Jika Anda melakukan ini, atur SingleSelectionFollowsFocus ke false. Ini memungkinkan pengguna menavigasi opsi menggunakan keyboard tanpa memanggil item pada setiap perubahan.

Contoh - tombol Pisahkan

Contoh ini memperlihatkan cara membuat tombol pisah yang digunakan untuk mengubah warna latar depan teks yang dipilih dalam kontrol RichEditBox . (Untuk informasi dan kode selengkapnya, lihat Kotak edit kaya). Flyout tombol terpisah menggunakan BottomEdgeAlignedLeft sebagai nilai default untuk properti Penempatannya . Anda tidak dapat mengambil alih nilai ini.

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>

public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

Membuat tombol pemisah bolak-bawah

API Penting: Kelas ToggleSplitButton, peristiwa IsCheckedChanged, properti IsChecked

Buka aplikasi Galeri WinUI 3 dan lihat ToggleSplitButton beraksi.

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

Kontrol ToggleSplitButton memiliki dua bagian yang dapat dipanggil secara terpisah. Satu bagian berulah seperti tombol alih yang dapat menyala atau nonaktif. Bagian lain memanggil flyout yang berisi opsi tambahan yang dapat dipilih pengguna.

Tombol pemisah pengalih biasanya digunakan untuk mengaktifkan atau menonaktifkan fitur ketika fitur memiliki beberapa opsi yang dapat dipilih pengguna. Misalnya, di editor dokumen, itu dapat digunakan untuk mengaktifkan atau menonaktifkan daftar, sementara drop-down digunakan untuk memilih gaya daftar.

Catatan

Saat dipanggil dengan sentuhan, tombol alihkan pisahkan ber perilaku sebagai tombol drop-down. Dengan metode input lainnya, pengguna dapat beralih dan memanggil dua bagian tombol secara terpisah. Dengan sentuhan, kedua bagian tombol memanggil flyout. Oleh karena itu, Anda harus menyertakan opsi dalam konten flyout Anda untuk mengaktifkan atau menonaktifkan tombol.

Perbedaan dengan ToggleButton

Tidak seperti ToggleButton, ToggleSplitButton tidak memiliki status yang tidak ditentukan. Akibatnya, Anda harus mengingat perbedaan ini:

ToggleSplitButton tidak memiliki properti IsThreeState atau peristiwa Tidak ditentukan .
Properti ToggleSplitButton.IsChecked hanyalah Boolean, bukan bool> Nullable<.
ToggleSplitButton hanya memiliki peristiwa IsCheckedChanged ; tidak memiliki peristiwa Diperiksa dan Tidak Dicentang terpisah.

Contoh - Tombol alihkan pemisahan

Contoh berikut menunjukkan bagaimana tombol ganti pemisah dapat digunakan untuk mengaktifkan atau menonaktifkan pemformatan daftar, dan mengubah gaya daftar, dalam kontrol RichEditBox . (Untuk informasi dan kode selengkapnya, lihat Kotak edit kaya). Flyout tombol pemisah pengalih menggunakan BottomEdgeAlignedLeft sebagai nilai default untuk properti Penempatannya . Anda tidak dapat mengambil alih nilai ini.

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>

private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

Dapatkan kode sampel

Galeri WinUI: Sampel ini menunjukkan semua kontrol XAML dalam format interaktif.

Tombol

Apakah ini kontrol yang tepat?

Rekomendasi

Teks tombol

Tata letak tombol tunggal yang direkomendasikan

Tombol kembali

Contoh

UWP dan WinUI 2

Membuat tombol

Interaksi tombol

Konten tombol

Buat tombol ulangi

Tombol turun bawah Buat

Contoh - tombol drop-down

Buat tombol pisahkan

Contoh - tombol Pisahkan

Membuat tombol pemisah bolak-bawah

Perbedaan dengan ToggleButton

Contoh - Tombol alihkan pemisahan

Dapatkan kode sampel

Saran dan Komentar

Sumber Daya Tambahan:

Tombol

Apakah ini kontrol yang tepat?

Rekomendasi

Teks tombol

Tata letak tombol tunggal yang direkomendasikan

Tombol kembali

Contoh

UWP dan WinUI 2

Membuat tombol

Interaksi tombol

Konten tombol

Buat tombol ulangi

Tombol turun bawah Buat

Contoh - tombol drop-down

Buat tombol pisahkan

Contoh - tombol Pisahkan

Membuat tombol pemisah bolak-bawah

Perbedaan dengan ToggleButton

Contoh - Tombol alihkan pemisahan

Dapatkan kode sampel

Artikel terkait

Saran dan Komentar

Sumber Daya Tambahan: