UmschalterToggle switches

Der Umschalter stellt einen physischen Schalter dar, mit dem Benutzer Dinge ein- oder ausschalten können, wie ein Lichtschalter.The toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Mit Umschaltersteuerelementen kannst du Benutzern zwei Optionen anbieten, die sich gegenseitig ausschließen (wie Ein/Aus), wobei die Auswahl einer Option unmittelbare Ergebnisse liefert.Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides immediate results.

Zum Erstellen eines Umschaltersteuerelements verwendest du die ToggleSwitch-Klasse.To create a toggle switch control, you use the ToggleSwitch class.

Wichtige APIs: ToggleSwitch-Klasse, IsOn-Eigenschaft, Toggled-EreignisImportant APIs: ToggleSwitch class, IsOn property, Toggled event

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

Verwenden Sie einen Umschalter für binäre Vorgänge, die wirksam werden, sobald der Benutzer den Umschalter umstellt.Use a toggle switch for binary operations that take effect right after the user flips the toggle switch.

WLAN-Umschalter ein- und ausgeschaltet

Stell dir den Umschalter als physischen Netzschalter für ein Gerät vor: Du schaltest ihn ein oder aus, wenn du die vom Gerät ausgeführte Aktion aktivieren oder deaktivieren möchtest.Think of the toggle switch as a physical power switch for a device: you flip it on or off when you want to enable or disable the action performed by the device.

Damit Benutzer die Funktion des Umschalters leicht verstehen, kennzeichne ihn mit einem oder zwei Wörtern (vorzugsweise Substantiven), die die von ihm gesteuerten Funktionen beschreiben,To make the toggle switch easy to understand, label it with one or two words, preferably nouns, that describe the functionality it controls. beispielsweise „WLAN“ oder „Küchenlicht“.For example, "WiFi" or "Kitchen lights."

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn du die App XAML-Steuerelementekatalog installiert haben, klicke hier, um die App zu öffnen und ToggleSwitch oder ToggleButton in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the ToggleSwitch or ToggleButton in action.

Wählen zwischen Umschalter und KontrollkästchenChoosing between toggle switch and check box

Für einige Aktionen kann entweder ein Umschalter oder ein Kontrollkästchen verwendet werden.For some actions, either a toggle switch or a check box might work. Berücksichtigen Sie bei der Entscheidung zwischen den beiden Steuerelementen folgende Überlegungen:To decide which control would work better, follow these tips:

  • Verwenden Sie einen Umschalter für binäre Einstellungen, wenn Änderungen direkt wirksam werden.Use a toggle switch for binary settings when changes become effective immediately after the user changes them.

    Umschalter im Vergleich zum Kontrollkästchen

    In diesem Beispiel ist durch den Umschalter klar, dass das Küchenlicht eingeschaltet ist.In this example, it's clear with the toggle switch that the kitchen lights are set to "On." Im Falle eines Kontrollkästchens muss der Benutzer erst überlegen, ob das Licht derzeit eingeschaltet ist oder ob er das Kontrollkästchen aktivieren muss, um das Licht zu einzuschalten.But with the checkbox, the user needs to think about whether the lights are on now or whether they need to check the box to turn the lights on.

  • Verwende Kontrollkästchen für optionale („nützliche“) Elemente.Use check boxes for optional ("nice to have") items.

  • Verwenden Sie ein Kontrollkästchen, wenn der Benutzer zusätzliche Schritte ausführen muss, damit die Änderungen wirksam werden.Use a checkbox when the user has to perform extra steps for changes to be effective. Verwenden Sie beispielsweise ein Kontrollkästchen, wenn der Benutzer auf die Schaltfläche „Übermitteln“ oder „Weiter“ klicken muss, damit Änderungen übernommen werden.For example, if the user must click a "submit" or "next" button to apply changes, use a check box.

  • Verwende Kontrollkästchen, wenn der Benutzer mehrere Elemente auswählen kann, die sich auf eine einzelne Einstellung oder ein einzelnes Feature beziehen.Use check boxes when the user can select multiple items that are related to a single setting or feature.

Umschalter auf der Windows-BenutzeroberflächeToggle switches in the Windows UI

Auf diesen Bildern ist gezeigt, wie Umschalter auf der Windows-Benutzeroberfläche verwendet werden.These images show how the Windows UI uses toggle switches. Hier siehst du, wie Umschalter auf dem Bildschirm für intelligente Speichereinstellungen verwendet werden:Here's how the Smart Storage Settings screen uses toggle switches:

Umschalter in intelligentem Speicher

Dieses Beispiel stammt von der Seite mit den Einstellungen für den Nachtmodus:This example is from the Night Light Settings page:

Umschalter in den Einstellungen für das Menü „Start” in Windows

Erstellen von UmschalternCreate a toggle switch

Hier sehen Sie, wie Sie einen einfachen Umschalter erstellen.Here's how to create a simple toggle switch. Mit diesem XAML-Code wird der zuvor gezeigte Umschalter erstellt.This XAML creates the toggle switch shown previously.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

An dieser Stelle wird beschrieben, wie derselbe Umschalter im Code erstellt wird.Here's how to create the same toggle switch in code.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

IsOnIsOn

Der Schalter kann entweder ein- oder ausgeschaltet sein.The switch can be either on or off. Mit der Eigenschaft IsOn kannst du den Zustand des Schalters ermitteln.Use the IsOn property to determine the state of the switch. Wenn der Schalter zur Steuerung des Zustands einer anderen binären Eigenschaft verwendet wird, können Sie wie hier gezeigt eine Bindung verwenden.When the switch is used to control the state of another binary property, you can use a binding as shown here.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" Width="130"/>
</StackPanel>

ToggledToggled

In anderen Fällen kannst du das Toggled-Ereignis verarbeiten, um auf Zustandsänderungen zu reagieren.In other cases, you can handle the Toggled event to respond to changes in the state.

In diesem Beispiel wird veranschaulicht, wie in XAML und im Code ein Toggled-Ereignis hinzugefügt wird.This example shows how to add a Toggled event handler in XAML and in code. Das Toggled-Ereignis wird behandelt, um einen Statusring ein- oder auszuschalten oder seine Sichtbarkeit zu ändern.The Toggled event is handled to turn a progress ring on or off, and change its visibility.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

An dieser Stelle wird beschrieben, wie derselbe Umschalter im Code erstellt wird.Here's how to create the same toggle switch in code.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Hier sehen Sie den Handler für das Toggled-Ereignis.Here's the handler for the Toggled event.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Beschriftungen „Ein”/„Aus”On/Off labels

Standardmäßig beinhaltet der Umschalter literalen Beschriftungen „Ein” und „Aus”, die automatisch lokalisiert werden.By default, the toggle switch includes literal On and Off labels, which are localized automatically. Du kannst diese Beschriftungen durch Festlegen der Eigenschaften OnContent und OffContent ersetzen.You can replace these labels by setting the OnContent, and OffContent properties.

In diesem Beispiel werden die Beschriftungen „Ein”/„Aus” durch die Beschriftungen „Einblenden”/„Ausblenden” ersetzt.This example replaces the On/Off labels with Show/Hide labels.

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

Du kannst auch komplexeren Inhalt verwenden, indem du die Eigenschaften OnContentTemplate und OffContentTemplate festlegst.You can also use more complex content by setting the OnContentTemplate and OffContentTemplate properties.

EmpfehlungenRecommendations

  • Verwende möglichst die Standardbeschriftungen „Ein“ und „Aus“. Ersetze diese nur, wenn dies erforderlich ist, damit der Umschalter Sinn ergibt.Use the default On and Off labels when you can; only replace them when it's necessary for the toggle switch to make sense. Wenn du sie ersetzt, verwende ein einzelnes Wort, das die Umschaltfläche genauer beschreibt.If you replace them, use a single word that more accurately describes the toggle. In der Regel gilt Folgendes: Wenn die Wörter „Ein“ und „Aus“ die mit einem Umschalter verknüpfte Aktion nicht beschreiben, benötigst du möglicherweise ein anderes Steuerelement.In general, if the words "On" and "Off" don't describe the action tied to a toggle switch, you might need a different control.
  • Die Beschriftungen „Ein“ und „Aus“ sollten nur ersetzt werden, falls unbedingt nötig. Behalten Sie die Standardbeschriftungen bei, sofern keine benutzerdefinierten Beschriftungen erforderlich sind.Avoid replacing the On and Off labels unless you must; stick with the default labels unless the situation calls for custom ones.

Beispielcode herunterladenGet the sample code