Buttons

A gomb lehetővé teszi a felhasználó számára, hogy azonnali műveletet aktiváljon. Egyes gombok speciális feladatokra, például navigációra, ismétlődő műveletekre vagy menük bemutatására szolgálnak.

A Bővíthető alkalmazásjelölési nyelv (XAML) keretrendszer szabványos gombvezérlőt és számos speciális gombvezérlőt biztosít.

Vezérlő	Description
gomb	Azonnali műveletet kezdeményező gomb. Használható Click eseménnyel vagy Command kapcsolással.
IsmétlőGomb	Egy gomb, amely lenyomva tartva folyamatosan Kattintás eseményre.
Hiperhivatkozás gomb	Navigációra használt és hivatkozásként formázott gomb. További információ a hivatkozásokról: Hivatkozások.
LegördülőGomb	Egy nyíllal ellátott gomb egy csatlakoztatott felugró ablak megnyitásához.
OsztottGomb	Egy gomb két oldallal. Az egyik oldal elindít egy műveletet, a másik oldalon pedig egy menü nyílik meg.
KapcsolóOszlógomb	Váltógomb két oldallal. Az egyik oldal be- és kikapcsol, a másik oldalon pedig egy menü nyílik meg.
Kapcsológomb	Egy gomb, amely be- vagy kikapcsolható.

Ez a megfelelő vezérlő?

A gomb vezérlővel azonnali műveletet kezdeményezhet, például űrlapot küldhet.

Ne használjon gombot vezérlőelemet, ha a művelet egy másik lapra való navigálás; ehelyett használjon HyperlinkButton vezérlőelemet. További információ a hivatkozásokról: Hivatkozások.

Fontos

Varázslónavigációhoz használja a Vissza és a Következő feliratú gombokat. Ha más típusú visszamenőleges navigációt vagy felső szintű navigációt szeretne használni, használja a vissza gombot.

Használjon RepeatButton vezérlőelemet, amikor a felhasználó esetleg ismétlődően szeretne aktiválni egy műveletet. Használjon például egy RepeatButton vezérlőelemet egy számláló értékének növeléséhez vagy csökkenéséhez.

Használjon DropDownButton vezérlőelemet, ha a gomb egy több lehetőséget kínáló felugró menüvel rendelkezik. Az alapértelmezett chevron vizuális jelzést ad arról, hogy a gomb tartalmaz egy lenyíló menüt.

Egy SplitButton vezérlőelemet akkor használjon, ha azt szeretné, hogy a felhasználó azonnali műveletet kezdeményezhessen, vagy válasszon egymástól függetlenül további lehetőségek közül.

Használjon ToggleButton vezérlőt, ha azt szeretné, hogy a felhasználó azonnal válthasson a két kölcsönösen kizáró állapot között, és amikor a gomb a legjobban megfelel a felhasználói felület igényeinek. Ha a felhasználói felület nem élvezi a gomb előnyeit, jobb választás lehet egy AppBarToggleButton, Jelölőnégyzet, RadioButtonvagy ToggleSwitchhasználata.

Recommendations

Győződjön meg arról, hogy a gomb célja és állapota egyértelmű a felhasználó számára.
Ha ugyanazon döntéshez több gomb is tartozik (például egy megerősítési párbeszédpanelen), jelenítse meg a véglegesítési gombokat ebben a sorrendben, ahol a [Do it] és a [Ne tegye meg] a fő utasításra adott válaszok:
- OK/[Csináld]/Igen
  - [Ne tegye]/Nem
  - Érvénytelenít
Egyszerre csak egy vagy két gombot tehet elérhetővé a felhasználó számára, például Elfogadás és Mégse. Ha további műveleteket szeretne elérhetővé tenni a felhasználónak, fontolja meg a jelölőnégyzetek vagy a választógombok használatát, amelyek közül a felhasználó kiválaszthatja a műveleteket, és egyetlen parancsgombbal indíthatja el ezeket a műveleteket.
Ha az alkalmazáson belül több oldalon is elérhetővé kell tenni egy műveletet, ahelyett, hogy egy gombot több oldalon duplikálnál, érdemes lehet alsó alkalmazássávot használni.

Gombszöveg

A gomb tartalma általában szöveg. A szöveg tervezésekor használja a következő javaslatokat:

Használjon tömör, konkrét, magától értetődő szöveget, amely egyértelműen leírja a gomb által végrehajtott műveletet. A gombszöveg általában egyetlen szó, amely egy ige.
Használja az alapértelmezett betűtípust, hacsak a márka irányelvei nem jelzik, hogy valami mást használjon.
Rövidebb szöveg esetén kerülje a keskeny parancsgombokat a 120 képpontos minimális gombszélesség használatával.
Hosszabb szöveg esetén kerülje a széles parancsgombokat úgy, hogy legfeljebb 26 karakter hosszúságúra korlátozza a szöveget.
Ha a gomb szöveges tartalma dinamikus (vagyis honosított), gondolja át, hogy a gomb hogyan lesz átméretezve, és mi történik a körülötte lévő vezérlőkkel.

Javításra van szükség: Túlcsorduló szöveggel rendelkező gombok.
1. lehetőség: A gombszélesség növelése, a gombok halmozása és a körbefuttatás, ha a szöveg hossza meghaladja a 26 karaktert.
2. lehetőség: A gomb magasságának növelése és a szöveg körbefuttatása.

Ajánlott egygombos elrendezés

Ha az elrendezéshez csak egy gomb szükséges, annak a tárolókörnyezete alapján balra vagy jobbra kell igazítottnak lennie.

A csak egy gombot tartalmazó párbeszédpaneleknek jobb igazítást kell a gombhoz. Ha a párbeszédpanel csak egy gombot tartalmaz, győződjön meg róla, hogy a gomb végrehajtja a biztonságos, nem romboló műveletet. Ha ContentDialog használ, és egyetlen gombot ad meg, az automatikusan jobbra lesz igazítva.
Ha a gomb megjelenik egy tároló felhasználói felületén (például bejelentési értesítésen, úszó panelen vagy listanézeten belül), akkor jobbra kell igazítania a gombot a tárolón belül.
Az olyan oldalakon, amelyek egyetlen gombot tartalmaznak (például egy alkalmazása gomb egy beállításlap alján), a gombot balra kell igazítani. Ez biztosítja, hogy a gomb igazodjon a lap többi tartalmához.

Vissza gombok

A vissza gomb egy rendszer által biztosított felhasználói felületi elem, amely lehetővé teszi a visszafelé történő navigációt a felhasználó back stack vagy navigációs előzményei között. Nem kell saját vissza gombot létrehoznia, de lehet, hogy némi munkát kell végeznie ahhoz, hogy jó visszalépési navigációs élményt biztosíthasson. További információ: A navigációs előzmények és a visszafelé navigálás Windows alkalmazások esetén.

Példák

Ez a példa egy párbeszédpanelen három gombot használ: Mentés, Ne mentseés Mégse, amely megkérdezi a felhasználókat, hogy szeretnék-e menteni a munkájukat.

Gomb létrehozása

Fontos API-k:Gombosztály, Kattintás esemény, Parancs tulajdonság, Tartalom tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a Gombok működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Ebben a példában egy kattintásra reagáló gomb látható.

Hozza létre a gombot az XAML-ben.

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

Vagy hozza létre a gombot a kódban.

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

Kezelje a kattintás eseményt.

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

Gomb-interakció

Ha egy gombra koppint, egy ujjal vagy tollal, vagy lenyom egy bal egérgombot, miközben az egérmutató rajta van, a gomb a Kattintás eseményt emeli ki. Ha egy gombon a billentyűzetfókusz van, az Enter billentyű vagy a szóköz lenyomásával a Kattintás esemény is kiváltódik.

Alacsony szintű PointerPressed eseményeket általában nem tud kezelni egy gomb objektumon, mert az Kattintás viselkedéssel rendelkezik. További információért lásd: Események és irányított események áttekintése.

Az ClickMode tulajdonság módosításával módosíthatja, hogy egy gomb hogyan emeli a Click eseményt. A ClickMode alapértelmezett értéke Felengedés, de a gomb ClickMode értékét beállíthatja Ráhelyezés vagy Lenyomásmódba is. Ha ClickModelebegés, a Kattintás esemény nem hozható létre billentyűzettel vagy érintéssel.

Gomb tartalma

Gomb a ContentControl osztály tartalomvezérlője. XAML-tartalomtulajdonsága Content, amely lehetővé teszi az ilyen XAML-szintaxist: <Button>A button's content</Button>. Bármely objektumot beállíthatja a gomb tartalmaként. Ha a tartalom egy UIElement objektum, akkor az megjelenik a gombon. Ha a tartalom egy másik típusú objektum, a sztring-ábrázolása megjelenik a gombon.

A gomb tartalma általában szöveg. Amikor a szöveget tervezi, kövesse a gomb szövegére vonatkozó korábbi javaslatokat.

Testre is szabhatja a gomb megjelenését alkotó vizualizációkat. Lecserélheti például a szöveget egy ikonra, vagy a szöveg mellett egy ikont is használhat.

Itt egy képet és szöveget tartalmazó StackPanel egy gomb tartalmaként van beállítva.

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

A gomb így néz ki.

Ismétlődő gomb létrehozása

Fontos API-k:RepeatButton osztály, Click event, Content property

Nyissa meg a WinUI 3 Katalógus alkalmazást, és nézze meg a RepeatButton működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A RepeatButton vezérlő olyan gomb, amely a lenyomástól a felengedésig folyamatosan Kattintás eseményeket vált ki. A Delay tulajdonság beállításával adja meg, hogy a RepeatButton vezérlő mennyi ideig várakozik a kattintási művelet megismétlése előtt. Állítsa be a Interval tulajdonságot a kattintási művelet ismétlődései közötti idő megadásához. Mindkét tulajdonság idői ezredmásodpercben vannak megadva.

Az alábbi példában két RepeatButton vezérlő látható, amelyek megfelelő Kattintás eseményekkel növelik és csökkentik a szövegblokkban látható értéket.

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

Legördülő gomb létrehozása

Fontos API-k: DropDownButton osztály, Flyout tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a legördülő menüt működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A DropDownButton egy gomb, amely egy chevront jelenít meg vizuális jelzésként, amely egy csatolt legördülő menüt tartalmaz további lehetőségekkel. Ugyanaz a viselkedése, mint egy szabványos gomb vezérlőelemnek lenyíló menüvel; csak a megjelenés különbözik.

A legördülő gomb örökli a Kattintás eseményt, de ezt általában nem használnak. Ehelyett a Flyout tulajdonságot használva csatolhat egy úszó panelt, és műveleteket hívhat meg a panel menübeállításaival. A kiugró ablak automatikusan megnyílik, amikor a gombra kattint. Ügyeljen arra, hogy adja meg a Elhelyezés tulajdonságot, amely biztosítja a kívánt elhelyezkedést a gombhoz viszonyítva. Előfordulhat, hogy az alapértelmezett elhelyezési algoritmus nem minden helyzetben hozza létre a kívánt elhelyezést. További információ a legördülő menükről: Legördülő menü és Legördülő menü és menüsáv.

Példa – Legördülő gomb

Ez a példa bemutatja, hogyan hozhat létre legördülő gombot egy olyan úszó panellel, amely egy RichEditBox vezérlőelemben lévő bekezdésigazítási parancsokat tartalmaz. (További információ és kód: Gazdag szerkesztődoboz).

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

Felosztás gomb létrehozása

Fontos API-k: SplitButton osztály, Click event, Flyout tulajdonság

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a SplitButton működés közben.

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A SplitButton vezérlőelem két részből áll, amelyek külön hívhatók meg. Az egyik rész normál gombként viselkedik, és azonnali műveletet indít el. A másik rész egy úszó panelt hív meg, amely további választási lehetőségeket kínál a felhasználónak.

Megjegyzés:

Érintéssel az osztott nyomógomb legördülő gombként működik; a gomb mindkét fele meghívja a felugró menüt. Más beviteli módszerekkel a felhasználó külön-külön hívhatja meg a gomb egyik felét.

Az osztott gombok jellemző viselkedése a következő:

Amikor a felhasználó a gombrészre kattint, kezelje a Kattintás eseményt a legördülő menüben jelenleg kijelölt beállítás meghívásához.
Amikor a legördülő lista meg van nyitva, kezelje a legördülő menü elemeinek meghívását, hogy mindkét lehetőséget - a kijelölt beállítás módosítását és azt követő meghívását - végrehajtsa. Fontos meghívni a kiugró elemet, mert a gomb Kattintás esemény nem fordul elő érintéssel.

Jótanács

Az elemeket sokféleképpen helyezheti el a legördülő menüben, és kezelheti azok meghívását. Ha a ListView vagy a GridViewelemet használja, az egyik módszer az, hogy kezelje a SelectionChanged eseményt. Ha ezt teszi, állítsa a SingleSelectionFollowsFocus értékét hamisnak. Ez lehetővé teszi, hogy a felhasználók billentyűzettel navigálva navigálják a beállításokat anélkül, hogy minden egyes módosításnál az elemet invokálták.

Példa – Felosztás gomb

Ez a példa bemutatja, hogyan hozhat létre osztott gombot, amely a kijelölt szöveg előtérszínének módosítására szolgál egy RichEditBox vezérlőelemben. (További információ és kód: Gazdag szerkesztődoboz). A kombinált gomb legördülő menüje a BottomEdgeAlignedLeft alapértelmezett értéként használja az Elhelyezés tulajdonságot. Ezt az értéket nem lehet felülbírálni.

kiválasztására szolgáló felosztás gomb

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

Kapcsoló osztott gomb létrehozása

Fontos API-k: ToggleSplitButton osztály, IsCheckedChanged esemény, IsChecked tulajdonság

Nyissa meg a WinUI 3 Galéria alkalmazást, és tekintse meg a ToggleSplitButton működés közben

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

A ToggleSplitButton vezérlő két részből áll, amelyek külön hívhatók meg. Az egyik rész úgy viselkedik, mint egy váltógomb, amely be- vagy kikapcsolható. A másik rész egy úszó panelt hív meg, amely további választási lehetőségeket kínál a felhasználónak.

Általában a váltó gombot használják egy funkció bekapcsolására vagy kikapcsolására, amikor a funkció több lehetőséget kínál, amelyek közül a felhasználó választhat. A dokumentumszerkesztőben például a listák be- vagy kikapcsolására használható, míg a legördülő menü a lista stílusának kiválasztására szolgál.

Megjegyzés:

Érintés használata esetén az osztógomb legördülő gombként működik. Más beviteli módszerekkel a felhasználó külön válthat és hívhatja meg a gomb két felét. Érintéssel a gomb mindkét fele megnyitja az előugró panelt. Ezért be kell illesztenie egy kapcsolási lehetőséget az úszó tartalomhoz, hogy a gombot be- vagy kikapcsolhassa.

Különbségek a ToggleButtonnal

Ellentétben ToggleButton, ToggleSplitButton nincs meghatározhatatlan állapota. Ennek eredményeképpen érdemes szem előtt tartani az alábbi különbségeket:

ToggleSplitButton nem rendelkezik IsThreeState tulajdonságtal vagy meghatározatlan eseménysel.
A ToggleSplitButton.IsChecked tulajdonság csak logikai, nem pedig null értékű<bool>.
ToggleSplitButton csak a IsCheckedChanged eseményt tartalmazza, nincs külön Bejelölt és Nem bejelölt esemény.

Példa – Felosztás gomb váltása

Az alábbi példa bemutatja, hogyan kapcsolható fel a felosztás gomb a listaformázás be- és kikapcsolásához, valamint a lista stílusának módosításához egy RichEditBox vezérlőelemben. (További információ és kód: Gazdag szerkesztődoboz). A kapcsológomb felosztási menüje alapértelmezettként a BottomEdgeAlignedLeft értéket használja az Elhelyezés tulajdonságinál. Ezt az értéket nem lehet felülbírálni.

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

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-11

Megosztás a következőn keresztül:

Buttons

Ez a megfelelő vezérlő?

Recommendations

Gombszöveg

Ajánlott egygombos elrendezés

Vissza gombok

Példák

Gomb létrehozása

Gomb-interakció

Gomb tartalma

Ismétlődő gomb létrehozása

Legördülő gomb létrehozása

Példa – Legördülő gomb

Felosztás gomb létrehozása

Példa – Felosztás gomb

Kapcsoló osztott gomb létrehozása

Különbségek a ToggleButtonnal

Példa – Felosztás gomb váltása

Kapcsolódó cikkek

Visszajelzés

További források