Controlli visualizzatore a scorrimentoScroll viewer controls

Quando il quantitativo di contenuto dell'interfaccia utente da mostrare è maggiore rispetto a quello che puoi inserire in un'area, usa il controllo visualizzatore a scorrimento.When there is more UI content to show than you can fit in an area, use the scroll viewer control.

API importanti: Classe ScrollViewer, Classe ScrollBarImportant APIs: ScrollViewer class, ScrollBar class

I visualizzatori a scorrimento permettono al contenuto di estendersi oltre i limiti del riquadro di visualizzazione (area visibile).Scroll viewers enable content to extend beyond the bounds of the viewport (visible area). Gli utenti raggiungeranno questo contenuto modificando la superficie del visualizzatore a scorrimento tramite tocco, rotellina del mouse, tastiera o game pad, oppure usando il cursore del mouse o della penna per interagire con la barra di scorrimento del visualizzatore a scorrimento.Users reach this content by manipulating the scroll viewer surface through touch, mousewheel, keyboard, or a gamepad, or by using the mouse or pen cursor to interact with the scroll viewer's scrollbar. Questa immagine mostra diversi esempi relativi ai controlli visualizzatore a scorrimento.This image shows several examples of scroll viewer controls.

Screenshot che illustra il controllo barra di scorrimento standard

A seconda della situazione, la barra di scorrimento del visualizzatore a scorrimento usa due diverse visualizzazioni, mostrate nella figura seguente: l'indicatore di panoramica (a sinistra) e la barra di scorrimento tradizionale (a destra).Depending on the situation, the scroll viewer's scrollbar uses two different visualizations, shown in the following illustration: the panning indicator (left) and the traditional scrollbar (right).

Esempio dell'aspetto dei controlli barra di scorrimento e indicatori di scorrimento standard

Il visualizzatore a scorrimento è consapevole del metodo di input dell'utente e ne fa uso per determinare quale visualizzazione mostrare.The scroll viewer is conscious of the user's input method and uses it to determine which visualization to display.

  • Quando si scorre l'area senza modificare direttamente la barra di scorrimento, ad esempio mediante tocco, l'indicatore di panoramica visualizzerà la posizione di scorrimento corrente.When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
  • Quando si sposta il cursore del mouse o della penna sull'indicatore di panoramica, quest'ultimo modifica il suo aspetto trasformandosi in barra di scorrimento tradizionale.When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar. Il trascinamento del cursore della barra di scorrimento modifica l'area di scorrimento.Dragging the scrollbar thumb manipulates the scrolling region.

Barre di scorrimento in azione

Nota

Quando la barra di scorrimento è visibile, è sovrapposta con dimensioni di 16 pixel sopra al contenuto all'interno di ScrollViewer.When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollViewer. Per garantire una buona progettazione dell'esperienza utente, potresti voler avere la sicurezza che nessun contenuto interattivo venga oscurato da questa sovrimpressione.In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. Inoltre, se vuoi evitare una sovrapposizione dell'esperienza utente, lascia 16 pixel di spaziatura interna sui bordi del riquadro di visualizzazione per consentire la visualizzazione della barra di scorrimento.Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app XAML Controls Gallery, fai clic qui per aprirla e vedere ScrollViewer in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the ScrollViewer in action.

Creare un visualizzatore a scorrimentoCreate a scroll viewer

Per aggiungere lo scorrimento verticale alla pagina, esegui il wrapping del contenuto della pagina in un visualizzatore a scorrimento.To add vertical scrolling to your page, wrap the page content in a scroll viewer.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <ScrollViewer>
        <StackPanel>
            <TextBlock Text="My Page Title" Style="{StaticResource TitleTextBlockStyle}"/>
            <!-- more page content -->
        </StackPanel>
    </ScrollViewer>
</Page>

Il codice XAML seguente mostra come abilitare lo scorrimento orizzontale, posizionare un'immagine in un visualizzatore a scorrimento e abilitare lo zoom.This XAML shows how to enable horizontal scrolling, place an image in a scroll viewer and enable zooming.

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10"
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

ScrollViewer in un modello di controlloScrollViewer in a control template

È comune che un controllo ScrollViewer esista come parte componente di altri controlli.It's typical for a ScrollViewer control to exist as a composite part of other controls. Una parte ScrollViewer, insieme alla classe ScrollContentPresenter per il supporto, visualizza un riquadro di visualizzazione insieme alle barre di scorrimento solo quando lo spazio di layout del controllo host è vincolato a dimensioni inferiori a quelle del contenuto.A ScrollViewer part, along with the ScrollContentPresenter class for support, will display a viewport along with scrollbars only when the host control's layout space is being constrained smaller than the expanded content size. Questo accade spesso per gli elenchi, quindi i modelli ListView e GridView includono sempre un controllo ScrollViewer.This is often the case for lists, so ListView and GridView templates always include a ScrollViewer. Anche i modelli dei controlli TextBox e RichEditBox includono un controllo ScrollViewer.TextBox and RichEditBox also include a ScrollViewer in their templates.

Quando un controllo include una parte ScrollViewer, il controllo host spesso include la gestione predefinita per determinati eventi di input e manipolazioni che consentono lo scorrimento del controllo.When a ScrollViewer part exists in a control, the host control often has built-in event handling for certain input events and manipulations that enable the content to scroll. Ad esempio, un controllo GridView interpreta un movimento di scorrimento rapido e in questo modo viene attivato lo scorrimento orizzontale del contenuto.For example, a GridView interprets a swipe gesture and this causes the content to scroll horizontally. Gli eventi di input e le manipolazioni non elaborate ricevute dal controllo host sono considerati gestiti dal controllo e gli eventi di più basso livello come PointerPressed non verranno generati e non verrà nemmeno eseguito il bubbling in alcun contenitore padre.The input events and raw manipulations that the host control receives are considered handled by the control, and lower-level events such as PointerPressed won't be raised and won't bubble to any parent containers either. Puoi cambiare parte della gestione predefinita del controllo tramite l'override di una classe del controllo e i metodi virtuali OnEvent per gli eventi oppure modificando il modello del controllo.You can change some of the built-in control handling by overriding a control class and the OnEvent virtual methods for events, or by retemplating the control. In entrambi i casi, però, non è facile riprodurre il comportamento predefinito originale, solitamente disponibile in modo che il controllo reagisca in modi previsti agli eventi e alle azioni e ai movimenti di input di un utente.But in either case it's not trivial to reproduce the original default behavior, which is typically there so that the control reacts in expected ways to events and to a user's input actions and gestures. Dovresti quindi valutare se effettivamente ti serve generare un determinato evento di input.So you should consider whether you really need that input event to fire. Potresti verificare se ci sono altri eventi o movimenti di input non gestiti dal controllo e usarli nella progettazione delle interazioni per la tua app o il tuo controllo.You might want to investigate whether there are other input events or gestures that are not being handled by the control, and use those in your app or control interaction design.

Per fare in modo che i controlli che includono una parte ScrollViewer possano influire su alcuni dei comportamenti e delle proprietà provenienti dalla parte ScrollViewer, ScrollViewer definisce alcune proprietà associate XAML che possono essere impostate negli stili e usate nei binding del modello.To make it possible for controls that include a ScrollViewer to influence some of the behavior and properties that are from within the ScrollViewer part, ScrollViewer defines a number of XAML attached properties that can be set in styles and used in template bindings. Per altre info sulle proprietà associate, vedi Panoramica delle proprietà associate.For more info about attached properties, see Attached properties overview.

Proprietà associate XAML per ScrollViewerScrollViewer XAML attached properties

ScrollViewer definisce le proprietà XAML associate seguenti:ScrollViewer defines the following XAML attached properties:

Queste proprietà associate XAML sono destinate ai casi in cui ScrollViewer è implicito, ad esempio quando il controllo ScrollViewer è incluso nel modello predefinito per un controllo ListView o GridView e vuoi essere in grado di intervenire sul comportamento di scorrimento del controllo senza accedere alle parti del modello.These XAML attached properties are intended for cases where the ScrollViewer is implicit, such as when the ScrollViewer exists in the default template for a ListView or GridView, and you want to be able to influence the scrolling behavior of the control without accessing template parts.

Di seguito, scoprirai come rendere sempre visibili le barre di scorrimento verticali per un visualizzatore a scorrimento incorporato in un controllo ListView.For example, here's how to make the vertical scrollbars always visible for a ListView's built in scroll viewer.

<ListView ScrollViewer.VerticalScrollBarVisibility="Visible"/>

Quando il controllo ScrollViewer è esplicito nel codice XAML, come mostrato nel codice di esempio, non devi usare la sintassi delle proprietà associate.For cases where a ScrollViewer is explicit in your XAML, as is shown in the example code, you don't need to use attached property syntax. Usa semplicemente la sintassi degli attributi. Ad esempio, <ScrollViewer VerticalScrollBarVisibility="Visible"/>.Just use attribute syntax, for example <ScrollViewer VerticalScrollBarVisibility="Visible"/>.

Cosa fare e cosa non fareDo's and don'ts

  • Se possibile, esegui la progettazione in modo da usare lo scorrimento verticale invece di orizzontale.Whenever possible, design for vertical scrolling rather than horizontal.
  • Usa la panoramica su un solo asse per le aree di contenuto che si estendono oltre un limite del riquadro di visualizzazione (orizzontalmente o verticalmente).Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal). Usa la panoramica su due assi per le aree di contenuto che si estendono oltre entrambi limiti del riquadro di visualizzazione (orizzontalmente e verticalmente).Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).
  • Usa la funzionalità di scorrimento incorporata nei controlli visualizzazione elenco, visualizzazione griglia, casella combinata, casella di riepilogo, casella di input testo e hub.Use the built-in scroll functionality in the list view, grid view, combo box, list box, text input box, and hub controls. Con questi controlli, se devono essere visualizzati troppi elementi contemporaneamente, l'utente può scorrere in orizzontale o in verticale l'elenco di elementi.With those controls, if there are too many items to show all at once, the user is able to scroll either horizontally or vertically over the list of items.
  • Se vuoi che l'utente esegua una panoramica in entrambe le direzioni in un'area più ampia, e magari anche lo zoom, ad esempio se vuoi consentire all'utente di eseguire la panoramica e lo zoom su un'immagine a dimensioni intere (anziché un'immagine adattata allo schermo), posiziona l'immagine all'interno di un visualizzatore scorrevole.If you want the user to pan in both directions around a larger area, and possibly to zoom, too, for example, if you want to allow the user to pan and zoom over a full-sized image (rather than an image sized to fit the screen) then place the image inside a scroll viewer.
  • Se l'utente deve scorrere un lungo brano di testo, configura il visualizzatore scorrevole in modo da eseguire lo scorrimento solo in verticale.If the user will scroll through a long passage of text, configure the scroll viewer to scroll vertically only.
  • Usa un visualizzatore scorrevole per contenere un solo oggetto.Use a scroll viewer to contain one object only. Tale oggetto può tuttavia essere un pannello di layout, che a sua volta può contenere un numero indefinito di oggetti.Note that the one object can be a layout panel, in turn containing any number of objects of its own.
  • Non posizionare un controllo Pivot all'interno di un visualizzatore a scorrimento per evitare conflitti con la logica di scorrimento pivot.Don't place a Pivot control inside a scroll viewer to avoid conflicts with pivot's scrolling logic.

Scaricare il codice di esempioGet the sample code

Per sviluppatori (XAML)For developers (XAML)