Freigeben über

Umschalter

Der Umschalter stellt einen physischen Schalter dar, mit dem Benutzer Dinge ein- oder ausschalten können, wie ein Lichtschalter. Mit Umschaltersteuerelementen kannst du Benutzern zwei Optionen anbieten, die sich gegenseitig ausschließen (wie Ein/Aus), wobei die Auswahl einer Option unmittelbare Ergebnisse liefert.

Zum Erstellen eines Umschaltersteuerelements verwendest du die ToggleSwitch-Klasse.

Ist dies das richtige Steuerelement?

Verwenden Sie einen Umschalter für binäre Vorgänge, die unmittelbar nach dem Kippen des Umschalters wirksam werden.

Umschalter, Ein

Umschalter ausschalten

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.

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, beispielsweise „WLAN“ oder „Küchenlicht“.

Auswählen zwischen Umschalter und Kontrollkästchen

Bei einigen Aktionen kann entweder ein Umschalter oder ein Kontrollkästchen funktionieren. Um zu entscheiden, welches Steuerelement besser funktioniert, folgen Sie den folgenden Tipps:

  • Verwenden Sie einen Umschalter für binäre Einstellungen, wenn Änderungen sofort wirksam werden, nachdem der Benutzer sie geändert hat.

    Toggle-Schalter gegenüber Kontrollkästchen

    In diesem Beispiel ist es mit dem Kippschalter klar ersichtlich, dass die Küchenlichter eingeschaltet sind. Beim Kontrollkästchen muss der Benutzer jedoch nachdenken, ob die Lichter bereits an sind oder ob er das Kästchen ankreuzen muss, um das Licht einzuschalten.

  • Verwende Kontrollkästchen für optionale („nützliche“) Elemente.

  • Verwenden Sie ein Kontrollkästchen, wenn der Benutzer zusätzliche Schritte ausführen muss, damit Änderungen wirksam sind. Wenn der Benutzer beispielsweise auf eine Schaltfläche "Absenden" oder "Weiter" klicken muss, um Änderungen anzuwenden, verwenden Sie ein Kontrollkästchen.

  • Verwende Kontrollkästchen, wenn der Benutzer mehrere Elemente auswählen kann, die sich auf eine einzelne Einstellung oder ein einzelnes Feature beziehen.

Recommendations

  • Verwende möglichst die Standardbeschriftungen „Ein“ und „Aus“. Ersetze diese nur, wenn dies erforderlich ist, damit der Umschalter Sinn ergibt. Wenn du sie ersetzt, verwende ein einzelnes Wort, das die Umschaltfläche genauer beschreibt. 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.
  • Vermeiden Sie das Ersetzen der Beschriftungen "Ein" und "Aus", es sei denn, Sie müssen dies tun. Bleiben Sie bei den Standardbeschriftungen, es sei denn, die Situation erfordert benutzerdefinierte Beschriftungen.

Erstellen eines Umschalters

Öffnen Sie die WinUI Gallery-App, und sehen Sie den ToggleSwitch in Aktion.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Hier erfahren Sie, wie Sie einen einfachen Umschalter erstellen. Mit diesem XAML-Code wird der zuvor gezeigte Umschalter erstellt.

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

Hier erfahren Sie, wie Sie den gleichen Umschalter im Code erstellen.

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

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

Ison

Der Schalter kann entweder ein- oder ausgeschaltet sein. Mit der Eigenschaft IsOn kannst du den Zustand des Schalters ermitteln. Wenn der Schalter zum Steuern des Zustands einer anderen binären Eigenschaft verwendet wird, können Sie eine Bindung wie hier gezeigt verwenden.

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

Umschalten

In anderen Fällen kannst du das Toggled-Ereignis verarbeiten, um auf Zustandsänderungen zu reagieren.

In diesem Beispiel wird gezeigt, wie Sie einen Toggled-Ereignishandler in XAML und im Code hinzufügen. Das Toggled-Ereignis wird gehandhabt, um einen Fortschrittsring ein- oder auszuschalten und seine Sichtbarkeit zu ändern.

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

Hier erfahren Sie, wie Sie den gleichen Umschalter im Code erstellen.

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

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

Ein-/Aus-Bezeichnungen

Standardmäßig enthält der Umschalter literale Ein- und Aus-Beschriftungen, die automatisch lokalisiert werden. Du kannst diese Beschriftungen durch Festlegen der Eigenschaften OnContent und OffContent ersetzen.

In diesem Beispiel werden die An/Aus-Beschriftungen durch Anzeigen/Ausblenden-Beschriftungen ersetzt.

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

UWP und WinUI für UWP

Von Bedeutung

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI für UWP , um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen.

  • Last updated on