Delen via

Schakelaar omzetten

De wisselknop vertegenwoordigt een fysieke schakelaar waarmee gebruikers dingen kunnen in- of uitschakelen, zoals een lichtschakelaar. Schakelknoppen gebruiken om gebruikers te presenteren met twee wederzijds exclusieve opties (zoals aan/uit), waarbij het kiezen van een optie onmiddellijke resultaten oplevert.

Als u een wisselknop wilt maken, gebruikt u de toggleSwitch-klasse.

Is dit de juiste controle?

Gebruik een schakelaar voor binaire bewerkingen die direct van kracht worden nadat de gebruiker de schakelaar heeft omgezet.

Wisselknop, aan

Wisselknop uitschakelen

U kunt de wisselknop beschouwen als een fysieke schakeloptie voor een apparaat: u kunt deze in- of uitschakelen wanneer u de actie die door het apparaat wordt uitgevoerd, wilt in- of uitschakelen.

Als u de wisselknop gemakkelijk te begrijpen wilt maken, labelt u deze met een of twee woorden, bij voorkeur zelfstandige naamwoorden, waarmee de functionaliteit wordt beschreven die wordt bepaald. Bijvoorbeeld 'WiFi' of 'Keukenverlichting'.

Kiezen tussen wisselknop en selectievakje

Voor sommige acties werkt een wisselknop of een selectievakje mogelijk. Volg deze tips om te bepalen welke controle beter werkt:

  • Gebruik een wisselknop voor binaire instellingen wanneer wijzigingen onmiddellijk van kracht worden nadat de gebruiker deze heeft gewijzigd.

    Schakeloptie versus selectievakje

    In dit voorbeeld is het duidelijk met de wisselknop dat de keukenlampen zijn ingesteld op 'Aan'. Maar met het selectievakje moet de gebruiker nadenken of de lichten nu zijn ingeschakeld of of ze het selectievakje moeten inschakelen om het licht in te schakelen.

  • Gebruik selectievakjes voor optionele items ('leuk om te hebben').

  • Gebruik een selectievakje wanneer de gebruiker extra stappen moet uitvoeren om wijzigingen effectief te laten zijn. Als de gebruiker bijvoorbeeld op een knop Verzenden of Volgende moet klikken om wijzigingen toe te passen, schakelt u een selectievakje in.

  • Schakel selectievakjes in wanneer de gebruiker meerdere items kan selecteren die zijn gerelateerd aan één instelling of functie.

Aanbevelingen

  • Gebruik indien mogelijk de standaardlabels Aan en Uit; vervang ze alleen wanneer de wisselknop nodig is om zinvol te zijn. Als u deze vervangt, gebruikt u één woord dat de wisselknop nauwkeuriger beschrijft. Als de woorden 'Aan' en 'Uit' in het algemeen niet de actie beschrijven die is gekoppeld aan een wisselknop, hebt u mogelijk een ander besturingselement nodig.
  • Vermijd het vervangen van de labels Aan en Uit, tenzij u dat moet; houd de standaardlabels aan, tenzij in de situatie aangepaste labels worden aangedragen.

Een wisselknop maken

Open de WinUI 3 Gallery-app en bekijk de ToggleSwitch in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

U kunt als volgt een eenvoudige wisselknop maken. Met deze XAML wordt de wisselknop gemaakt die eerder is weergegeven.

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

U kunt als volgt dezelfde wisselknop in code maken.

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

De schakelaar kan in- of uitschakelen. Gebruik de eigenschap IsOn om de status van de switch te bepalen. Wanneer de schakelaar wordt gebruikt om de status van een andere binaire eigenschap te beheren, kunt u een binding gebruiken, zoals hier getoond.

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

Geschakeld

In andere gevallen kunt u het omschakeling evenement afhandelen om te reageren op wijzigingen in de toestand.

In dit voorbeeld ziet u hoe een Toggled-eventhandler wordt toegevoegd in XAML en in de code. Het Toggled-evenement wordt afgehandeld om een voortgangsring aan of uit te zetten en de zichtbaarheid te veranderen.

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

U kunt als volgt dezelfde wisselknop in code maken.

// 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 is de handler voor het 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;
        }
    }
}

Labels in-/uitschakelen

Standaard bevat de wisselknop letterlijke labels aan en uit, die automatisch worden gelokaliseerd. U kunt deze labels vervangen door de eigenschappen OnContent en OffContent in te stellen.

In dit voorbeeld worden de labels Aan/Uit vervangen door Labels weergeven/verbergen.

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

U kunt ook complexere inhoud gebruiken door de eigenschappen OnContentTemplate en OffContentTemplate in te stellen.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen.

  • Last updated on