Delen via

Sliders

Een schuifregelaar is een besturingselement waarmee de gebruiker een keuze kan maken uit een bereik van waarden door een duimbesturingselement langs een spoor te verplaatsen.

een schuifregelaar

Is dit de juiste controle?

Gebruik een schuifregelaar als u wilt dat uw gebruikers gedefinieerde, aaneengesloten waarden (zoals volume of helderheid) of een bereik van discrete waarden (zoals instellingen voor schermresolutie) kunnen instellen.

Een schuifregelaar is een goede keuze wanneer u weet dat gebruikers de waarde beschouwen als een relatieve hoeveelheid, niet als numerieke waarde. Gebruikers denken bijvoorbeeld aan het instellen van hun audiovolume op laag of gemiddeld, niet over het instellen van de waarde op 2 of 5.

Gebruik geen schuifregelaar voor binaire instellingen. Gebruik in plaats daarvan een wisselknop.

Hier volgen enkele aanvullende factoren die u moet overwegen bij het bepalen of u een schuifregelaar wilt gebruiken:

  • Lijkt de instelling een relatieve hoeveelheid? Als dat niet het geval is, gebruik keuzerondjes of een keuzelijst.
  • Is de instelling een exacte, bekende numerieke waarde? Als dat zo is, gebruik een numeriek tekstvak .
  • Profiteert een gebruiker van directe feedback over het effect van het instellen van wijzigingen? Zo ja, gebruik dan een schuifregelaar. Gebruikers kunnen bijvoorbeeld gemakkelijker een kleur kiezen door direct het effect van wijzigingen in tint-, verzadigings- of helderheidswaarden te zien.
  • Heeft de instelling een bereik van vier of meer waarden? Als dat niet zo is, gebruikt u radioknoppen.
  • Kan de gebruiker de waarde wijzigen? Schuifregelaars zijn bedoeld voor gebruikersinteractie. Als een gebruiker de waarde nooit kan wijzigen, gebruik dan alleen-leestekst in plaats daarvan.

Als u een keuze wilt maken tussen een schuifregelaar en een numeriek tekstvak, gebruikt u een numeriek tekstvak als:

  • Schermruimte is beperkt.
  • De gebruiker geeft waarschijnlijk de voorkeur aan het toetsenbord.

Gebruik een schuifregelaar als:

  • Gebruikers profiteren van directe feedback.

Aanbevelingen

  • Pas de grootte van het besturingselement aan zodat gebruikers eenvoudig de gewenste waarde kunnen instellen. Voor instellingen met discrete waarden moet u ervoor zorgen dat de gebruiker eenvoudig een waarde kan selecteren met behulp van de muis. Zorg ervoor dat de eindpunten van de schuifregelaar altijd binnen de grenzen van een weergave passen.
  • Direct feedback geven terwijl of nadat een gebruiker een selectie maakt (indien praktisch). De Windows-volumeregeling piept bijvoorbeeld om het geselecteerde audiovolume aan te geven.
  • Gebruik labels om het bereik met waarden weer te geven. Uitzondering: Als de schuifregelaar verticaal is gericht en het bovenste label Maximum, Hoog, Meer of gelijkwaardig is, kunt u de andere labels weglaten omdat de betekenis duidelijk is.
  • Schakel alle bijbehorende labels of feedbackelementen uit wanneer u de schuifregelaar uitschakelt.
  • Houd rekening met de richting van tekst bij het instellen van de stroomrichting en/of stand van de schuifregelaar. Script stroomt van links naar rechts in sommige talen en van rechts naar links in andere talen.
  • Gebruik geen schuifregelaar als voortgangsindicator.
  • Wijzig de grootte van de schuifknop niet van de standaardgrootte.
  • Maak geen doorlopende schuifregelaar als het bereik van waarden groot is en gebruikers waarschijnlijk een van de verschillende representatieve waarden uit het bereik selecteren. Gebruik deze waarden in plaats daarvan als de enige stappen die zijn toegestaan. Als de tijdwaarde bijvoorbeeld maximaal 1 maand kan zijn, maar gebruikers slechts uit één minuut, 1 uur, 1 dag of 1 maand hoeven te kiezen, maakt u een schuifregelaar met slechts vier stappunten.

Aanvullende gebruiksrichtlijnen

De juiste indeling kiezen: horizontaal of verticaal

U kunt uw schuifregelaar horizontaal of verticaal richten. Gebruik deze richtlijnen om te bepalen welke indeling moet worden gebruikt.

  • Gebruik een natuurlijke richting. Als de schuifregelaar bijvoorbeeld een reële wereldwaarde vertegenwoordigt die normaal, zoals temperatuur, verticaal wordt weergegeven, gebruikt u een verticale oriëntatie.
  • Als het bedieningselement wordt gebruikt om binnen mediabestanden te navigeren, zoals in een video-app, gebruikt u een horizontale oriëntatie.
  • Wanneer u een schuifregelaar op de pagina gebruikt die in één richting kan worden gesleept (horizontaal of verticaal), gebruikt u een andere oriëntatie voor de schuifregelaar dan de sleeprichting. Anders kunnen gebruikers de schuifregelaar vegen en de waarde per ongeluk wijzigen wanneer ze de pagina proberen te scrollen.
  • Als u nog steeds niet zeker weet welke afdrukstand u wilt gebruiken, gebruikt u de afdrukstand die het beste past bij uw pagina-indeling.

Bereikrichting

De richting van het bereik is de richting waarin u de schuifregelaar verplaatst wanneer u deze van de huidige waarde naar de maximale waarde schuift.

  • Voor verticale schuifregelaar plaatst u de grootste waarde boven aan de schuifregelaar, ongeacht de leesrichting. Voor een volumeschuifregelaar plaatst u bijvoorbeeld altijd de maximale volumeinstelling boven aan de schuifregelaar. Voor andere typen waarden (zoals dagen van de week) volgt u de leesrichting van de pagina.
  • Voor horizontale stijlen plaatst u de lagere waarde aan de linkerkant van de schuifregelaar voor de pagina-indeling van links naar rechts, en aan de rechterkant voor de pagina-indeling van rechts naar links.
  • De enige uitzondering op de vorige richtlijn is voor mediazoekbalken: plaats altijd de lagere waarde aan de linkerkant van de schuifregelaar.

Stappen en streepjescodes

  • Gebruik stappunten als u niet wilt dat de schuifregelaar willekeurige waarden tussen min en max toestaat. Als u bijvoorbeeld een schuifregelaar gebruikt om het aantal filmtickets op te geven dat u wilt kopen, staat u geen drijvendekommawaarden toe. Geef deze een stapwaarde van 1.
  • Als u stappen opgeeft (ook wel uitlijnpunten genoemd), moet u ervoor zorgen dat de laatste stap overeenkomt met de maximale waarde van de schuifregelaar.
  • Gebruik maatstreepjes als u gebruikers de locatie van primaire of significante waarden wilt weergeven. Een schuifregelaar waarmee een zoom wordt ingesteld, kan bijvoorbeeld maatstreepjes bevatten voor 50%, 100%en 200%.
  • Maatstreepjes weergeven wanneer gebruikers de geschatte waarde van de instelling moeten weten.
  • Maatstreepjes en een waardelabel weergeven wanneer gebruikers de exacte waarde moeten weten van de instelling die ze kiezen, zonder interactie met het besturingselement. Anders kunnen ze de waarde-tooltip gebruiken om de exacte waarde te zien.
  • Maatstreepjes altijd weergeven wanneer stappunten niet duidelijk zijn. Als de schuifregelaar bijvoorbeeld 200 pixels breed is en 200 schaalpunten heeft, kunt u de markeringen verbergen omdat gebruikers het snapgedrag niet merken. Toon markeringen als er slechts 10 uitlijnpunten zijn.

Labels

  • schuifregelaarlabels

    Het schuifregelaarlabel geeft aan waarvoor de schuifregelaar wordt gebruikt.

    • Gebruik een label zonder eindpunctie (dit is de conventie voor alle besturingslabels).
    • Plaats labels boven de schuifregelaar wanneer de schuifregelaar zich in een formulier bevindt waarin de meeste labels boven de besturingselementen worden geplaatst.
    • Plaats labels aan de zijkanten wanneer de schuifregelaar zich in een formulier bevindt waarin de meeste labels aan de zijkant van de besturingselementen worden geplaatst.
    • Vermijd het plaatsen van labels onder de schuifregelaar, omdat de vinger van de gebruiker het label mogelijk aftekent wanneer de gebruiker de schuifregelaar aanraakt.

  • bereiklabels

    De labels van het bereik of de opvulling beschrijven de minimum- en maximumwaarden van de schuifregelaar.

    • Label de twee uiteinden van het schuifregelaarbereik, tenzij een verticale stand dit onnodig maakt.
    • Gebruik slechts één woord, indien mogelijk, voor elk label.
    • Gebruik geen eindpunctie.
    • Zorg ervoor dat deze labels beschrijvend en parallel zijn. Voorbeelden: maximum/minimum, meer/minder, laag/hoog, zacht/luid.

  • waardelabels

    Een waardelabel geeft de huidige waarde van de schuifregelaar weer.

    • Als u een waardelabel nodig hebt, geeft u dit onder de schuifregelaar weer.
    • Centreer de tekst ten opzichte van het besturingselement en neem de eenheden (zoals pixels) op.
    • Aangezien de duim van de schuifregelaar wordt bedekt tijdens het wassen, kunt u overwegen om de huidige waarde op een andere manier weer te geven, met een label of een ander visueel element. Een schuifregelaar waarmee de tekstgrootte wordt ingesteld, kan een voorbeeldtekst van de juiste grootte naast de schuifregelaar weergeven.

Uiterlijk en interactie

Een schuifregelaar bestaat uit een spoor en een duim. De baan is een balk (die optioneel verschillende maatstreepjes kan weergeven) die het bereik van de waarden vertegenwoordigt dat kan worden ingevoerd. De duim is een selector, die de gebruiker kan positioneren door op het spoor te tikken of door heen en weer te wrobben.

Een schuifregelaar heeft een groot aanraakgebied. Om de aanraaktoegankelijkheid te behouden, moet een schuifregelaar ver genoeg van de rand van het scherm worden weergegeven.

Wanneer u een aangepaste schuifregelaar ontwerpt, overweeg dan om alle benodigde informatie aan de gebruiker te presenteren met zo weinig mogelijk rommel. Gebruik een waardelabel als een gebruiker de eenheden moet kennen om de instelling te begrijpen; vind creatieve manieren om deze waarden grafisch weer te geven. Een schuifregelaar waarmee het volume wordt bepaald, kan bijvoorbeeld een luidsprekerafbeelding weergeven zonder geluidsgolven aan het einde van de schuifregelaar en een luidsprekerafbeelding met geluidsgolven aan het maximumeinde.

Voorbeelden

Een schuifregelaar met maatstreepjes bij intervallen van 10 punten, van 0 tot 100.

Een schuifregelaar met tikken

Een schuifregelaar maken

Open de WinUI 3 Gallery-app en zie de schuifregelaar 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 maakt als volgt een schuifregelaar in XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

U maakt als volgt een schuifregelaar in code.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

U kunt de waarde van de schuifregelaar ophalen en instellen vanuit de eigenschap Waarde. Als u wilt reageren op waardewijzigingen, kunt u gegevensbinding gebruiken om verbinding te maken met de eigenschap Waarde of de gebeurtenis ValueChanged afhandelen.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

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. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.

  • Last updated on