Buttons

Tlačítko dává uživateli způsob, jak aktivovat okamžitou akci. Některá tlačítka se specializují na konkrétní úkoly, jako je navigace, opakované akce nebo prezentace nabídek.

framework Extensible Application Markup Language (XAML) poskytuje standardní ovládací prvek tlačítka a také několik specializovaných ovládacích prvků tlačítek.

Řízení	Description
tlačítko	Tlačítko, které zahájí okamžitou akci. Lze použít s událostí Click nebo s vazbou příkazu Command.
OpakovatTlačítko	Tlačítko, které při stisknutí nepřetržitě vyvolává událost Click.
tlačítko pro hypertextový odkaz	Tlačítko, které je ve stylu hypertextového odkazu a používá se pro navigaci. Další informace o hypertextových odkazech najdete v tématu Hypertextové odkazy.
Rozevírací tlačítko	Tlačítko s dvojitou šipkou pro otevření připojeného informačního rámečku
Rozdělovací tlačítko	Tlačítko se dvěma stranami. Jedna strana zahájí akci a druhá otevře nabídku.
PřepínacíRozdělovacíTlačítko	Přepínací tlačítko se dvěma stranami. Jedna strana zapne nebo vypne a druhá otevře nabídku.
přepínací tlačítko	Tlačítko, které může být zapnuté nebo vypnuté.

Je to správná kontrola?

Pomocí ovládacího prvku Button umožníte uživateli zahájit okamžitou akci, například odeslat formulář.

Nepoužívejte ovládací prvek Button, pokud je akce přejít na jinou stránku; místo toho použijte ovládací prvek HyperlinkButton. Další informace o hypertextových odkazech najdete v tématu Hypertextové odkazy.

Důležité

Pro navigaci v průvodci použijte tlačítka s popiskem Zpět a Další. Pro jiné typy zpětné navigace nebo navigace na vyšší úroveň použijte tlačítko zpět.

Použijte ovládací prvek RepeatButton, kdy uživatel může chtít aktivovat akci opakovaně. Použijte například ovládací prvek RepeatButton ke zvýšení nebo snížení hodnoty v čítači.

Použijte ovládací prvek DropDownButton, když má tlačítko podokno, které obsahuje další možnosti. Výchozí šipka poskytuje vizuální označení, že tlačítko obsahuje rozbalovací nabídku.

Ovládací prvek SplitButton použijte, pokud chcete, aby uživatel mohl zahájit okamžitou akci nebo si vybrat z dalších možností nezávisle na sobě.

Ovládací prvek ToggleButton použijte, pokud chcete, aby uživatel mohl okamžitě přepínat mezi dvěma vzájemně se vylučujínými stavy a tlačítko je nejvhodnější pro vaše potřeby uživatelského rozhraní. Pokud vaše uživatelské rozhraní nevyužívá tlačítko, může být vhodnější použít AppBarToggleButton, CheckBox, RadioButtonnebo ToggleSwitch.

Recommendations

Ujistěte se, že je účel a stav tlačítka pro uživatele jasný.
Pokud existuje více tlačítek pro stejné rozhodnutí (například v potvrzovací dialogovém okně), prezentujte tlačítka potvrzení v tomto pořadí, kde [Do it] a [Don't do it] jsou specifické odpovědi na hlavní instrukce:
- OK/[Provést]/Ano
  - [Nedělejte to]/Ne
  - Zrušit
Zobrazte uživateli pouze jedno nebo dvě tlačítka najednou, například Přijmout a Zrušit. Pokud potřebujete uživateli zpřístupnit další akce, zvažte použití zaškrtávacích políček nebo přepínačů, ze kterých může uživatel vybrat akce, s jedním příkazovým tlačítkem k aktivaci těchto akcí.
U akce, která musí být dostupná na více stránkách v aplikaci, místo duplikování tlačítka na více stránkách zvažte použití dolního panelu aplikace.

Text tlačítka

Obsah tlačítka je obvykle text. Při návrhu tohoto textu použijte následující doporučení:

Použijte stručný, specifický, vysvětlující text, který jasně popisuje akci, kterou tlačítko provádí. Text tlačítka je obvykle jedno slovo, které je sloveso.
Použijte výchozí písmo, pokud pokyny vaší značky neřeknou, abyste použili něco jiného.
V případě kratšího textu nepoužívejte úzká příkazová tlačítka s minimální šířkou 120 pixelů.
U delšího textu nepoužívejte široká příkazová tlačítka omezením textu na maximální délku 26 znaků.
Pokud je textový obsah tlačítka dynamický (to znamená, že je lokalizovaný), zvažte, jak se změní velikost tlačítka a co se stane s ovládacími prvky kolem něj.

Je potřeba opravit: Tlačítka s textem, který se nevejde.
možnost 1: Zvětšete šířku tlačítka, umístěte tlačítka do sloupce a zalomte text, pokud je délka textu větší než 26 znaků.
Možnost 2: Zvětšete výšku tlačítka a zalamte text.

Doporučené rozložení s jedním tlačítkem

Pokud vaše rozložení vyžaduje jenom jedno tlačítko, mělo by být zarovnané doleva nebo doprava na základě kontextu kontejneru.

Dialogy s jedním tlačítkem by měly zarovnat tlačítko doprava. Pokud dialogové okno obsahuje pouze jedno tlačítko, ujistěte se, že tlačítko provádí bezpečnou nedestruktivní akci. Pokud použijete ContentDialog a zadáte jedno tlačítko, automaticky se zarovná doprava.
Pokud se tlačítko zobrazí v uživatelském rozhraní kontejneru (například v informačním rámečku, v informačním rámečku nebo v položce zobrazení seznamu), měli byste tlačítko v kontejneru zarovnat doprava.
Na stránkách, které obsahují jedno tlačítko (například tlačítko Použít v dolní části stránky nastavení), byste měli tlačítko zarovnat doleva. Tím zajistíte, že se tlačítko zarovná se zbytkem obsahu stránky.

Tlačítka Zpět

Tlačítko Zpět je systémový prvek uživatelského rozhraní, který umožňuje zpětnou navigaci prostřednictvím zpětného zásobníku nebo historie navigace uživatele. Nemusíte vytvářet vlastní tlačítko Zpět, ale možná budete muset udělat nějakou práci, abyste umožnili dobrou navigaci vzad. Další informace najdete v tématu Historie navigace a zpětná navigace pro aplikace pro Windows.

Examples

V tomto příkladu se používají tři tlačítka, Uložit, Neukládata Zrušit, v dialogovém okně, které se ptá uživatelů, zda chtějí uložit svou práci.

Vytvoření tlačítka

důležitá rozhraní API:Třída tlačítka, událost Click, vlastnost Command, vlastnost Content

Otevření aplikace Galerie WinUI 3 a zobrazení tlačítek v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Tento příklad ukazuje tlačítko, které reaguje na kliknutí.

Vytvořte tlačítko v XAML.

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

Nebo vytvořte tlačítko v kódu.

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

Zpracujte událost Click.

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

Interakce s tlačítkem

Když klepnete prstem nebo perem na ovládací prvek tlačítka , nebo stisknete levé tlačítko myši, pokud je ukazatel nad ním, tlačítko vyvolá událost Click. Pokud má tlačítko zaměření klávesnice, stisknutím klávesy Enter nebo mezerníku se také vyvolá událost Kliknutí.

Obecně není možné zpracovat nízkoúrovňové události PointerPressed na objektu Button, protože místo toho má chování Click. Další informace najdete v tématu Události a přehled směrovaných událostí.

Změnou vlastnosti ClickMode můžete změnit způsob, jakým tlačítko vyvolává událost Click. Výchozí hodnota módu kliknutí je uvolnění, ale můžete také nastavit hodnotu módu kliknutí na najetí nebo stisknutí. Pokud je ClickModenajetím myší, událost Click nelze vyvolat pomocí klávesnice nebo dotykem.

Obsah tlačítka

Button je ovládací prvek obsahu třídy ContentControl. Jeho vlastnost obsahu XAML je Content, která umožňuje syntaxi jako pro XAML: <Button>A button's content</Button>. Jako obsah tlačítka můžete nastavit libovolný objekt. Pokud je obsah UIElement objekt, zobrazí se na tlačítku. Pokud je obsah jiným typem objektu, zobrazí se jeho řetězcová reprezentace na tlačítku.

Obsah tlačítka je obvykle text. Při návrhu tohoto textu postupujte podle doporučení k textu tlačítka uvedených dříve.

Můžete také přizpůsobit vizuály, které tvoří vzhled tlačítka. Můžete například nahradit text ikonou nebo použít ikonu vedle textu.

Tady je StackPanel, který obsahuje obrázek a text a je nastaven jako obsah tlačítka.

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

Tlačítko vypadá takto.

Vytvořit opakovací tlačítko

důležitá rozhraní API:třída RepeatButton, Click event, Content – vlastnost

otevřete aplikaci Galerie WinUI 3 a podívejte se na tlačítko RepeatButton v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Ovládací prvek RepeatButton je tlačítko, které opakovaně vyvolává Click události od doby, kdy se stiskne, dokud se neuvolní. Nastavte vlastnost Delay pro určení času, kdy RepeatButton ovládací prvek čeká po stisknutí, než začne klikat znovu. Nastavte vlastnost Interval, k určení času mezi opakováním akce kliknutí. Časy pro obě vlastnosti jsou zadané v milisekundách.

Následující příklad ukazuje dva RepeatButton ovládací prvky, jejichž odpovídající Click události se používají pro zvýšení a snížení hodnoty zobrazené v textovém bloku.

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

Vytvořit rozevírací tlačítko

Důležitá rozhraní API: třída DropDownButton, vlastnost Flyout

Otevřete aplikaci Galerie WinUI 3 a podívejte se na rozevírací tlačítko v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

DropDownButton je tlačítko, které zobrazuje šipku jako vizuální indikátor, že má připojený rozbalovací panel, který obsahuje další možnosti. Má stejné chování jako standardní Button ovládací prvek s roletkou; pouze vzhled se liší.

Rozbalovací tlačítko dědí událost Click, ale obvykle ji nepoužíváte. Místo toho použijete vlastnost informačního rámečku k připojení informačního rámečku a vyvolání akcí pomocí možností nabídky v informačním rámečku. Po kliknutí na tlačítko se automaticky otevře informační panel. Nezapomeňte zadat vlastnost Umístění informačního rámečku, abyste zajistili požadované umístění vzhledem k tlačítku. Výchozí algoritmus umístění nemusí ve všech situacích vytvořit zamýšlené umístění. Další informace o vyskakovacích oknech najdete ve vyskakovacím okně a menu flyoutu a liště menu.

Příklad – rozevírací tlačítko

Tento příklad ukazuje, jak vytvořit rozevírací tlačítko s informačním rámečkem, který obsahuje příkazy pro zarovnání odstavce v ovládacím prvku RichEditBox. (Další informace a kód najdete v bohatém textovém poli).

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

Vytvořte rozdělené tlačítko

důležité API: třída SplitButton, událost Kliknutí, vlastnost Flyout

Otevřete aplikaci Galerie WinUI 3 a podívejte se na tlačítko SplitButton v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Ovládací prvek SplitButton má dvě části, které lze vyvolat samostatně. Jedna část se chová jako standardní tlačítko a vyvolá okamžitou akci. Druhá část vyvolá informační nabídku, která obsahuje další možnosti, ze které si uživatel může vybrat.

Poznámka:

Při vyvolání dotykem se rozdělené tlačítko chová jako rozevírací tlačítko; obě poloviny tlačítka otevřou rozevírací panel. S jinými metodami vstupu může uživatel vyvolat jednu polovinu tlačítka samostatně.

Typické chování tlačítka rozdělení je:

Když uživatel klikne na část tlačítka, zpracujte událost Kliknutím na vyvoláte možnost, která je aktuálně vybrána v rozevíracím seznamu.
Když je rozevírací seznam otevřený, zpracujte vyvolání položek v rozevíracím seznamu, abyste změnili vybranou možnost a pak ji vyvolali. Je důležité vyvolat rozbalovací položku, protože u tlačítka při použití dotykového ovládání nedochází k události kliknutí.

Návod

Existuje mnoho způsobů, jak umístit položky do rozevíracího seznamu a spravovat jejich výběr. Pokud používáte ListView nebo GridView, jedním ze způsobů je zpracování události SelectionChanged. Pokud to uděláte, nastavte hodnotu SingleSelectionFollowsFocus na false. To umožňuje uživatelům procházet možnosti pomocí klávesnice bez vyvolání položky při každé změně.

Příklad – tlačítko Rozdělit

Tento příklad ukazuje, jak vytvořit tlačítko rozdělení, které slouží ke změně barvy popředí vybraného textu v ovládacím prvku RichEditBox. (Další informace a kód najdete v bohatém textovém poli). Kontextové pole tlačítka Split používá BottomEdgeAlignedLeft jako výchozí hodnotu vlastnosti Placement. Tuto hodnotu nemůžete přepsat.

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

Vytvoření přepínacího tlačítka rozdělení

důležitá rozhraní API: ToggleSplitButton – třída, IsCheckedChanged – událost, Vlastnost IsChecked

Otevřete aplikaci Galerie WinUI 3 a podívejte se na tlačítko ToggleSplitButton v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Ovládací prvek ToggleSplitButton má dvě části, které lze vyvolat samostatně. Jedna část se chová jako přepínač, který může být zapnutý nebo vypnutý. Druhá část vyvolá informační nabídku, která obsahuje další možnosti, ze které si uživatel může vybrat.

Přepínač rozděleného tlačítka se obvykle používá k povolení nebo zakázání funkce, pokud má funkce více možností, ze které si uživatel může vybrat. V editoru dokumentů se dá například použít k zapnutí nebo vypnutí seznamů, zatímco rozevírací seznam slouží k výběru stylu seznamu.

Poznámka:

Při vyvolání dotykem se přepínací rozdělovač chová jako rozevírací tlačítko. S jinými metodami vstupu může uživatel přepínat a vyvolat dvě poloviny tlačítka samostatně. Při dotykovém ovládání obě poloviny tlačítka vyvolají rozbalovací panel. Proto musíte do kontextového obsahu zahrnout možnost, která tlačítko zapne nebo vypne.

Rozdíly u ToggleButtonu

Na rozdíl od ToggleButton, ToggleSplitButton nemá neurčitý stav. V důsledku toho byste měli mít na paměti tyto rozdíly:

ToggleSplitButton nemá vlastnost IsThreeState ani událost Indeterminate.
Vlastnost ToggleSplitButton.IsChecked je pouze logická hodnota, nikoli Nullable<bool>.
ToggleSplitButton má pouze událost IsCheckedChanged; neobsahuje samostatné události Checked a Unchecked.

Příklad – přepínací tlačítko pro rozdělení

Následující příklad ukazuje, jak lze pomocí přepínacího split tlačítka zapnout nebo vypnout formátování seznamu a změnit styl seznamu v ovládacím prvku RichEditBox. (Další informace a kód najdete v bohatém textovém poli). Kontextové okno přepínacího rozděleného tlačítka používá BottomEdgeAlignedLeft jako výchozí hodnotu pro svou vlastnost umístění. Tuto hodnotu nemůžete přepsat.

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

Univerzální platforma Windows a WinUI 2

Důležité

Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

Ovládací prvky DropDownButton, SplitButton a ToggleSplitButton pro aplikace UWP jsou součástí WinUI 2. Další informace, včetně pokynů k instalaci, najdete v tématu WinUI 2. Rozhraní API pro tyto ovládací prvky existují v oborech názvů Windows.UI.Xaml.Controls i Microsoft.UI.Xaml.Controls.

rozhraní API UWP:Button class, RepeatButton class, HyperlinkButton class, DropDownButton, SplitButton, ToggleSplitButton, ToggleButton, Click event, Command property, Content property
WinUI 2 APIS:DropDownButton, SplitButton, ToggleSplitButton
Otevřete aplikaci Galerie WinUI 2 a podívejte se na tlačítko v akci. Aplikace WinUI 2 Gallery obsahuje interaktivní ukázky většiny ovládacích prvků, funkcí a vlastností WinUI 2. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 . WinUI 2.2 nebo novější obsahuje novou šablonu pro tyto ovládací prvky, které používají zaoblené rohy. Další informace najdete v tématu Poloměr rohu.

Pokud chcete použít kód v tomto článku s WinUI 2, použijte alias v JAZYCE XAML (používáme muxc) k reprezentaci rozhraní API knihovny uživatelského rozhraní Systému Windows, která jsou součástí vašeho projektu. Další informace najdete v tématu Začínáme s WinUI 2 .

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

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

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-11-25

Sdílet prostřednictvím

Buttons

Je to správná kontrola?

Recommendations

Text tlačítka

Doporučené rozložení s jedním tlačítkem

Tlačítka Zpět

Examples

Vytvoření tlačítka

Interakce s tlačítkem

Obsah tlačítka

Vytvořit opakovací tlačítko

Vytvořit rozevírací tlačítko

Příklad – rozevírací tlačítko

Vytvořte rozdělené tlačítko

Příklad – tlačítko Rozdělit

Vytvoření přepínacího tlačítka rozdělení

Rozdíly u ToggleButtonu

Příklad – přepínací tlačítko pro rozdělení

Univerzální platforma Windows a WinUI 2

Související články

Váš názor

Další materiály