Delen via

Besturingselementen van de scrollviewer

Wanneer er meer gebruikersinterface-inhoud is dan u in een gebied kunt passen, gebruikt u een besturingselement voor de scrollbalk.

Scrollviewers stellen inhoud in staat om buiten de grenzen van de viewport (zichtbaar gebied) uit te breiden. Gebruikers bereiken deze inhoud door de schuifviewer te manipuleren via aanraking, muiswiel, toetsenbord of gamepad, of door de muis of pencursor te gebruiken om te communiceren met de schuifbalk van de schuifviewer.

Afhankelijk van de situatie gebruikt de scrollviewer de schuifbalk met twee verschillende visualisaties, die in de volgende afbeelding worden weergegeven: de panning-indicator (links) en de traditionele schuifbalkknop (rechts).

Een schermopname die een scrollbalk toont met een 2-pixel brede verticale lijn aan de rechterrand van de inhoud.

Een schermopname die de standaard schuifbalk illustreert, een 6 pixels brede verticale lijn met een pijl-omhoog bovenaan en een pijl-omlaag onderaan.

Belangrijk

WinUI 3 heeft twee verschillende scroll viewer besturingselementen beschikbaar: ScrollViewer en ScrollView. Wanneer we algemeen spreken over schuifviewer besturingselementen, is de informatie van toepassing op beide besturingselementen.

Het ScrollView besturingselement is vergelijkbaar met het gedrag en het gebruik van het ScrollViewer besturingselement, maar is gebaseerd op InteractionTracker, heeft nieuwe functies zoals wijzigingen in animatiegestuurde weergaven en is ontworpen om volledige functionaliteit met ItemsRepeater te garanderen.

Schuiven, pannen en in- en uitzoomen

Gebruik een schuifviewer-besturingselement om te schuiven, te pannen en van uw inhoud in te zoomen.

  • scrollen: de inhoud verticaal of horizontaal verplaatsen door de duim van de schuifbalk of het schuifwiel op een muis te slepen.
  • Scrollen: Inhoud verticaal of horizontaal verplaatsen met behulp van aanraak- of peninvoer.
    • Zie voor meer informatie over scrollen en pannen de richtlijnen voor pannen en.
  • zoomen: optisch vergroten of verkleinen van de schaal van de inhoud.

De schuifbalk is zich bewust van de invoermethode van de gebruiker en gebruikt deze om te bepalen welke visualisatie moet worden weergegeven.

  • Wanneer de regio wordt gescrold zonder de schuifbalk rechtstreeks te bewerken, bijvoorbeeld door aan te raken, wordt de panning-indicator weergegeven met de huidige schuifpositie.
  • Wanneer de muis of pencursor over de panning-indicator beweegt, verandert deze in de traditionele schuifbalk. Door de schuifbalkgreep te slepen kunt u het schuifgebied aanpassen.

Een animatie met de schuifbalktransformatie van de smalle panning-indicator naar de traditionele duim wanneer de cursor eroverheen beweegt.

Opmerking

Wanneer de schuifbalk zichtbaar is, wordt deze als een overlay van 16px bovenop de inhoud in uw ScrollViewer geplaatst. Om een goed UX-ontwerp te garanderen, wilt u ervoor zorgen dat er geen interactieve inhoud wordt verborgen door deze overlay. Als u liever geen overlappen van de gebruikerservaring wilt, houd dan 16 pixels aan de rand van de viewport aan voor de schuifbalk.

Viewport en bereik

Een schuifviewer bestaat uit twee hoofdregio's die belangrijk zijn om inzicht te krijgen in de functionaliteit ervan. Het gebied dat alle schuifbare inhoud omvat, zowel verborgen als zichtbaar, is de uitbreiding. Het zichtbare gebied van het besturingselement waar de inhoud wordt weergegeven, is de viewport.

Een tekstblok dat zich verder uitbreidt dan de viewport of het zichtbare gebied van het besturingselement.

Er zijn verschillende API's beschikbaar waarmee u de hoogte en breedte van deze regio's kunt krijgen, evenals de schuifbare hoogte en breedte, wat het verschil is tussen de grootte van de omvang en de viewportgrootte.

Aanbevelingen

  • Ontwerp indien mogelijk voor verticaal schuiven in plaats van horizontaal.
  • Gebruik panning met één as voor inhoudsregio's die zich buiten één viewportgrens bevinden (verticaal of horizontaal). Gebruik panning met twee assen voor inhoudsregio's die zich buiten beide viewportgrenzen (verticaal en horizontaal) uitstrekken.
  • Gebruik de ingebouwde schuiffunctionaliteit in de itemsweergave, lijstweergave, rasterweergave, keuzelijst, keuzelijstbox, invoervak en hubonderdelen. Als er met deze besturingselementen te veel items tegelijk moeten worden weergegeven, kan de gebruiker horizontaal of verticaal over de lijst met items schuiven.
  • Als u wilt dat de gebruiker in beide richtingen rond een groter gebied kan pannen en mogelijk ook kan inzoomen, bijvoorbeeld als u wilt dat de gebruiker een afbeelding op volledige grootte kan pannen en inzoomen (in plaats van een afbeelding die op het scherm past), plaatst u de afbeelding in een scrollviewer.
  • Als de gebruiker door een lang stuk tekst schuift, configureert u de schuifviewer zodanig dat deze alleen verticaal schuift.
  • Gebruik een schuifviewer om slechts één object te bevatten. Houd er rekening mee dat het ene object een indelingsdeelvenster kan zijn, dat op zijn beurt een willekeurig aantal objecten bevat.
  • Als u aanwijzergebeurtenissen wilt afhandelen voor een UIElement in een schuifbare weergave (zoals een ScrollViewer of ListView), moet u de ondersteuning voor manipulatiegebeurtenissen in het element in de weergave expliciet uitschakelen door UIElement.CancelDirectManipulation-aan te roepen. Als u manipulatiegebeurtenissen in de weergave opnieuw wilt inschakelen, roept u UIElement.TryStartDirectManipulationaan.

Een schuifviewer maken

Open de WinUI 3 Gallery-app en zie de ScrollView in actie

Open de App WinUI 3 Gallery en bekijk de ScrollViewer 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

Een scrollviewer-besturingselement kan worden gebruikt om inhoud scrollbaar te maken door de inhoud expliciet binnen de scrollviewer te plaatsen of door een scrollviewer in de besturingssjabloon van een inhoudsbesturingselement op te nemen.

Scrollviewer in een controlesjabloon

Het is gebruikelijk dat een schuifviewerbesturingselement bestaat als een samengesteld onderdeel van andere besturingselementen. Een schuifbare weergave toont een viewport samen met schuifbalken, maar alleen wanneer de layoutruimte van het host-besturingselement kleiner is dan de uitgebreide inhoudsgrootte.

ItemsView bevat een ScrollView controle in zijn sjabloon. U kunt de ScrollView openen via de eigenschap ItemsView.ScrollView.

ListView en GridView sjablonen bevatten altijd een ScrollViewer. Tekstvak en RichEditBox bevatten ook een ScrollViewer in de sjablonen. Om een deel van het gedrag en de eigenschappen van het ingebouwde ScrollViewer deel te beïnvloeden, definieert ScrollViewer een aantal gekoppelde XAML-eigenschappen die kunnen worden ingesteld in stijlen en kunnen worden gebruikt in sjabloonbindingen. Zie Overzicht van gekoppelde eigenschappenvoor meer informatie over gekoppelde eigenschappen.

Schuifbare inhoud instellen

Inhoud in een schuifviewer wordt schuifbaar wanneer deze groter is dan de viewport van de schuifviewer

In dit voorbeeld wordt een Rectangle ingesteld als de inhoud van de controle ScrollView. De gebruiker ziet alleen een gedeelte van 500x400 van die rechthoek en kan schuiven om de rest ervan te zien.

<ScrollView Width="500" Height="400">
    <Rectangle Width="1000" Height="800">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollView>

Layout

In het vorige voorbeeld is de grootte van de rechthoek expliciet ingesteld op groter dan de schuifviewer. In gevallen waarin de inhoud van de scrollviewer natuurlijk mag groeien, zoals in een lijst of tekstblok, kunt u de scrollviewer configureren zodat de inhoud (de omvang) verticaal, horizontaal, beide of geen van beide wordt uitgebreid.

Dit tekstblok groeit bijvoorbeeld horizontaal totdat de bovenliggende container het beperkt, waarna de tekst wordt afgebroken en verticaal groeit.

<TextBlock Text="{x:Bind someText}" TextWrapping="WrapWholeWords"/>

Wanneer het tekstblok in een schuifviewer wordt verpakt, beperkt de schuifviewer de horizontale en verticale groei.

Verticaal betekent dat de inhoud horizontaal wordt beperkt, maar verticaal kan groeien buiten de viewport-grenzen en de gebruiker omhoog en omlaag kan schuiven.

Een tekstblok dat verticaal buiten de viewport of het zichtbare gebied van het besturingselement uitbreidt, met een verticale schuifbalk weergegeven.

Horizontale betekent dat de inhoud verticaal is beperkt, maar horizontaal kan groeien buiten de viewportgrenzen en de gebruiker de inhoud naar links en rechts kan schuiven.

Een tekstblok dat horizontaal buiten de viewport of het zichtbare gebied van het besturingselement uitbreidt, met een horizontale schuifbalk weergegeven.

Zichtbaarheid van schuifbalk

De besturingselementen ScrollViewer en ScrollView gebruiken iets andere manieren om de horizontale en verticale schuiffuncties van inhoud te configureren.

  • In het besturingselement ScrollViewer bepaalt de VerticalScrollBarVisibility en HorizontalScrollBarVisibility eigenschappen zowel de zichtbaarheid van de schuifbalken als of schuiven in een bepaalde richting is toegestaan. Wanneer een eigenschap is ingesteld op Disabled, kan inhoud niet in die richting worden gescrold door gebruikersinteractie.
    • De standaardwaarden zijn: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Disabled"
  • In het besturingselement ScrollView controleren de eigenschappen VerticalScrollBarVisibility en HorizontalScrollBarVisibility alleen de zichtbaarheid van de schuifbalken.
    • De standaardwaarden zijn: VerticalScrollBarVisibility="Auto", HorizontalScrollBarVisibility="Auto"

In deze tabel worden de zichtbaarheidsopties voor deze eigenschappen beschreven.

Waarde Description
Auto Er wordt alleen een schuifbalk weergegeven wanneer de viewport niet alle inhoud kan weergeven.
Uitgeschakeld (alleen ScrollViewer) Een schuifbalk wordt niet weergegeven, zelfs niet wanneer de viewport niet alle inhoud kan weergeven. Schuiven per gebruikersinteractie is uitgeschakeld. (Programmatisch schuiven is nog steeds mogelijk.)
Verborgen Een schuifbalk wordt niet weergegeven, zelfs niet wanneer de viewport niet alle inhoud kan weergeven. Schuiven is nog steeds ingeschakeld en kan plaatsvinden via interactie tussen aanraakschermen, toetsenborden of muiswielen.
Zichtbaar Er wordt altijd een schuifbalk weergegeven. (In huidige UX-ontwerpen wordt de schuifbalk alleen weergegeven wanneer de muisaanwijzer erop staat, tenzij de viewport niet alle inhoud kan weergeven. )

(ScrollViewer maakt gebruik van de ScrollBarVisibility enum; ScrollView maakt gebruik van de ScrollingScrollBarVisibility enum.)

Oriëntatie

Het besturingselement ScrollView heeft een eigenschap ContentOrientation waarmee u de indeling van de inhoud kunt beheren. Deze eigenschap bepaalt hoe inhoud kan groeien wanneer deze niet expliciet wordt beperkt. Als Height en Width expliciet op de inhoud zijn ingesteld, heeft ContentOrientation geen effect.

In deze tabel ziet u de ContentOrientation opties voor ScrollView- en de equivalente instellingen voor ScrollViewer-.

Oriëntatie ScrollView ScrollViewer
Verticaal ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Horizontaal ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Both ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Geen ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Verticale indeling

De inhoudsindeling (afdrukstand) van een schuifviewer is standaard verticaal.

In dit voorbeeld wordt een ItemsRepeater- gebruikt als de Contentvan ScrollView. De UniformGridLayout voor de ItemsRepeater plaatst de items horizontaal in een rij totdat er geen ruimte meer is (500px in dit voorbeeld) en plaatst het volgende item in de volgende rij. De ItemsRepeater kan hoger zijn dan de 400px die de gebruiker kan zien, maar de gebruiker kan vervolgens verticaal door de inhoud schuiven.

De standaardwaarde ContentOrientation is Vertical, dus er zijn geen wijzigingen nodig in de ScrollView.

<ScrollView Width="500" Height="400">
    <ItemsRepeater ItemsSource="{x:Bind Albums}"
                   ItemTemplate="{StaticResource MyTemplate}">
        <ItemsRepeater.Layout>
            <UniformGridLayout RowSpacing="8" ColumnSpacing="8"/>
        </ItemsRepeater.Layout>
    </ItemsRepeater>
</ScrollView>

Horizontale indeling

In dit voorbeeld is de inhoud een StackPanel die zijn items horizontaal rangschikt. De configuratie van de schuifviewer wordt gewijzigd om horizontaal schuiven te ondersteunen en verticaal schuiven uit te schakelen.

De eigenschap ScrollView van de ContentOrientationis ingesteld op Horizontal zodat de inhoud zo nodig horizontaal kan groeien.

<ScrollView Width="500" Height="400" ContentOrientation="Horizontal">
    <StackPanel Orientation="Horizontal">
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

Programmatisch schuiven

De verschuiving van de schuifviewer eigenschappen is alleen-lezen, maar er zijn methoden beschikbaar om programmatisch te schuiven.

Roep voor het ScrollView besturingselement de methode ScrollTo aan en geef de horizontale en verticale verschuivingen door om naar te schuiven. In dit geval is het schuiven alleen verticaal, dus de huidige HorizontalOffset waarde wordt gebruikt. Als u naar de bovenkant wilt schuiven, wordt een VerticalOffset van 0 gebruikt. Als u naar beneden wilt schuiven, is de VerticalOffset hetzelfde als de ScrollableHeight.

<Button Content="Scroll to top" Click="ScrollTopButton_Click"/>
<Button Content="Scroll to bottom" Click="ScrollBottomButton_Click"/>
<ScrollView x:Name="scrollView" Width="500" Height="400">
    <StackPanel>
        <Button Width="200" Content="Button 1"/>
        <Button Width="200" Content="Button 2"/>
        <Button Width="200" Content="Button 3"/>
        <Button Width="200" Content="Button 4"/>
        <Button Width="200" Content="Button 5"/>
    </StackPanel>
</ScrollView>

private void ScrollTopButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: 0);
}

private void ScrollBottomButton_Click(object sender, RoutedEventArgs e)
{
    scrollView.ScrollTo(
        horizontalOffset: scrollView.HorizontalOffset,
        verticalOffset: scrollView.ScrollableHeight);
}

ScrollView biedt ook een ScrollBy- methode waarmee u verticaal of horizontaal kunt schuiven met een opgegeven delta van de huidige offset.

Zoom

U kunt een scrollviewer gebruiken om een gebruiker in en uit te laten zoomen op inhoud. Optische zoominteracties worden uitgevoerd door de knijp- en stretchbewegingen (vingers verder uit elkaar bewegen om in te zoomen en ze dichter bij elkaar bewegen om uit te zoomen), of door tegelijkertijd de Ctrl-toets in te drukken en te scrollen met het muiswiel. Voor meer informatie over zoomen, zie Optische zoom enformaat wijzigen.

Als u zoomen op gebruikersinteractie wilt inschakelen, stelt u de eigenschap ZoomMode in op Enabled (deze is standaard Disabled). Wijzigingen in de eigenschap ZoomMode worden onmiddellijk van kracht en kunnen van invloed zijn op een voortdurende gebruikersinteractie.

In dit voorbeeld ziet u een Afbeelding verpakt in een schuifviewer die is geconfigureerd voor zoomen.

<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

In dit geval is de afbeelding niet gekoppeld aan de schuifviewer, zodat deze in eerste instantie wordt weergegeven op de oorspronkelijke grootte. Als de afbeeldingsbron groter is dan de viewport, moet de gebruiker uitzoomen om de volledige afbeelding te zien, wat mogelijk niet het beoogde gedrag is.

Een afbeelding van een berg die zo ver is ingezoomd dat alleen de blauwe lucht en wolken linksboven in de afbeelding zichtbaar zijn.

In het volgende voorbeeld ziet u hoe u de scrollviewer zo configureert dat de afbeelding wordt beperkt tot de viewport, zodat deze aanvankelijk uitgezoomd is geladen en de gebruiker kan inzoomen en scrollen als ze dat willen.

Een foto van een berg uitgezoomd zodat de voorgrond, berg en hemel allemaal zichtbaar zijn.

Als u de afbeelding wilt beperken tot de viewport van ScrollView, stelt u de eigenschap ContentOrientation in op None. Omdat de zichtbaarheid van de schuifbalk niet is gekoppeld aan deze beperking, worden schuifbalken automatisch weergegeven wanneer de gebruiker inzoomt.

<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.jpg"/>
</ScrollView>

Zoomfactor

Gebruik de eigenschappen MinZoomFactor en MaxZoomFactor om de hoeveelheid te bepalen die de gebruiker kan inzoomen op de inhoud. Deze eigenschappen zijn effectief voor zowel gebruikersinteracties als programmatisch zoomen.

  • De standaardwaarden zijn: MinZoomFactor="0.1", MaxZoomFactor="10.0"
<ScrollView Width="500" Height="400"
            ContentOrientation="Both"
            ZoomMode="Enabled" 
            MinZoomFactor="1.0" MaxZoomFactor="8.0">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

Programmatisch in- en uitzoomen

De eigenschap ZoomFactor is alleen-lezen, maar methoden zijn beschikbaar om programmatisch te zoomen. Een typisch gebruik hiervoor is om de schuifviewer te verbinden met een schuifregelaar die de zoomhoeveelheid bepaalt of een knop om het zoomniveau opnieuw in te stellen. (Zie ScrollViewer in de WinUI 3 Gallery-app om een voorbeeld te zien van een zoomschuifregelaar.)

Roep voor het besturingselement ScrollView de ZoomTo methode aan en geef de nieuwe zoomfactor door als eerste parameter.

<Slider Header="Zoom" IsEnabled="True"
        Maximum="{x:Bind scrollControl.MaxZoomFactor, Mode=OneWay}"
        Minimum="{x:Bind scrollControl.MinZoomFactor, Mode=OneWay}"
        StepFrequency="0.1"
        ValueChanged="ZoomSlider_ValueChanged" />
<ScrollView Width="500" Height="400"
            ContentOrientation="None"
            ZoomMode="Enabled">
    <Image Source="Assets/rainier.png"/>
</ScrollView>

private void ZoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    if (scrollControl != null)
    {
        scrollControl.ZoomTo(
            zoomFactor: (float)e.NewValue,
            centerPoint: null)
    }
}

ScrollView biedt ook een ZoomBy- methode waarmee u kunt in- en uitzoomen met een opgegeven delta vanaf het huidige zoomniveau.

UWP en WinUI 2

Opmerking

Het besturingselement ScrollView is alleen beschikbaar in WinUI 3. Gebruik voor UWP en WinUI 2 de ScrollViewer-controle.

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