Buttons

Przycisk pozwala użytkownikowi na uruchomienie natychmiastowego działania. Niektóre przyciski są wyspecjalizowane dla określonych zadań, takich jak nawigacja, powtarzające się akcje lub prezentowanie menu.

Platforma Extensible Application Markup Language (XAML) udostępnia standardową kontrolkę przycisku oraz kilka wyspecjalizowanych kontrolek przycisków.

Kontrola	Description
przycisk	Przycisk, który inicjuje natychmiastową akcję. Może być używany ze zdarzeniem Click lub powiązaniem polecenia .
RepeatButton (Przycisk powtarzania)	Przycisk, który wywołuje zdarzenie Kliknięcie w sposób ciągły, gdy jest wciśnięty.
PrzyciskHiperłącze	Przycisk, który jest stylizowany jak hiperlink i używany do nawigacji. Aby uzyskać więcej informacji na temat hiperlinków, zobacz Hiperlinki.
PrzyciskOpadający	Przycisk ze strzałką, aby otworzyć dołączone okno podręczne.
Przyciski rozwijane	Przycisk z dwoma bokami. Jedna strona inicjuje akcję, a druga otwiera menu.
Przycisk przełączania	Przełącznik z dwoma bokami. Jedna strona włącza/wyłącza, a druga otwiera menu.
Przełącznik	Przycisk, który może być włączony lub wyłączony.

Czy jest to właściwa kontrola?

Użyj kontrolki Przycisk , aby umożliwić użytkownikowi zainicjowanie natychmiastowej akcji, takiej jak przesłanie formularza.

Nie używaj kontrolki przycisku, gdy akcja ma przejść do innej strony; zamiast tego użyj kontrolki HyperlinkButton. Aby uzyskać więcej informacji na temat hiperlinków, zobacz Hiperlinki.

Ważne

W przypadku nawigacji kreatora użyj przycisków oznaczonych etykietą Back i Next. W przypadku innych typów nawigacji wstecz lub nawigacji do wyższego poziomu użyj przycisku wstecz.

Użyj kontrolki RepeatButton , gdy użytkownik może chcieć wielokrotnie wyzwalać akcję. Na przykład użyj kontrolki RepeatButton , aby zwiększać lub dekrementować wartość w liczniku.

Użyj kontrolki DropDownButton , gdy przycisk ma okno wysuwane zawierające więcej opcji. Domyślny cudzysłów zapewnia wizualne wskazanie, że przycisk zawiera okno wysuwane.

Użyj kontrolki SplitButton , jeśli chcesz, aby użytkownik mógł zainicjować natychmiastową akcję lub niezależnie wybrać jedną z dodatkowych opcji.

Użyj kontrolki ToggleButton , jeśli chcesz, aby użytkownik mógł natychmiast przełączać się między dwoma wzajemnie wykluczających się stanami, a przycisk jest najlepszym rozwiązaniem dla potrzeb interfejsu użytkownika. Jeśli Twój interfejs użytkownika nie odnosi korzyści z przycisku, lepszym wyborem może być użycie AppBarToggleButton, CheckBox, RadioButtonlub ToggleSwitch.

Rekomendacje

Upewnij się, że cel i stan przycisku są jasne dla użytkownika.
Jeśli istnieje wiele przycisków dla tej samej decyzji (na przykład w oknie dialogowym potwierdzenia), należy przedstawić przyciski zatwierdzania w następującej kolejności, gdzie [Zrób to] i [Nie rób tego] są konkretnymi odpowiedziami na główne polecenie:
- OK/[Zrób to]/Tak
  - [Nie rób tego]/Nie
  - Anuluj
Uwidaczniać tylko jeden lub dwa przyciski użytkownikowi naraz, na przykład Akceptuj i Anuluj. Jeśli chcesz udostępnić użytkownikowi więcej czynności, rozważ użycie pól wyboru lub przycisków radiowych , z których użytkownik może wybrać czynności, za pomocą jednego przycisku polecenia, aby je uruchomić.
W przypadku akcji, która musi być dostępna na wielu stronach w aplikacji, zamiast duplikować przycisk na wielu stronach, rozważ użycie dolnego paska aplikacji.

Tekst przycisku

Zawartość przycisku jest zwykle tekstem. Podczas projektowania tego tekstu użyj następujących zaleceń:

Użyj zwięzłego, konkretnego tekstu objaśnianego, który wyraźnie opisuje akcję wykonywaną przez przycisk. Zazwyczaj tekst przycisku to pojedyncze słowo, które jest czasownikiem.
Użyj czcionki domyślnej, chyba że wytyczne dotyczące marki informują o użyciu czegoś innego.
Aby skrócić tekst, unikaj wąskich przycisków poleceń przy użyciu minimalnej szerokości przycisku wynoszącej 120 pikseli.
W przypadku dłuższego tekstu unikaj szerokich przycisków poleceń, ograniczając tekst do maksymalnej długości 26 znaków.
Jeśli tekstowa zawartość przycisku jest dynamiczna (czyli jest to zlokalizowane), rozważ, jak zmieni się rozmiar przycisku i co się stanie z kontrolkami dookoła.

Należy rozwiązać problem: Przyciski z zbyt długim tekstem.
Opcja 1. Zwiększ szerokość przycisku, ustaw przyciski pionowo i zawijaj tekst, jeśli długość tekstu jest większa niż 26 znaków.
Opcja 2: Zwiększ wysokość przycisku i zawij tekst.

Zalecany układ pojedynczego przycisku

Jeśli układ wymaga tylko jednego przycisku, powinien być wyrównany do lewej lub prawej strony w zależności od kontekstu kontenera.

Okna dialogowe z tylko jednym przyciskiem powinny wyrównać do prawej przycisku. Jeśli okno dialogowe zawiera tylko jeden przycisk, upewnij się, że przycisk wykonuje bezpieczną, niezniszczającą akcję. Jeśli używasz ContentDialog i określisz jeden przycisk, zostanie on automatycznie wyrównany do prawej.
Jeśli przycisk pojawi się w jednostce interfejsu użytkownika (na przykład w powiadomieniu wyskakującym, wysuwanym lub w pozycji widoku listy), należy wyrównać go do prawej strony kontenera.
Na stronach zawierających jeden przycisk (na przykład przycisk Zastosuj w dolnej części strony ustawień) przycisk należy wyrównać do lewej. Dzięki temu przycisk jest zgodny z pozostałą zawartością strony.

Przyciski Wstecz

Przycisk Wstecz jest elementem interfejsu użytkownika dostarczanym przez system, który umożliwia nawigację wstecz za pośrednictwem stosu wstecz lub historii nawigacji użytkownika. Nie musisz tworzyć własnego przycisku wstecz, ale może być konieczne wykonanie pewnych czynności, aby zapewnić dobre doświadczenie nawigacji wstecz. Aby uzyskać więcej informacji, zobacz Historia nawigacji i nawigacja wstecz dla aplikacji systemu Windows.

Przykłady

W tym przykładzie użyto trzech przycisków, Zapisz, Nie zapisuj i Anuluj w oknie dialogowym z pytaniem użytkowników, czy chcą zapisać swoją pracę.

Utwórz przycisk

ważne interfejsy API:klasa przycisku, zdarzenie kliknięcia, właściwość polecenia , właściwość zawartości

Otwórz aplikację Galeria WinUI 3 i wyświetl przyciski w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym przykładzie pokazano przycisk, który odpowiada na kliknięcie.

Utwórz przycisk w języku XAML.

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

Możesz też utworzyć przycisk w kodzie.

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

Obsłuż zdarzenie Kliknij.

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();
}

Interakcja z przyciskiem

Po stuknięciu palcem lub rysikiem kontrolki Button, albo naciśnięciu lewego przycisku myszy, gdy kursor znajduje się nad nią, przycisk wywołuje zdarzenie Kliknięcie. Jeśli przycisk ma fokus klawiatury, naciśnięcie Enter lub spacja powoduje również wywołanie zdarzenia Kliknij.

Zazwyczaj nie można obsługiwać zdarzeń PointerPressed na obiekcie Button, ponieważ ma on zachowanie Click. Aby uzyskać więcej informacji, zobacz Zdarzenia i zdarzenia routowane omówienie.

Możesz zmienić sposób, w jaki przycisk zgłasza zdarzenie Kliknij, zmieniając właściwość ClickMode. Wartość domyślna ClickMode to Zwolnienie, ale można również ustawić wartość ClickMode przycisku na Najechanie lub Naciśnięcie. Jeśli ClickMode jest Unoszenie, nie można wywołać zdarzenia Kliknięcie za pomocą klawiatury lub dotyku.

Zawartość przycisku

Button to kontrolka zawartości klasy ContentControl. Właściwość zawartości w języku XAML to Content, co pozwala na użycie takiej składni w XAML: <Button>A button's content</Button>. Dowolny obiekt można ustawić jako zawartość przycisku. Jeśli zawartość jest obiektem UIElement , jest renderowana w przycisku. Jeśli zawartość jest innym typem obiektu, jego reprezentacja ciągu jest wyświetlana w przycisku.

Zawartość przycisku jest zwykle tekstem. Podczas projektowania tego tekstu kieruj się zaleceniami dotyczącymi tekstu przycisku , które zostały wymienione wcześniej.

Możesz również dostosować wizualizacje, które tworzą wygląd przycisku. Możesz na przykład zastąpić tekst ikoną lub użyć ikony oprócz tekstu.

W tym miejscu StackPanel, który zawiera obraz i tekst, jest ustawiany jako zawartość przycisku.

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

Przycisk wygląda następująco.

Tworzenie przycisku powtarzania

ważne interfejsy API:repeatButton,klasy , , właściwość content

Otwórz aplikację Galeria WinUI 3 i zobacz element RepeatButton w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kontrolka RepeatButton jest przyciskiem, który wywołuje kliknięcie zdarzenia wielokrotnie od momentu jego naciśnięcia do momentu jego wydania. Ustaw właściwość Delay , aby określić czas oczekiwania kontrolki RepeatButton po naciśnięciu jej przed rozpoczęciem powtarzania akcji kliknięcia. Ustaw właściwość Interval , aby określić czas między powtórzeniami akcji kliknięcia. Czasy dla obu właściwości są określane w milisekundach.

W poniższym przykładzie pokazano dwa kontrolki RepeatButton, których odpowiednie zdarzenia Click służą do zwiększania i zmniejszania wartości wyświetlanej w bloku tekstowym.

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

Utwórz przycisk rozwijany

Ważne interfejsy API: klasa DropDownButton, właściwość Flyout

Otwórz aplikację Galeria WinUI 3 i zobacz element DropdownButton w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

DropDownButton to przycisk, który wyświetla symbol rozwijania jako wizualny wskaźnik, że ma dołączone wysuwane menu, które zawiera więcej opcji. Ma to samo zachowanie co standardowy przycisk kontrolki z wysuwanym elementem; tylko wygląd jest inny.

Przycisk listy rozwijanej dziedziczy zdarzenie Kliknij, ale zazwyczaj go nie używasz. Zamiast tego należy użyć właściwości Wysuwane, aby dołączyć wysuwane i wywołać akcje przy użyciu opcji menu w oknie wysuwanym. Okno rozwijane otwiera się automatycznie po kliknięciu przycisku. Upewnij się, że określono właściwość Placement wysuwanego, aby zapewnić pożądane umiejscowienie w odniesieniu do przycisku. Domyślny algorytm umieszczania może nie zapewniać zamierzonego rezultatu we wszystkich sytuacjach. Aby uzyskać więcej informacji na temat paneli wysuwanych, zobacz Panel wysuwany i menu wysuwane oraz pasek menu.

Przykład — przycisk listy rozwijanej

W tym przykładzie pokazano, jak utworzyć przycisk listy rozwijanej z wysuwanym menu zawierającym polecenia wyrównania akapitu w kontrolce RichEditBox. (Aby uzyskać więcej informacji i kod, zobacz pole edycji wzbogaconej).

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

Utwórz przycisk podziału

Ważne interfejsy API: klasa SplitButton, zdarzenie Click, właściwość Flyout

Otwórz aplikację Galeria WinUI 3 i zobacz element SplitButton w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kontrolka SplitButton ma dwie części, które można wywołać oddzielnie. Jedna część zachowuje się jak standardowy przycisk i wywołuje natychmiastową akcję. Druga część wywołuje okno wysuwane zawierające dodatkowe opcje, które użytkownik może wybrać.

Uwaga / Notatka

Po wywołaniu za pomocą dotyku przycisk podzielony zachowuje się jak przycisk listy rozwijanej; obie połowy przycisku wywołują menu podręczne. W przypadku innych metod wprowadzania użytkownik może wywołać jedną połowę przycisku oddzielnie.

Typowym zachowaniem przycisku podziału jest:

Gdy użytkownik kliknie część przycisku, obsłuż zdarzenie Kliknij, aby wywołać opcję aktualnie wybraną na liście rozwijanej.
Po otwarciu listy rozwijanej obsłuż wywołanie elementów na liście rozwijanej, aby zmienić wybraną opcję, a następnie wywołać ją. Należy wywołać element wysuwany, ponieważ zdarzenie przycisku Click nie ma miejsca podczas korzystania z funkcji dotykowej.

Wskazówka

Istnieje wiele sposobów umieszczania elementów na liście rozwijanej i obsługi ich wywołania. Jeśli używasz ListView lub GridView, jednym ze sposobów jest obsługa zdarzenia SelectionChanged. Jeśli to zrobisz, ustaw SingleSelectionFollowsFocus na false. Dzięki temu użytkownicy mogą nawigować po opcjach za pomocą klawiatury bez wywoływania elementu w każdej zmianie.

Przykład — przycisk Podziel

W tym przykładzie pokazano, jak utworzyć przycisk podziału używany do zmiany koloru pierwszego planu zaznaczonego tekstu w kontrolce RichEditBox . (Aby uzyskać więcej informacji i kod, zobacz pole edycji wzbogaconej). Okno wysuwane przycisku rozwijania używa BottomEdgeAlignedLeft jako wartości domyślnej dla właściwości Położenie. Nie można zastąpić tej wartości.

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

Utwórz przycisk przełącznika z opcją rozdzielenia

ważne interfejsy API: klasa ToggleSplitButton, zdarzenie IsCheckedChanged, właściwość IsChecked

Otwórz aplikację Galeria WinUI 3 i zobacz działanie ToggleSplitButton

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Kontrolka ToggleSplitButton ma dwie części, które można wywołać oddzielnie. Jedna część zachowuje się jak przycisk przełącznika, który może być włączony lub wyłączony. Druga część wywołuje okno wysuwane zawierające dodatkowe opcje, które użytkownik może wybrać.

Przycisk z przełączanym podziałem jest zwykle używany do włączania lub wyłączania funkcji, gdy dostępnych jest wiele opcji, które użytkownik może wybrać. Na przykład w edytorze dokumentów może służyć do włączania lub wyłączania list, podczas gdy lista rozwijana służy do wybierania stylu listy.

Uwaga / Notatka

Po naciśnięciu za pomocą dotyku przycisk podzielanego przełącznika działa jako przycisk listy rozwijanej. W przypadku innych metod wprowadzania użytkownik może przełączać i wywoływać dwie połowy przycisku oddzielnie. Przy dotyku obie połowy przycisku otwierają menu wysuwane. W związku z tym należy dołączyć opcję w zawartości panelu wysuwanego do włączania lub wyłączania przycisku.

Różnice dotyczące przycisku przełączającego

W przeciwieństwie do ToggleButton, ToggleSplitButton nie ma stanu nieokreślonego. W związku z tym należy pamiętać o tych różnicach:

toggleSplitButton nie ma właściwości IsThreeState lub Nieokreślone zdarzenie.
Właściwość ToggleSplitButton.IsChecked jest tylko wartością logiczną, a nie wartością logiczną nullable<>.
ToggleSplitButton ma tylko zdarzenie IsCheckedChanged; nie ma oddzielnych zdarzeń Checked i Unchecked.

Przykład — przełącz przycisk podziału

W poniższym przykładzie pokazano, jak można użyć przycisku przełączającego w celu włączenia lub wyłączenia formatowania listy oraz zmiany stylu listy w kontrolce RichEditBox. (Aby uzyskać więcej informacji i kod, zobacz pole edycji wzbogaconej). Wysuwany przycisk podziału przełącznika używa BottomEdgeAlignedLeft jako wartości domyślnej właściwości Umieszczanie. Nie można zastąpić tej wartości.

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

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

Kontrolki DropDownButton, SplitButton i ToggleSplitButton dla aplikacji platformy UWP są uwzględniane w ramach interfejsu WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tych kontrolek istnieją zarówno w przestrzeniach nazw Windows.UI.Xaml.Controls , jak i Microsoft.UI.Xaml.Controls .

interfejsy API platformy UWP:klasa Button, klasa RepeatButton, klasa HyperlinkButton, klasa DropDownButton, klasa SplitButton, klasa ToggleSplitButton, klasa ToggleButton, zdarzenie Click, właściwość Command, właściwość Content
Interfejsy API WinUI 2:DropDownButton, SplitButton, ToggleSplitButton
Otwórz aplikację Galeria WinUI 2 i zobacz przycisk w akcji. Aplikacja z galerii WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tych kontrolek korzystających z zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Przycisk klasy
przyciski radiowe
Pola wyboru
przełączniki dźwigniowe

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-11-25

Udostępnij przez

Buttons

Czy jest to właściwa kontrola?

Rekomendacje

Tekst przycisku

Zalecany układ pojedynczego przycisku

Przyciski Wstecz

Przykłady

Utwórz przycisk

Interakcja z przyciskiem

Zawartość przycisku

Tworzenie przycisku powtarzania

Utwórz przycisk rozwijany

Przykład — przycisk listy rozwijanej

Utwórz przycisk podziału

Przykład — przycisk Podziel

Utwórz przycisk przełącznika z opcją rozdzielenia

Różnice dotyczące przycisku przełączającego

Przykład — przełącz przycisk podziału

UwP i WinUI 2

Powiązane artykuły

Sprzężenie zwrotne

Dodatkowe źródła