Dela via

Scrollvisningskontroller

När det finns mer innehåll i användargränssnittet att visa än vad du får plats i ett område använder du en rullningslistkontroll.

Rullningsvyer gör det möjligt för innehåll att sträcka sig utanför visningsområdet. Användare når detta innehåll genom att manipulera rullningsytan med hjälp av touch, mushjul, tangentbord eller en handkontroll, eller genom att använda muspekaren eller pennan för att interagera med rullningslistens skrollfält.

Beroende på situationen använder rullningsvisarens rullningslist två olika visualiseringar, som visas i följande bild: panoreringsindikatorn (vänster) och den traditionella rullningslistens tumme (höger).

En skärmbild som illustrerar en panoreringsrullningslist, en 2 bildpunkt bred lodrät linje till höger i innehållet.

En skärmbild som illustrerar standardrullningslisten, en lodrät linje på 6 pixlar med en uppåtpil överst och en nedåtpil nederst.

Viktigt!

WinUI 3 har två olika kontroller för rullningslistevisning: ScrollViewer och ScrollView. När vi talar allmänt om rullningsvisningskontroller gäller informationen för båda kontrollerna.

Kontrollen ScrollView liknar beteendet och användningen ScrollViewer av kontrollen, men baseras på InteractionTracker, har nya funktioner som animeringsdrivna vyändringar och är utformad för att säkerställa fullständig funktionalitet med ItemsRepeater.

Rulla, panorera och zooma

Använd en rullningslistkontroll för att tillåta rullning, panorering och zoomning av ditt innehåll.

  • Rullning: Flytta innehållet lodrätt eller vågrätt genom att dra rullningslistens tumme eller använda rullningshjulet på en mus.
  • Panorering: Flytta innehåll lodrätt eller vågrätt med pek- eller penninmatning.
  • Zoomning: Optiskt öka eller minska innehållets skala.

Rullningslisten är medveten om användarens indatametod och använder den för att avgöra vilken visualisering som ska visas.

  • När regionen rullas utan att ändra rullningslisten direkt, till exempel genom att trycka, visas panoreringsindikatorn och visar den aktuella rullningspositionen.
  • När mus- eller pennmarkören flyttas över panoreringsindikatorn omvandlas den till den traditionella rullningslisten. Genom att dra rullningslistens handtag styrs rullningsområdet.

En animering som visar rullningslistens transformering från den smala panoreringsindikatorn till den traditionella tummen när markören flyttas över den.

Anmärkning

När rullningslisten är synlig läggs den över som 16px ovanpå innehållet i din ScrollViewer. För att säkerställa en bra UX-design vill du se till att inget interaktivt innehåll skyms av det här överlägget. Om du inte vill ha överlappande UX lämnar du dessutom 16 px utfyllnad på kanten av visningsporten för att tillåta rullningslisten.

Visningsfönster och omfattning

En rullningslist består av två huvudregioner som är viktiga för att förstå dess funktioner. Området som innehåller allt rullningsbart innehåll, både dolt och synligt, är omfattningen. Det synliga området i kontrollen där innehållet visas är visningsplatsen.

Ett textblock som sträcker sig utanför visningsområdet eller det synliga området i kontrollen.

Det finns olika API:er som gör att du kan få höjd och bredd för dessa regioner, samt den rullningsbara höjden och bredden, vilket är skillnaden mellan omfattningsstorleken och visningsportens storlek.

Recommendations

  • Designa lodrät rullning i stället för vågrätt när det är möjligt.
  • Använd enaxels panorering för innehållsregioner som sträcker sig bortom en vyportgräns (lodrät eller vågrät). Använd panorering med två axlar för innehållsregioner som sträcker sig utanför båda vyportgränserna (lodräta och vågräta).
  • Använd de inbyggda rullningsfunktionerna i objektvyn, listvyn, rutnätsvyn, kombinationsrutan, listrutan, textinmatningsrutan och hubbkontrollerna. Med dessa kontroller, om det finns för många objekt för att visa alla samtidigt, kan användaren rulla antingen vågrätt eller lodrätt över listan över objekt.
  • Om du vill att användaren ska panorera i båda riktningarna runt ett större område och eventuellt även zooma, till exempel om du vill tillåta att användaren panorerar och zoomar över en fullstor bild (i stället för en bildstorlek för att passa skärmen) placerar du bilden i ett rullningsdiagram.
  • Om användaren bläddrar igenom en lång textpassage konfigurerar du rullningsvisaren så att den endast rullar lodrätt.
  • Använd ett rullningslistvisningsprogram för att endast innehålla ett objekt. Observera att ett objekt kan vara en layoutpanel som i sin tur innehåller valfritt antal egna objekt.
  • Om du behöver hantera pekarhändelser för ett UIElement i en rullningsbar vy (till exempel en ScrollViewer eller ListView) måste du uttryckligen inaktivera stöd för manipulationshändelser för elementet i vyn genom att anropa UIElement.CancelDirectManipulation. Om du vill återaktivera manipulationshändelser i vyn anropar du UIElement.TryStartDirectManipulation.

Skapa en rullningsvisare

Öppna WinUI 3-galleriappen och se scrollview i praktiken

Öppna WinUI 3-galleriappen och se ScrollViewer i praktiken

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

En rullningslistkontroll kan användas för att göra innehåll rullningsbart genom att explicit omsluta innehållet i rullningslisten eller genom att placera en rullningslist i kontrollmallen för en innehållskontroll.

Rullningsvisare i en kontrollmall

Det är vanligt att en rullningslistkontroll finns som en sammansatt del av andra kontroller. En rullningslistdel visar en visningsport tillsammans med rullningslister endast när värdkontrollens layoututrymme begränsas mindre än den utökade innehållsstorleken.

ItemsView innehåller en ScrollView kontroll i mallen. Du kan komma åt egenskapen ScrollView genom den ItemsView.ScrollView.

ListView- och GridView-mallar innehåller alltid en ScrollViewer. Textbox och RichEditBox innehåller även en ScrollViewer i sina mallar. Om du vill påverka vissa av beteendena och egenskaperna hos den inbyggda ScrollViewer-delen, definierar ScrollViewer ett antal XAML-kopplade egenskaper som kan ställas in i format och användas i mallbindningar. Mer information om bifogade egenskaper finns i Översikt över bifogade egenskaper.

Ange rullningsbart innehåll

Innehåll inuti en rullningslist blir rullningsbart när det är större än rullningsvisarens visningsområde

I det här exemplet anges en Rectangle som innehållet i ScrollView kontrollen. Användaren ser bara en 500x400-del av rektangeln och kan rulla för att se resten av den.

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

Utformning

I föregående exempel är rektangelns storlek uttryckligen inställd på att vara större än rullningsvisningsprogrammet. Om rullningsvisningsinnehållet tillåts växa naturligt, till exempel i en lista eller ett textblock, kan du konfigurera rullningsvisningsprogrammet så att innehållet ( omfattningen) expanderar lodrätt, vågrätt, båda eller ingetdera.

Det här textblocket växer till exempel vågrätt tills dess överordnade container begränsar det och omsluter sedan texten och växer lodrätt.

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

När textblocket omsluts i en rullningsvisare begränsar rullningsvisaren dess horisontella och vertikala utökning.

Lodrätt innebär att innehållet är begränsat vågrätt, men kan växa lodrätt utanför viewport-gränserna, och användaren kan rulla upp och ned innehållet.

Ett textblock som sträcker sig lodrätt utanför visningsområdet, eller synligt område i kontrollen, med en lodrät rullningslist.

Vågrätt innebär att innehållet är begränsat lodrätt, men kan växa vågrätt utanför viewport-gränserna, och användaren kan rulla innehållet åt vänster och höger.

Ett textblock som sträcker sig vågrätt utanför visningsområdet, eller ett synligt område i kontrollen, med en vågrät rullningslist.

Synlighet för scrollbar

Kontrollerna ScrollViewer och ScrollView använder något olika sätt att konfigurera vågrät och lodrät rullning av innehåll.

Den här tabellen beskriver synlighetsalternativen för dessa egenskaper.

Värde Description
Auto En rullningslist visas bara när visningsfältet inte kan visa allt innehåll.
Inaktiverad (endast ScrollViewer) En rullningslist visas inte ens när visningsporten inte kan visa allt innehåll. Rullning efter användarinteraktion är inaktiverat. (Programmeringsrullning är fortfarande möjlig.)
Dold En rullningslist visas inte ens när visningsporten inte kan visa allt innehåll. Rullning är fortfarande aktiverat och kan ske via interaktion med pek-, tangentbords- eller mushjul.
Synlig En rullningslist visas alltid. (I aktuella UX-designer visas rullningslisten endast när musmarkören är över den om inte visningsporten inte kan visa allt innehåll. )

(ScrollViewer använder uppräkningen ScrollBarVisibility; ScrollView använder uppräkningen ScrollingScrollBarVisibility.)

Orientering

ScrollView-kontrollen har en ContentOrientation-egenskap som låter dig styra layouten för innehåll. Den här egenskapen avgör hur innehållet kan växa när det inte uttryckligen är begränsat. Om Height och Width uttryckligen anges på innehållet, ContentOrientation har ingen effekt.

Den här tabellen visar ContentOrientation alternativen för ScrollView och motsvarande inställningar för ScrollViewer.

Orientering Rullningsvy ScrollViewer (på engelska)
Vertikal ContentOrientation="Vertical" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="Disabled"
Vågrät ContentOrientation="Horizontal" VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
Both ContentOrientation="Both" VerticalScrollBarVisibility="[Auto][Visible][Hidden]"
HorizontalScrollBarVisibility="[Auto][Visible][Hidden]"
None ContentOrientation="None"
 VerticalScrollBarVisibility="Disabled"
HorizontalScrollBarVisibility="Disabled"

Lodrät layout

Som standard är rullningslistens innehållslayout (orientering) lodrät.

I det här exemplet används en ItemsRepeater som ScrollViews Content. UniformGridLayout för ItemsRepeater placerar objekten vågrätt i en rad tills utrymmet tar slut (500px i det här exemplet) och placerar sedan nästa objekt på nästa rad. ItemsRepeater kan vara längre än de 400px som användaren kan se, men användaren kan sedan rulla innehållet lodrätt.

ContentOrientation Standardvärdet är Vertical, så inga ändringar krävs i 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>

Vågrät layout

I det här exemplet är innehållet en StackPanel som lägger ut sina objekt vågrätt. Rullningsvisningskonfigurationen ändras så att den stöder vågrät rullning och inaktiverar lodrät rullning.

Egenskapen ScrollView för ContentOrientation är inställd på Horizontal för att innehållet ska kunna växa horisontellt så mycket som behövs.

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

Programmerad rullning

Rullningsvisarens offset-egenskaper är skrivskyddade, men det finns metoder som gör att du kan rulla programmatiskt.

För ScrollView-kontrollen anropar du metoden ScrollTo och skickar de vågräta och lodräta förskjutningarna att rulla till. I det här fallet är rullningen endast lodrät, så det aktuella värdet HorizontalOffset används. För att rulla till toppen används en VerticalOffset på 0. För att rulla till botten är VerticalOffset detsamma som 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 innehåller också en ScrollBy-metod som gör att du kan rulla lodrätt eller vågrätt med ett angivet delta från den aktuella förskjutningen.

Zooma

Du kan använda en rullningslist för att låta en användare zooma in och ut innehåll optiskt. Interaktioner med optisk zoom utförs genom att dra ihop och sträcka gester (flytta fingrarna längre ifrån varandra zoomar in och flyttar dem närmare varandra zoomar ut), eller genom att trycka på Ctrl-tangenten medan du rullar musrullningshjulet. Mer information om zoomning finns i Optisk zoom och storleksändring.

Om du vill aktivera zoomning efter användarinteraktion anger du ZoomMode egenskapen till Enabled (det är Disabled som standard). Ändringar av egenskapen ZoomMode börjar gälla omedelbart och kan påverka en pågående användarinteraktion.

Det här exemplet visar en bild omsluten i ett rullningslistevisningsprogram som är konfigurerat för att tillåta zoomning.

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

I det här fallet är bilden inte begränsad av rullningsvisaren, så den visas till att börja med i sin naturliga storlek. Om bildkällan är större än visningsporten måste användaren zooma ut för att se hela bilden, vilket kanske inte är det avsedda beteendet.

En bild av ett berg zoomade in så långt att endast blå himmel och moln i det övre vänstra hörnet av bilden är synliga.

I nästa exempel visas hur du konfigurerar rullningsvisaren för att begränsa bilden till visningsområdet så att den först läses in zoomad ut, och användaren kan zooma in och rulla om de vill.

En bild av ett berg zoomade ut så att förgrunden, berget och himlen alla är synliga.

Om du vill begränsa bilden till ScrollViews visningsport anger du egenskapen ContentOrientation till None. Eftersom rullningslistens synlighet inte är kopplad till den här begränsningen visas rullningslister automatiskt när användaren zoomar in.

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

Zoomningsfaktor

MinZoomFactor Använd egenskaperna och MaxZoomFactor för att styra hur mycket användaren kan zooma innehållet. Dessa egenskaper är effektiva för både användarinteraktioner och programmatisk zoomning.

  • Standardvärdena är: 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>

Programmatisk zoom

Egenskapen ZoomFactor är skrivskyddad, men det finns metoder som låter dig zooma programmatiskt. En vanlig användning för detta är att ansluta rullningslisten till ett skjutreglage som styr zoommängden eller en knapp för att återställa zoomnivån. (Se ScrollViewer i WinUI 3-galleriappen för att se ett exempel på ett zoomreglage.)

För ScrollView-kontrollen anropar du metoden ZoomTo och skickar den nya zoomfaktorn som den första parametern.

<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 innehåller också en ZoomBy-metod som gör att du kan zooma in och ut med ett angivet delta från den aktuella zoomnivån.

UWP och WinUI 2

Anmärkning

Kontrollen ScrollView är endast tillgänglig i WinUI 3. Använd ScrollViewer-kontrollen för 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. WinUI 2.2 eller senare innehåller en ny mall för den här kontrollen som använder rundade hörn. För mer information om hörnradien, se .

  • Last updated on