SchaltflächenButtons

Eine Schaltfläche ermöglicht dem Benutzer das unmittelbare Auslösen einer Aktion.A button gives the user a way to trigger an immediate action. Einige Schaltflächen sind speziell auf bestimmte Aufgaben wie Navigation, wiederholte Aktionen oder das Präsentieren von Menüs ausgelegt.Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

Beispiel für Schaltflächen

Das Extensible Application Markup Language (XAML)-Framework stellt ein standardmäßiges Schaltflächen-Steuerelement sowie verschiedene spezialisierte Schaltflächen-Steuerelemente bereit.The Extensible Application Markup Language (XAML) framework provides a standard button control as well as several specialized button controls.

ControlControl BeschreibungDescription
SchaltflächeButton Eine Schaltfläche, die eine sofortige Aktion auslöst.A button that initiates an immediate action. Kann mit einem Click-Ereignis oder einer Command-Bindung verwendet werden.Can be used with a Click event or Command binding.
RepeatButtonRepeatButton Eine Schaltfläche, die im gedrückten Zustand fortlaufend ein Click-Ereignis auslöst.A button that raises a Click event continuously while pressed.
HyperlinkButtonHyperlinkButton Eine Schaltfläche, die wie ein Link formatiert ist und für die Navigation verwendet wird.A button that's styled like a hyperlink and used for navigation. Weitere Informationen zu Hyperlinks finden unter Hyperlinks.For more info about hyperlinks, see Hyperlinks.
DropDownButtonDropDownButton Eine Schaltfläche mit einem Chevron zum Öffnen eines angefügten Flyouts.A button with a chevron to open an attached flyout.
SplitButtonSplitButton Schaltfläche mit zwei Seiten.A button with two sides. Eine Seite initiiert eine Aktion, während die andere Seite ein Menü öffnet.One side initiates an action, and the other side opens a menu.
ToggleSplitButtonToggleSplitButton Umschaltfläche mit zwei Seiten.A toggle button with two sides. Mit einer Seite wird aktiviert/deaktiviert, über die andere Seite wird ein Menü geöffnet.One side toggles on/off, and the other side opens a menu.
ToggleButtonToggleButton Eine Schaltfläche, die ein-oder ausgeschaltet werden kann.A button that can be on or off.
Abrufen der Windows-UI-BibliothekGet the Windows UI Library
DropDownButton, SplitButton und ToggleSplitButton sind in der Windows-UI-Bibliothek enthalten, einem NuGet-Paket mit neuen Steuerelementen und Benutzeroberflächenfeatures für UWP-Apps.DropDownButton, SplitButton, and ToggleSplitButton are included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for UWP apps. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek).For more info, including installation instructions, see Windows UI Library.
Plattform-APIsPlatform APIs Windows-UI-Bibliotheks-APIsWindows UI Library APIs
Click-EreignisClick event
Command-EigenschaftCommand property
DropDownButton-KlasseDropDownButton class
SplitButton-KlasseSplitButton class
ToggleSplitButton-KlasseToggleSplitButton class

Ist dies das richtige Steuerelement?Is this the right control?

Verwenden Sie ein Button-Steuerelement, um dem Benutzer das direkte Auslösen einer Aktion zu ermöglichen, z. B. das Absenden eines Formulars.Use a Button control to let the user initiate an immediate action, such as submitting a form.

Button-Steuerelemente sollten nicht verwendet werden, um zu anderen Seiten zu navigieren. Ein HyperlinkButton ist für diesen Zweck besser geeignet.Don't use a Button control when the action is to navigate to another page; instead, use a HyperlinkButton control. Weitere Informationen zu Hyperlinks finden unter Hyperlinks.For more info about hyperlinks, see Hyperlinks.

Wichtig

Für die Navigation in einem Assistenten können die Schaltflächen Zurück und Weiter verwendet werden.For wizard navigation, use buttons labeled Back and Next. Für andere Arten der Rückwärtsnavigation oder der Navigation zu einer übergeordneten Ebene sollte stattdessen eine Zurück-Schaltfläche verwendet werden.For other types of backwards navigation or navigation to an upper level, use a back button.

Verwenden Sie ein RepeatButton-Steuerelement, um Benutzern das wiederholte Auslösen einer Aktion zu ermöglichen.Use a RepeatButton control when the user might want to trigger an action repeatedly. Verwenden Sie z. B. ein RepeatButton-Steuerelement, um einen Wert in einem Zähler zu erhöhen oder zu verringern.For example, use a RepeatButton control to increment or decrement a value in a counter.

Verwenden Sie ein DropDownButton-Steuerelement, wenn die Schaltfläche über ein Flyout mit weiteren Optionen verfügt.Use a DropDownButton control when the button has a flyout that contains more options. Das Standard-Chevron liefert einen visuellen Hinweis, dass die Schaltfläche ein Flyout enthält.The default chevron provides a visual indication that the button includes a flyout.

Verwenden Sie ein SplitButton-Steuerelement, wenn der Benutzer in der Lage sein soll, direkt eine Aktion auszulösen oder unabhängig davon unter weiteren Aktionen auszuwählen.Use a SplitButton control when you want the user to be able to initiate an immediate action or choose from additional options independently.

Verwenden Sie ein ToggleButton-Steuerelement, wenn der Benutzer in der Lage sein soll, zwischen zwei sich gegenseitig ausschließenden Zuständen sofort zu wechseln, und eine Schaltfläche die beste Lösung für Ihre Anforderungen an die Benutzeroberfläche ist.Use a ToggleButton control when you want the user to be able to immediately switch between two mutually exclusive states, and a button is the best fit for your UI needs. Wenn die Benutzeroberfläche nicht von einer Schaltfläche profitiert, ist es möglicherweise besser, mit AppBarToggleButton, CheckBox, RadioButton, oder ToggleSwitch zu arbeiten.Unless your UI benefits from a button, it might be a better choice to use an AppBarToggleButton, CheckBox, RadioButton, or ToggleSwitch.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie den XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und die Schaltfläche in Aktion zu sehen.If you have XAML Controls Gallery installed, click here to open the app and see the Button in action.

In diesem Beispiel werden die beiden Schaltflächen Zulassen und Blockieren in einem Dialogfeld verwendet, über das Zugriff auf den Standort des Benutzers angefordert wird.This example uses two buttons, Allow and Block, in a dialog that requests location access.

Beispiel für Schaltflächen in einem Dialogfeld

Erstellen einer SchaltflächeCreate a button

Dieses Beispiel zeigt eine Schaltfläche, die auf einen Mausklick reagiert.This example shows a button that responds to a click.

Erstellen Sie die Schaltfläche in XAML.Create the button in XAML.

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

Sie können die Schaltfläche auch in Code erstellen.Or create the button in code.

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

Behandeln Sie das Click-Ereignis.Handle the Click event.

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

Interaktion mit SchaltflächenButton interaction

Wenn Sie mit einem Finger oder Stift auf ein Button-Steuerelement tippen oder mit der linken Maustaste darauf klicken, löst die Schaltfläche das Click-Ereignis aus.When you tap a Button control with a finger or stylus, or press a left mouse button while the pointer is over it, the button raises the Click event. Bei einer Schaltfläche mit Tastaturfokus wird das Click-Ereignis auch durch Drücken der Eingabe- oder Leertaste ausgelöst.If a button has keyboard focus, pressing the Enter key or the Spacebar also raises the Click event.

Sie können für Button-Objekte generell keine PointerPressed-Ereignisse auf niedriger Ebene verarbeiten, da diese stattdessen mit dem Click-Verhalten konfiguriert sind.You generally can't handle low-level PointerPressed events on a Button object because it has the Click behavior instead. Weitere Informationen finden Sie unter Übersicht über Ereignisse und Routingereignisse.For more info, see Events and routed events overview.

Sie können durch Ändern der ClickMode-Eigenschaft festlegen, wie eine Schaltfläche das Click-Ereignis auslöst.You can change how a button raises the Click event by changing the ClickMode property. Der ClickMode-Standardwert ist Release, Sie können den ClickMode einer Schaltfläche jedoch auch auf Hover oder Press festlegen.The default value of ClickMode is Release, but you also can set a button's ClickMode value to Hover or Press. Wenn als ClickMode-Wert Hover festgelegt ist, kann das Click-Ereignis nicht über die Tastatur oder durch Berührung ausgelöst werden.If ClickMode is Hover, the Click event can't be raised by using the keyboard or touch.

Inhalt von SchaltflächenButton content

Button ist ein Inhaltsssteuerelement der ContentControl-Klasse.Button is a content control of the ContentControl class. Die XAML-Inhaltseigenschaft ist Content. Damit ist für XAML folgende Syntax möglich: <Button>A button's content</Button>.Its XAML content property is Content, which enables a syntax like this for XAML: <Button>A button's content</Button>. Sie können jedes Objekt als Inhalt der Schaltfläche festlegen.You can set any object as the button's content. Wenn der Inhalt ein UIElement-Objekt ist, wird er in der Schaltfläche gerendert.If the content is a UIElement object, it is rendered in the button. Wenn es sich beim Inhalt um einen anderen Objekttyp handelt, wird die entsprechende Zeichenfolgendarstellung in der Schaltfläche angezeigt.If the content is another type of object, its string representation is shown in the button.

Der Inhalt einer Schaltfläche ist für gewöhnlich Text.A button's content is usually text. Wenn Sie diesen Text entwerfen, beachten Sie die folgenden Empfehlungen:When you design that text, use the following recommendations:

  • Verwenden Sie kurze, spezifische und selbsterklärende Texte, aus denen die Funktion einer Schaltfläche eindeutig hervorgeht.Use a concise, specific, self-explanatory text that clearly describes the action that the button performs. In der Regel umfasst der Schaltflächentext ein einzelnes Wort, und dieses ist ein Verb.Usually button text is a single word that is a verb.

  • Verwenden Sie die standardmäßige Schriftart, es sei denn, Sie müssen entsprechend Ihren Markenrichtlinien eine andere verwenden.Use the default font, unless your brand guidelines tell you to use something different.

  • Vermeiden Sie für kürzeren Text schmale Befehlsschaltflächen, indem Sie eine Schaltflächen-Mindestbreite von 120 Pixel verwenden.For shorter text, avoid narrow command buttons by using a minimum button width of 120px.

  • Vermeiden Sie für längeren Text breite Befehlsschaltflächen, indem Sie Text auf eine maximale Länge von 26 Zeichen beschränken.For longer text, avoid wide command buttons by limiting text to a maximum length of 26 characters.

  • Wenn der Textinhalt der Schaltfläche dynamisch ist (d. h. lokalisiert ist), ziehen Sie die Größenänderung der Schaltfläche und das in Betracht, was mit den Steuerelementen um sie herum geschieht.If the button's text content is dynamic (that is, it is localized), consider how the button will be resized and what will happen to controls around it.

Folgendes muss geändert werden:Need to fix:
Schaltflächen mit überlaufendem Text.Buttons with overflowing text.
Option 1:Option 1:
Vergrößern Sie die Breite der Schaltflächen, stapeln Sie Schaltflächen und brechen Sie Text um, wenn er mehr als 26 Zeichen umfasst.Increase button width, stack buttons, and wrap if text length is greater than 26 characters.
Option 2:Option 2:
Erhöhen Sie die Schaltflächenhöhe, und brechen Sie Text um.Increase button height, and wrap text.

Sie können auch die visuellen Elemente anpassen, die die Darstellung der Schaltfläche ausmachen.You can also customize visuals that make up the button's appearance. Sie können beispielsweise den Text durch ein Symbol ersetzen oder zusätzlich zum Text ein Symbol verwenden.For example, you could replace the text with an icon, or use an icon in addition to text.

Im folgenden Beispiel wird ein StackPanel-Element, das ein Bild und Text enthält, als Inhalt einer Schaltfläche festgelegt.Here, a StackPanel that contains an image and text is set as the content of a button.

<Button Click="Button_Click"
        Background="LightGray"
        Height="100" Width="80">
    <StackPanel>
        <Image Source="Assets/Photo.png" Height="62"/>
        <TextBlock Text="Photos" Foreground="Black"
                   HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

Die Schaltfläche sieht wie folgt aus.The button looks like this.

Eine Schaltfläche mit Bild- und Textinhalt

Erstellen einer WiederholungsschaltflächeCreate a repeat button

Ein RepeatButton-Steuerelement ist eine Schaltfläche, die Click-Ereignisse auslöst, die andauern, solange die Schaltfläche betätigt wird.A RepeatButton control is a button that raises Click events repeatedly from the time it's pressed until it's released. Legen Sie mit der Delay-Eigenschaft fest, wie lange das RepeatButton-Steuerelement nach dem Betätigen der Schaltfläche wartet, bis die Klickaktion wiederholt wird.Set the Delay property to specify the time that the RepeatButton control waits after it is pressed before it starts repeating the click action. Legen Sie mit der Interval-Eigenschaft das Intervall zwischen Wiederholungen der Klickaktion fest.Set the Interval property to specify the time between repetitions of the click action. Die Zeiten beider Eigenschaften werden in Millisekunden angegeben.Times for both properties are specified in milliseconds.

Das folgende Beispiel zeigt zwei RepeatButton-Steuerelemente. Ihre jeweiligen Click-Ereignisse dienen dazu, den Wert in einem Textblock zu erhöhen oder zu verringern.The following example shows two RepeatButton controls whose respective Click events are used to increase and decrease the value shown in a text block.

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

Erstellen einer Dropdown-SchaltflächeCreate a drop down button

DropDownButton erfordert die Windows-UI-Bibliothek oder Windows 10, Version 1809 (SDK 17763) oder höher.DropDownButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Sie können das neueste SDK von Windows 10 SDK herunterladen. Frühere SDKs können Sie von Windows SDK und Emulator-Archiv herunterladen.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Ein DropDownButton ist eine Schaltfläche mit einem Chevron als visueller Indikator, mit dem angezeigt wird, dass ein angefügtes Flyout mit weiteren Optionen vorhanden ist.A DropDownButton is a button that shows a chevron as a visual indicator that it has an attached flyout that contains more options. Es weist dasselbe Verhalten wie ein standardmäßiges Button-Steuerelement mit einem Flyout auf; lediglich die Darstellung ist anders.It has the same behavior as a standard Button control with a flyout; only the appearance is different.

Die Dropdown-Schaltfläche erbt das Click-Ereignis, dieses wird jedoch in der Regel nicht verwendet.The drop down button inherits the Click event, but you typically don't use it. Stattdessen verwenden Sie die Flyout-Eigenschaft, um ein Flyout anzufügen und Aktionen über die Menüoptionen im Flyout aufzurufen.Instead, you use the Flyout property to attach a flyout and invoke actions by using menu options in the flyout. Das Flyout wird beim Klicken auf die Schaltfläche automatisch geöffnet.The flyout opens automatically when the button is clicked. Sie müssen die Placement-Eigenschaft des Flyouts angeben, um die gewünschte Platzierung in Bezug auf die Schaltfläche sicherzustellen.Be sure to specify the Placement property of your flyout to ensure the desired placement in relation to the button. Der Standardalgorithmus für die Platzierung liefert möglicherweise nicht in allen Situationen die gewünschte Platzierung.The default placement algorithm might not produce the intended placement in all situations.

Tipp

Weitere Informationen zu Flyouts finden Sie unter Menüs und Kontextmenüs.For more info about flyouts, see Menus and context menus.

Beispiel für eine Dropdown-SchaltflächeExample - Drop down button

In diesem Beispiel wird erläutert, wie Sie eine Dropdown-Schaltfläche mit einem Flyout erstellen, das Befehle für die Ausrichtung von Absätzen in einem RichEditBox-Steuerelement enthält.This example shows how to create a drop down button with a flyout that contains commands for paragraph alignment in a RichEditBox control. (Weitere Informationen und Code finden Sie unter Rich-Edit-Feld.)(For more info and code, see Rich edit box).

Eine Dropdown-Schaltfläche mit den Ausrichtungsbefehlen

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

Erstellen einer unterteilten SchaltflächeCreate a split button

Wichtig

SplitButton erfordert die Windows-UI-Bibliothek oder Windows 10, Version 1809 (SDK 17763) oder höher.SplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Sie können das neueste SDK von Windows 10 SDK herunterladen. Frühere SDKs können Sie von Windows SDK und Emulator-Archiv herunterladen.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Ein SplitButton-Steuerelement weist zwei Teile auf, die separat aufgerufen werden können.A SplitButton control has two parts that can be invoked separately. Ein Teil verhält sich wie eine Standardschaltfläche und bewirkt, dass sofort eine Aktion aufgerufen wird.One part behaves like a standard button and invokes an immediate action. Mit dem anderen Teil wird ein Flyout mit zusätzlichen Optionen aufgerufen, aus denen der Benutzer wählen kann.The other part invokes a flyout that contains additional options that the user can choose from.

Hinweis

Bei Aufruf per Toucheingabe verhält sich die unterteilte Schaltfläche wie eine Dropdown-Schaltfläche; beide Hälften der Schaltfläche rufen das Flyout auf.When invoked with touch, the split button behaves as a drop down button; both halves of the button invoke the flyout. Bei anderen Eingabemethoden kann der Benutzer eine Hälfte der Schaltfläche separat aufrufen.With other methods of input, a user can invoke either half of the button separately.

Typisches Verhalten für eine unterteilte Schaltfläche:The typical behavior for a split button is:

  • Wenn der Benutzer auf den Teil der Schaltfläche klickt, wird das Click-Ereignis verarbeitet, um die derzeit im Dropdown ausgewählte Option aufzurufen.When the user clicks the button part, handle the Click event to invoke the option that's currently selected in the drop down.

  • Wenn das Dropdown geöffnet ist, wird der Aufruf der Elemente im Dropdown behandelt; dabei wird die ausgewählte Option gewechselt und aufgerufen.When the drop down is open, handle invocation of the items in the drop down to both change which option is selected, and then invoke it. Es ist wichtig, dass das Flyout-Element aufgerufen wird, da das Click-Ereignis der Schaltfläche bei einer Toucheingabe nicht eintritt.It's important to invoke the flyout item because the button Click event doesn't occur when using touch.

Tipp

Es gibt viele Möglichkeiten, Elemente in das Dropdown einzubinden und ihren Aufruf zu behandeln.There are many ways to put items in the drop down and handle their invocation. Wenn Sie eine ListView oder GridView verwenden, besteht eine Möglichkeit darin, das SelectionChanged-Ereignis zu behandeln.If you use a ListView or GridView, one way is to handle the SelectionChanged event. Legen Sie in diesem Fall SingleSelectionFollowsFocus auf false fest.If you do this, set SingleSelectionFollowsFocus to false. Dadurch können Benutzer über Tastatureingaben durch die Optionen navigieren, ohne dass das Element bei jedem Wechseln aufgerufen wird.This lets users navigate the options using a keyboard without invoking the item on each change.

Beispiel für eine unterteilte SchaltflächeExample - Split button

In diesem Beispiel wird veranschaulicht, wie Sie eine unterteilte Schaltfläche erstellen, über welche die Vordergrundfarbe von ausgewähltem Text in einem RichEditBox-Steuerelement geändert wird.This example shows how to create a split button that is used to change the foreground color of selected text in a RichEditBox control. (Weitere Informationen und Code finden Sie unter Rich-Edit-Feld.)(For more info and code, see Rich edit box). Das Flyout der unterteilten Schaltfläche verwendet BottomEdgeAlignedLeft als Standardwert für seine Placement-Eigenschaft.Split button's flyout uses BottomEdgeAlignedLeft as the default value for its Placement property. Dieser Wert kann nicht überschrieben werden.You can't override this value.

Unterteilte Schaltfläche zur Auswahl der Vordergrundfarbe

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

Erstellen einer unterteilten UmschaltflächeCreate a toggle split button

Hinweis

ToggleSplitButton erfordert die Windows-UI-Bibliothek oder Windows 10, Version 1809 (SDK 17763) oder höher.ToggleSplitButton requires the Windows UI Library or Windows 10, version 1809 (SDK 17763) or later. Sie können das neueste SDK von Windows 10 SDK herunterladen. Frühere SDKs können Sie von Windows SDK und Emulator-Archiv herunterladen.To download the latest SDK, see Windows 10 SDK; to download an earlier SDK, see Windows SDK and emulator archive.

Ein ToggleSplitButton-Steuerelement weist zwei Teile auf, die separat aufgerufen werden können.A ToggleSplitButton control has two parts that can be invoked separately. Ein Teil verhält sich wie eine Umschaltfläche, mit der eine Option aktiviert oder deaktiviert werden kann.One part behaves like a toggle button that can be on or off. Mit dem anderen Teil wird ein Flyout mit zusätzlichen Optionen aufgerufen, aus denen der Benutzer wählen kann.The other part invokes a flyout that contains additional options that the user can choose from.

Mit einer unterteilten Umschaltfläche wird in der Regel eine Funktion aktiviert bzw. deaktiviert, wenn die Funktion über mehrere Optionen verfügt, unter denen der Benutzer auswählen kann.A toggle split button is typically used to enable or disable a feature when the feature has multiple options that the user can choose from. Sie kann beispielsweise in einem Dokument-Editor verwendet werden, um Listen zu aktivieren oder zu deaktivieren, während über das Dropdown der Stil der Liste ausgewählt wird.For example, in a document editor, it could be used to turn lists on or off, while the drop down is used to choose the style of the list.

Hinweis

Beim Aufruf per Toucheingabe verhält sich die unterteilte Umschaltfläche wie eine Dropdown-Schaltfläche.When invoked with touch, the toggle split button behaves as a drop down button. Bei anderen Eingabemethoden kann der Benutzer die beiden Hälften der Schaltfläche umschalten und separat voneinander aufrufen.With other methods of input, a user can toggle and invoke the two halves of the button separately. Beim Aufruf per Toucheingabe rufen beide Hälften der Schaltfläche das Flyout auf.With touch, both halves of the button invoke the flyout. Daher müssen Sie eine Option in den Flyout-Inhalt einbinden, mit der die Schaltfläche aktiviert bzw. deaktiviert wird.Therefore, you must include an option in your flyout content to toggle the button on or off.

Unterschiede bei ToggleButtonDifferences with ToggleButton

Im Unterschied zu ToggleButton weist ToggleSplitButton keinen unbestimmten Zustand auf.Unlike ToggleButton, ToggleSplitButton does not have an indeterminate state. Deshalb sollten Sie diese Unterschiede beachten:As a result, you should keep in mind these differences:

  • ToggleSplitButton verfügt weder über eine IsThreeState-Eigenschaft noch über das Indeterminate-Ereignis.ToggleSplitButton does not have an IsThreeState property or Indeterminate event.
  • Die ToggleSplitButton.IsChecked-Eigenschaft hat nur einen booleschen Wert, keinen booleschen Wert, der NULL-Werte zulässt .The ToggleSplitButton.IsChecked property is just a Boolean, not a Nullable.
  • ToggleSplitButton verfügt nur über das IsCheckedChanged-Ereignis und nicht über die separaten Ereignisse Checked und Unchecked.ToggleSplitButton has only the IsCheckedChanged event; it does not have separate Checked and Unchecked events.

Beispiel für eine unterteilte UmschaltflächeExample - Toggle split button

Im folgenden Beispiel wird veranschaulicht, wie eine unterteilte Umschaltfläche verwendet werden kann, um die Listenformatierung zu aktivieren bzw. zu deaktivieren und den Stil der Liste in einem RichEditBox-Steuerelement zu ändern.The following example shows how a toggle split button could be used to turn list formatting on or off, and change the style of the list, in a RichEditBox control. (Weitere Informationen und Code finden Sie unter Rich-Edit-Feld.)(For more info and code, see Rich edit box). Das Flyout der unterteilten Umschaltfläche verwendet BottomEdgeAlignedLeft als Standardwert für seine Placement-Eigenschaft.The flyout of the toggle split button uses BottomEdgeAlignedLeft as the default value for its Placement property. Dieser Wert kann nicht überschrieben werden.You can't override this value.

Unterteilte Umschaltfläche zum Auswählen von Listenstilen

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

EmpfehlungenRecommendations

  • Der Zweck und Status einer Schaltfläche müssen für den Benutzer eindeutig sein.Make sure the purpose and state of a button are clear to the user.

  • Wenn mehrere Schaltflächen für die gleiche Entscheidung (z. B. in einem Bestätigungsdialogfeld) vorhanden sind, stellen Sie die Schaltflächen für den Commit in der folgenden Reihenfolge dar, wobei [Ausführen] und [Nicht ausführen] bestimmte Antworten auf die Hauptanweisung sind:When there are multiple buttons for the same decision (such as in a confirmation dialog), present the commit buttons in this order, where [Do it] and [Don't do it] are specific responses to the main instruction:

    • OK/[Ausführen]/JaOK/[Do it]/Yes
      • [Nicht ausführen]/Nein[Don't do it]/No
      • AbbrechenCancel
  • Stellen Sie dem Benutzer jeweils nur zwei Schaltflächen zur Verfügung, beispielsweise Akzeptieren und Abbrechen.Expose only one or two buttons to the user at a time, for example, Accept and Cancel. Wenn Sie dem Benutzer mehr Aktionen zur Verfügung stellen möchten, sollten Sie Kontrollkästchen oder Optionsfelder verwenden, über die der Benutzer Aktionen mit einer einzelnen Befehlsschaltfläche auslösen kann.If you need to expose more actions to the user, consider using checkboxes or radio buttons from which the user can select actions, with a single command button to trigger those actions.

  • Für eine Aktion, die auf mehreren Seiten in Ihrer App verfügbar sein muss, sollten Sie die Verwendung einer unteren App-Leiste in Erwägung ziehen, anstatt eine Schaltfläche auf mehreren Seiten zu duplizieren.For an action that needs to be available across multiple pages within your app, instead of duplicating a button on multiple pages, consider using a bottom app bar.

Wenn in Ihrem Layout nur eine einzige Schaltfläche benötigt wird, sollten Sie diese je nach ihrem Containerkontext entweder linksbündig oder rechtsbündig ausrichten.If your layout requires only one button, it should be either left- or right-aligned based on its container context.

  • In Dialogfeldern mit nur einer einzigen Schaltfläche sollte die Schaltfläche rechtsbündig ausgerichtet sein.Dialogs with only one button should right-align the button. Stellen Sie bei Dialogfeldern mit nur einer einzigen Schaltfläche sicher, dass die Schaltfläche die sichere, nicht destruktive Aktion ausführt.If your dialog contains only one button, ensure that the button performs the safe, nondestructive action. Wenn Sie die Klasse ContentDialog verwenden und nur eine einzige Schaltfläche definieren, wird diese Schaltfläche automatisch rechtsbündig ausgerichtet.If you use ContentDialog and specify a single button, it will be automatically right-aligned.

    Schaltfläche in einem Dialogfeld

  • Wird die Schaltfläche als Teil einer Containerbenutzeroberfläche angezeigt (z. B. innerhalb einer Popupbenachrichtigung, eines Flyouts oder eines Listenansicht-Elements), sollten Sie die Schaltfläche innerhalb des Containers rechtsbündig ausrichten.If your button appears within a container UI (for example, within a toast notification, a flyout, or a list view item), you should right-align the button within the container.

    Schaltfläche in einem Container

  • Auf Seiten mit einer einzigen Schaltfläche (z. B. einer Einstellungsseite mit der Schaltfläche Anwenden am unteren Rand) sollten Sie die Schaltfläche linksbündig ausrichten.In pages that contain a single button (for example, an Apply button at the bottom of a settings page), you should left-align the button. Das gewährleistet, dass die Schaltfläche passend zum übrigen Seiteninhalt ausgerichtet ist.This ensures that the button aligns with the rest of the page content.

    Schaltfläche auf einer Seite

Zurück-SchaltflächenBack buttons

Die Zurück-Schaltfläche ist ein durch das System bereitgestelltes Benutzeroberflächenelement, das die Rückwärtsnavigation über den Back-Stapel oder den Navigationsverlauf des Benutzers ermöglicht.The back button is a system-provided UI element that enables backward navigation through either the back stack or navigation history of the user. Sie müssen keine eigene Zurück-Schaltfläche erstellen, aber unter Umständen ist etwas Aufwand erforderlich, um eine gute Rückwärtsnavigation zu ermöglichen.You don't have to create your own back button, but you might have to do some work to enable a good backwards navigation experience. Weitere Informationen finden Sie im Artikel Navigationsverlauf und Rückwärtsnavigation für UWP-Apps.For more info, see Navigation history and backwards navigation for UWP apps.

Beispielcode herunterladenGet the sample code