Umschalter

  • Artikel

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.

Um ein Umschaltsteuerelement zu erstellen, verwenden Sie die ToggleSwitch-Klasse.

Ist dies das richtige Steuerelement?

Verwenden Sie einen Umschalter für binäre Vorgänge, die wirksam werden, sobald der Benutzer den Umschalter umstellt.

Umschalter ein, ein

Umschalten

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

Wählen zwischen Umschalter und Kontrollkästchen

Für einige Aktionen kann entweder ein Umschalter oder ein Kontrollkästchen verwendet werden. Berücksichtigen Sie bei der Entscheidung zwischen den beiden Steuerelementen folgende Überlegungen:

  • Verwenden Sie einen Umschalter für binäre Einstellungen, wenn Änderungen direkt wirksam werden.

    Umschalter im Vergleich zum Kontrollkästchen

    In diesem Beispiel ist mit dem Umschaltschalter klar, dass die Küchenbeleuchtung auf "Ein" festgelegt ist. Mit dem Kontrollkästchen muss der Benutzer jedoch darüber nachdenken, ob die Leuchten jetzt eingeschaltet sind oder ob er das Kontrollkästchen aktivieren 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 die Änderungen wirksam werden. Verwenden Sie beispielsweise ein Kontrollkästchen, wenn der Benutzer auf die Schaltfläche „Übermitteln“ oder „Weiter“ klicken muss, damit Änderungen übernommen werden.

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

Empfehlungen

  • 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.
  • Die Beschriftungen „Ein“ und „Aus“ sollten nur ersetzt werden, falls unbedingt nötig. Behalten Sie die Standardbeschriftungen bei, sofern keine benutzerdefinierten Beschriftungen erforderlich sind.

UWP und WinUI 2

Wichtig

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.

Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen.

Erstellen von Umschaltern

Öffnen Sie die WinUI 3-Katalog-App, und sehen Sie sich die Aktion Umschalten an.

Die WinUI 3-Katalog-App umfasst 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 sehen Sie, wie Sie einen einfachen Umschalter erstellen. Mit diesem XAML-Code wird der zuvor gezeigte Umschalter erstellt.

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

An dieser Stelle wird beschrieben, wie derselbe Umschalter im Code erstellt wird.

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 zur Steuerung des Zustands einer anderen binären Eigenschaft verwendet wird, können Sie wie hier gezeigt eine Bindung verwenden.

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

Toggled

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

In diesem Beispiel wird veranschaulicht, wie in XAML und im Code ein Toggled-Ereignis hinzugefügt wird. Das Toggled-Ereignis wird behandelt, um einen Statusring ein- oder auszuschalten oder seine Sichtbarkeit zu ändern.

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

An dieser Stelle wird beschrieben, wie derselbe Umschalter im Code erstellt wird.

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

Beschriftungen „Ein”/„Aus”

Standardmäßig beinhaltet der Umschalter literalen Beschriftungen „Ein” und „Aus”, die automatisch lokalisiert werden. Du kannst diese Beschriftungen durch Festlegen der Eigenschaften OnContent und OffContent ersetzen.

In diesem Beispiel werden die Beschriftungen „Ein”/„Aus” durch die Beschriftungen „Einblenden”/„Ausblenden” 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.

Beispielcode herunterladen