Dela via

Vippströmbrytare

Växlingsknappen representerar en fysisk växel som gör det möjligt för användare att aktivera eller inaktivera saker, till exempel en strömbrytare. Använd vippkontroller för att erbjuda användarna två alternativ som är ömsesidigt uteslutande (till exempel på/av), som ger omedelbara resultat när ett alternativ väljs.

Om du vill skapa en växelkontroll använder du klassen ToggleSwitch.

Är det här rätt kontroll?

Använd en växlingsväxel för binära åtgärder som börjar gälla direkt efter att användaren har växlat växeln.

Växla växel, på

Stäng av växeln

Tänk på växlingsknappen som en fysisk strömbrytare för en enhet: du aktiverar eller inaktiverar den när du vill aktivera eller inaktivera åtgärden som utförs av enheten.

Om du vill göra växlingsknappen lätt att förstå märker du den med ett eller två ord, helst substantiv, som beskriver de funktioner som den styr. Till exempel "WiFi" eller "Köksbelysning".

Välja mellan växlingsknapp och kryssruta

För vissa åtgärder kan antingen en växlingsknapp eller en kryssruta fungera. Följ dessa tips för att avgöra vilken kontroll som skulle fungera bättre:

  • Använd en växlingsväxel för binära inställningar när ändringarna träder i kraft omedelbart efter att användaren har ändrat dem.

    Växlingsknapp jämfört med kryssruta

    I det här exemplet är det tydligt med växlingsknappen att köksbelysningen är inställd på "På". Men med kryssrutan måste användaren tänka på om lamporna är på nu eller om de behöver markera kryssrutan för att tända lamporna.

  • Använd kryssrutor för valfria ("trevligt att ha") objekt.

  • Använd en kryssruta när användaren måste utföra extra steg för att ändringarna ska vara effektiva. Om användaren till exempel måste klicka på knappen "skicka" eller "nästa" för att tillämpa ändringar använder du en kryssruta.

  • Använd kryssrutor när användaren kan markera flera objekt som är relaterade till en enda inställning eller funktion.

Recommendations

  • Använd standardetiketterna På och Av när du kan. byt endast ut dem när det är nödvändigt för att växlingsknappen ska vara meningsfull. Om du ersätter dem använder du ett enda ord som mer exakt beskriver växlingsknappen. Om orden "På" och "Av" i allmänhet inte beskriver åtgärden som är kopplad till en växlingsknapp kan du behöva en annan kontroll.
  • Undvik att ersätta på- och av-etiketterna om du inte måste. håll dig till standardetiketterna såvida inte situationen kräver anpassade etiketter.

Skapa en växlingsväxel

Öppna WinUI 3-galleriappen och se hur ToggleSwitch fungerar

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

Så här skapar du en enkel växlingsknapp. Denna XAML skapar vippströmbrytaren som visades tidigare.

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

Så här skapar du samma växel i kod.

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

Strömbrytaren kan vara antingen på eller av. Använd egenskapen IsOn för att fastställa tillståndet för växeln. När växeln används för att styra tillståndet för en annan binär egenskap kan du använda en bindning som visas här.

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

Omkopplad

I andra fall kan du hantera den växlade händelsen för att svara på ändringar i tillståndet.

Det här exemplet visar hur du lägger till en Toggled-händelsehanterare i XAML och i kod. Den växlade händelsen hanteras för att aktivera eller inaktivera en förloppsring och ändra dess synlighet.

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

Så här skapar du samma växel i kod.

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

Här är hanteraren för Toggled-händelsen.

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

På/av-etiketter

Som standard innehåller växlingsknappen literala på- och av-etiketter, som lokaliseras automatiskt. Du kan ersätta dessa etiketter genom att ange egenskaperna OnContent och OffContent .

Det här exemplet ersätter på/av-etiketterna med Visa/dölj etiketter.

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

Du kan också använda mer komplext innehåll genom att ange egenskaperna OnContentTemplate och OffContentTemplate .

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.

API:er för den här kontrollen finns i namnområdet Windows.UI.Xaml.Controls .

Vi rekommenderar att du använder det senaste WinUI 2 för att få de senaste formaten och mallarna för alla kontroller.

  • Last updated on