Buttons

En knapp ger användaren ett sätt att utlösa en omedelbar åtgärd. Vissa knappar är specialiserade för vissa uppgifter, till exempel navigering, upprepade åtgärder eller presentationsmenyer.

Det XAML- ramverket (Extensible Application Markup Language) innehåller en standardknappkontroll samt flera specialiserade knappkontroller.

Control	Description
knapp	En knapp som initierar en omedelbar åtgärd. Kan användas med en Klickhändelse eller Kommando bindning.
Upprepaknapp	En knapp som utlöser en Klick händelse kontinuerligt medan den är nedtryckt.
HyperlänkKnapp	En knapp som är formaterad som en hyperlänk och används för navigering. Mer information om hyperlänkar finns i Hyperlänkar.
Nedrullningsknapp	En knapp med en chevron för att öppna ett tillhörande utfällbart objekt.
Delknapp	En knapp med två sidor. Den ena sidan initierar en åtgärd och den andra sidan öppnar en meny.
Växlingsknapp	En växlingsknapp med två sidor. Den ena sidan växlar på/av, och den andra sidan öppnar en meny.
Växlingsknapp	En knapp som kan vara på eller av.

Är det här rätt kontroll?

Använd en knapp kontroll för att låta användaren initiera en omedelbar åtgärd, till exempel skicka ett formulär.

Använd inte en -knapp kontroll när åtgärden är att navigera till en annan sida. använd i stället en HyperlänkKnapp kontroll. Mer information om hyperlänkar finns i Hyperlänkar.

Viktigt!

Använd knapparna Back och Nextför navigering i guiden. För andra typer av bakåtnavigering eller navigering till en övre nivå använder du en bakåtknapp.

Använd en RepeatButton- kontroll när användaren kanske vill utlösa en åtgärd upprepade gånger. Använd till exempel en RepeatButton--kontroll för att öka eller minska ett värde i en räknare.

Använd en DropDownButton- kontrollknapp när knappen har en meny med fler alternativ. Standardpilen ger en visuell indikation på att knappen innehåller ett utfällbart objekt.

Använd en SplitButton- kontroll när du vill att användaren ska kunna initiera en omedelbar åtgärd eller välja mellan ytterligare alternativ oberoende av varandra.

Använd en ToggleButton- kontroll när du vill att användaren omedelbart ska kunna växla mellan två ömsesidigt uteslutande tillstånd, och en knapp passar bäst för dina användargränssnittsbehov. Om inte användargränssnittet drar nytta av en knapp kan det vara ett bättre val att använda en AppBarToggleButton, CheckBox, RadioButtoneller ToggleSwitch.

Recommendations

• Kontrollera att syftet med och tillståndet för en knapp är tydliga för användaren.

• När det finns flera knappar för samma beslut (till exempel i en bekräftelsedialogruta) visar du incheckningsknapparna i den här ordningen, där [Gör det] och [Gör det inte] är specifika svar på huvudinstruktionen:

  • OK/[Gör det]/Ja
    • [Gör det inte]/Nej
    • Annullera

• Exponera endast en eller två knappar för användaren i taget, till exempel Acceptera och Avbryt. Om du behöver göra fler åtgärder tillgängliga för användaren kan du använda kryssrutor för eller alternativknappar som användaren kan välja åtgärder från, med en enda kommandoknapp för att utlösa dessa åtgärder.

• För en åtgärd som måste vara tillgänglig på flera sidor i din app kan du istället för att duplicera en knapp på flera sidor använda ett nedre appfält.

Text på knapp

En knapps innehåll är vanligtvis text. Använd följande rekommendationer när du utformar texten:

• Använd en kortfattad, specifik, självförklarande text som tydligt beskriver den åtgärd som knappen utför. Vanligtvis är knapptext ett enda ord som är ett verb.

• Använd standardteckensnittet, såvida inte varumärkesriktlinjerna säger att du ska använda något annat.

• För kortare text bör du undvika smala kommandoknappar med en minsta knappbredd på 120 px.

• Undvik breda kommandoknappar för längre text genom att begränsa text till en maximal längd på 26 tecken.

• Om knappens textinnehåll är dynamiskt (dvs. det är lokaliserat), bör du överväga hur knappen ska ändras och vad som händer med kontroller runt den.

Behöver åtgärdas: Knappar med spillande text.
alternativ 1: Öka knappbredden, stapla knapparna och gör radbrytning om textlängden är större än 26 tecken.
alternativ 2: Öka knapphöjden och omslut texten.

Rekommenderad layout med en knapp

Om layouten bara kräver en knapp ska den antingen vara vänster- eller högerjusterad baserat på containerkontexten.

• Dialogrutor med bara en knapp bör högerjustera knappen. Om dialogrutan bara innehåller en knapp kontrollerar du att knappen utför den säkra, icke-förstörande åtgärden. Om du använder ContentDialog och har en enda knapp, placeras den automatiskt till höger.

  

• Om knappen visas i ett containergränssnitt (till exempel i ett popup-meddelande, en utfälld meny eller ett listvyobjekt) bör du högerjustera knappen i containern.

  

• På sidor som innehåller en enda knapp (till exempel en knappen Använd längst ned på en inställningssida) bör du vänsterjustera knappen. Detta säkerställer att knappen överensstämmer med resten av sidinnehållet.

  

Bakåtknappar

Bakåtknappen är ett systembaserat användargränssnittselement som möjliggör bakåtnavigering genom antingen användarens bakåtstack eller navigeringshistorik. Du behöver inte skapa en egen bakåtknapp, men du kan behöva göra lite arbete för att möjliggöra en bra bakåtnavigeringsupplevelse. Mer information finns i Navigeringshistorik och bakåtnavigering för Windows-appar.

Examples

I det här exemplet används tre knappar, Spara, Spara inteoch Avbryti en dialogruta som frågar användarna om de vill spara sitt arbete.

Skapa en knapp

• Viktiga API:er:Button-klass, Klicka på händelse, kommandoegenskap, innehållsegenskap

Öppna WinUI 3-galleriappen och se knapparna i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

I det här exemplet visas en knapp som svarar på ett klick.

Skapa knappen i XAML.

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

Eller skapa knappen i koden.

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

Hantera händelsen Klicka på.

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

Knappinteraktion

När du trycker på en knapp kontroll med antingen ett finger eller en stylus, eller vänsterklickar med musen medan pekaren är över den, utlöser knappen Klicka händelse. Om en knapp har tangentbordsfokus höjer du även Klicka på händelse genom att trycka på Retur eller Blanksteg.

Vanligtvis kan du inte hantera låg nivå PointerPressed-händelser på ett Button-objekt eftersom det har Click-beteende istället. Mer information finns i översikten över händelser och routade händelser.

Du kan ändra hur en knapp utlöser händelsen Click genom att ändra egenskapen ClickMode. Standardvärdet för ClickMode är Release, men du kan också ställa in ett knappens ClickMode-värde till Hover eller Press. Om ClickMode är satt till hoverkan inte klickhändelsen aktiveras med hjälp av tangentbordet eller beröring.

Knappinnehåll

Button är en innehållskontroll för klassen ContentControl. Dess XAML-innehållsegenskap är Content, som aktiverar en syntax som den här för XAML: <Button>A button's content</Button>. Du kan ange valfritt objekt som knappens innehåll. Om innehållet är ett UIElement- objekt återges det i knappen. Om innehållet är en annan typ av objekt visas dess strängrepresentation i knappen.

En knapps innehåll är vanligtvis text. När du utformar texten följer du textrekommendationerna Knapp som angavs tidigare.

Du kan också anpassa visuella objekt som utgör knappens utseende. Du kan till exempel ersätta texten med en ikon eller använda en ikon utöver text.

Här anges en StackPanel- som innehåller en bild och text som innehåll i en knapp.

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

Knappen ser ut så här.

Skapa en upprepningsknapp

• Viktiga API:er:RepeatButton-klass, Click-händelse, Content-egenskap

Öppna WinUI 3-galleriappen och se RepeatButton i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

En RepeatButton--kontroll är en knapp som genererar Klicka händelser upprepade gånger från den tidpunkt då den trycks tills den släpps. Ange egenskapen Delay för att ange den tid då kontrollen RepeatButton väntar när den har tryckts på innan klickåtgärden upprepas. Ange egenskapen Intervall för att ange tiden mellan upprepningarna av klickåtgärden. Tider för båda egenskaperna anges i millisekunder.

I följande exempel visas två RepeatButton- kontroller vars respektive Klicka händelser används för att öka och minska värdet som visas i ett textblock.

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

Skapa en rullgardinsknapp

• Viktiga API:er: DropDownButton-klass, Flyout-egenskap

Öppna WinUI 3-galleriappen och se dropdownButton i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

En DropDownButton- är en knapp som visar en chevron som en visuell indikator för att den har en ansluten utfällning som innehåller fler alternativ. Det har samma beteende som en standard Button kontroll med en utfällning; bara utseendet är annorlunda.

Rullgardinsknappens ärver Klicka händelsen, men du använder den vanligtvis inte. I stället använder du egenskapen Flyout för att koppla en dropdown och anropa åtgärder med hjälp av menyalternativ i dropdown-menyn. Den utfällbara menyn öppnas automatiskt när knappen klickas. Se till att ange egenskapen Placering för flyouten för att säkerställa rätt placering i förhållande till knappen. Standardplaceringsalgoritmen kanske inte ger den avsedda placeringen i alla situationer. Mer information om flyout-menyer finns i Flyout-menyer och flyout-menyn och menyraden.

Exempel – listrulleknapp

Det här exemplet visar hur du skapar en nedrullningsbar knapp med en utfällningsmeny som innehåller kommandon för styckejustering i en RichEditBox- kontroll. (Mer information och kod finns i RtF-redigeringsrutan).

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

Skapa en delningsknapp

• Viktiga API:er: SplitButton-klass, Klickhändelse, Flyout-egenskap

Öppna WinUI 3-galleriappen och se SplitButton i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

En SplitButton--kontroll har två delar som kan anropas separat. En del fungerar som en standardknapp och anropar en omedelbar åtgärd. Den andra delen anropar en utfälld meny som innehåller ytterligare alternativ som användaren kan välja mellan.

Anmärkning

När den anropas med touch fungerar delningsknappen som en nedrullningsknapp; båda halvorna av knappen anropar den utfällbara menyn. Med andra indatametoder kan en användare anropa antingen hälften av knappen separat.

Det vanliga beteendet för en delningsknapp är:

• När användaren klickar på knappdelen hanterar du händelsen Klicka för att anropa det alternativ som för närvarande är markerat i listrutan.

• När listrutan är öppen hanterar du anropen av objekten i listrutan för att både ändra vilket alternativ som väljs och sedan anropa det. Det är viktigt att anropa det utfällbara objektet eftersom knappen Klicka på händelsen inte inträffar när du använder touch.

Tips/Råd

Det finns många sätt att placera objekt i listrutan och hantera deras anrop. Om du använder en ListView- eller GridView-är ett sätt att hantera händelsen SelectionChanged. Om du gör detta, ställ in SingleSelectionFollowsFocus till false. På så sätt kan användarna navigera i alternativen med hjälp av ett tangentbord utan att anropa objektet vid varje ändring.

Exempel – Split-knapp

Det här exemplet visar hur du skapar en delningsknapp som används för att ändra förgrundsfärgen för markerad text i en RichEditBox- kontroll. (Mer information och kod finns i RtF-redigeringsrutan). Delningsknappens utfällbara meny använder BottomEdgeAlignedLeft som standardvärde för egenskapen Placering. Du kan inte åsidosätta det här värdet.

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

Skapa en växlingsknapp för delning

• Viktiga API:er: ToggleSplitButton-klass, IsCheckedChanged-händelse, IsChecked-egenskap

Öppna WinUI 3-galleriappen och se ToggleSplitButton i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

En ToggleSplitButton- kontroll har två delar som kan anropas separat. En del fungerar som en växlingsknapp som kan vara på eller av. Den andra delen anropar en utfälld meny som innehåller ytterligare alternativ som användaren kan välja mellan.

En växlingsknapp för delning används vanligtvis för att aktivera eller inaktivera en funktion när funktionen har flera alternativ som användaren kan välja mellan. I en dokumentredigerare kan den till exempel användas för att aktivera eller inaktivera listor, medan listrutan används för att välja formatet för listan.

Anmärkning

När den används med touch fungerar knappen för att växla läge som en nedrullningsknapp. Med andra indatametoder kan en användare växla och anropa de två halvorna av knappen separat. Med touch framkallar båda halvorna av knappen flyout-menyn. Därför måste du inkludera ett alternativ i det utfällbara innehållet för att aktivera eller inaktivera knappen.

Skillnader med ToggleButton

Till skillnad från ToggleButtonhar ToggleSplitButton inte något obestämt tillstånd. Därför bör du tänka på följande skillnader:

• ToggleSplitButton har inte någon egenskap IsThreeState eller någon Indeterminate händelse.
• Egenskapen ToggleSplitButton.IsChecked är bara Boolean, inte en Nullable<bool>.
• ToggleSplitButton har endast händelsen IsCheckedChanged; den har inte separata Checked och Unchecked händelser.

Exempel – växla delningsknapp

I följande exempel visas hur en växlingsknapp kan användas för att aktivera eller inaktivera listformatering och ändra formatet för listan i en RichEditBox- kontroll. (Mer information och kod finns i RtF-redigeringsrutan). Den utfällbara menyknappen använder BottomEdgeAlignedLeft som standardvärde för egenskapen Placering. Du kan inte åsidosätta det här värdet.

<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 och WinUI 2

Viktigt!

Informationen och exemplen i den här artikeln är optimerade för appar som använder Windows App SDK och WinUI 3, men som är allmänt tillämpliga för UWP-appar som använder WinUI 2. Se UWP API-referensen för plattformsspecifik information och exempel.

Det här avsnittet innehåller information som du behöver för att använda kontrollen i en UWP- eller WinUI 2-app.

Kontrollerna DropDownButton, SplitButton och ToggleSplitButton för UWP-appar ingår som en del av WinUI 2. Mer information, inklusive installationsinstruktioner, finns i WinUI 2. API:er för dessa kontroller finns i namnrymderna Windows.UI.Xaml.Controls och Microsoft.UI.Xaml.Controls .

• UWP-API:er:Button-klass, RepeatButton-klass, Hyperlänkbuttonklass, DropDownButton, SplitButton, ToggleSplitButton, ToggleButton, Click event, Command property, Content property
• WinUI 2 API:er:DropDownButton, SplitButton, ToggleSplitButton
• Öppna WinUI 2-galleriappen och se knappen i praktiken. WinUI 2-galleriappen innehåller interaktiva exempel på de flesta WinUI 2-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller. WinUI 2.2 eller senare innehåller en ny mall för dessa kontroller som använder rundade hörn. För mer information om hörnradien, se .

Om du vill använda koden i den här artikeln med WinUI 2 använder du ett alias i XAML (vi använder muxc) för att representera Api:erna för Windows UI-bibliotek som ingår i projektet. Mer information finns i Komma igång med WinUI 2 .

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

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

Relaterade artiklar

• Button-klass
• Radioknappar
• kryssrutor
• Vippströmbrytare