Controles del visor de desplazamientoScroll viewer controls

Cuando la interfaz de usuario tenga más contenido que el que se pueda mostrar en un área, usa el control del visor de desplazamiento.When there is more UI content to show than you can fit in an area, use the scroll viewer control.

API importantes: Clase ScrollViewer, Clase ScrollBarImportant APIs: ScrollViewer class, ScrollBar class

Los visores de desplazamiento permiten que el contenido se extienda más allá de los límites de la ventanilla (área visible).Scroll viewers enable content to extend beyond the bounds of the viewport (visible area). Para acceder a dicho contenido, los usuario manipulan la superficie del visor de desplazamiento mediante entrada táctil, la rueda del mouse, el teclado o un controlador para juegos, o bien mediante el uso del cursor del ratón o del lápiz óptico para interactuar con la barra de desplazamiento del visor de desplazamiento.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. Esta imagen muestra varios ejemplos de controles del visor de desplazamiento.This image shows several examples of scroll viewer controls.

Captura de pantalla que ilustra el control de barra de desplazamiento estándar

En función de la situación, la barra de desplazamiento del visor de desplazamiento usa dos visualizaciones diferentes, que se muestran en la siguiente ilustración: el indicador de movimiento panorámico (izquierda) y la barra de desplazamiento tradicional (derecha).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).

Un ejemplo de la apariencia de la barra de desplazamiento y el indicador de movimiento panorámico estándar

El visor de desplazamiento es consciente del método de entrada del usuario y lo usa para determinar la visualización que se va a usar.The scroll viewer is conscious of the user's input method and uses it to determine which visualization to display.

  • Cuando la región se desplaza sin manipular directamente la barra de desplazamiento, por ejemplo de manera táctil, aparece el indicador de movimiento panorámico y muestra la posición de desplazamiento actual.When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
  • Cuando se mueve el cursor del ratón o del lápiz sobre el indicador de movimiento panorámico, se transforma en la barra de desplazamiento tradicional.When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar. Al arrastrar la barra de desplazamiento, la región de desplazamiento se manipula con el pulgar.Dragging the scrollbar thumb manipulates the scrolling region.

Barras de desplazamiento en acción

Nota

Cuando la barra de desplazamiento está visible, se superpone como 16 píxeles al contenido dentro del ScrollViewer.When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollViewer. Para garantizar un buen diseño de la experiencia del usuario, querrás asegurarte de que ningún contenido interactivo queda oculto por esta superposición.In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. Además, si prefieres que no se superponga la experiencia del usuario, deja 16 píxeles de espaciado interno en el borde de la ventanilla para la barra de desplazamiento.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.

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación Galería de controles XAML, haz clic aquí para abrirla y ver ScrollViewer en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the ScrollViewer in action.

Crear un visor de desplazamientoCreate a scroll viewer

Para agregar el desplazamiento vertical a la página, ajusta el contenido de la página en un visor de desplazamiento.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>

Este XAML muestra cómo habilitar el desplazamiento horizontal, colocar una imagen en un visor de desplazamiento y habilitar el 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 en una plantilla de controlScrollViewer in a control template

Es habitual que exista un control ScrollViewer como elemento compuesto de otros controles.It's typical for a ScrollViewer control to exist as a composite part of other controls. Un elemento ScrollViewer, junto con la clase ScrollContentPresenter para compatibilidad, mostrará una ventanilla junto con las barras de desplazamiento solo cuando el espacio de diseño del control de host tenga una limitación menor que el tamaño del contenido expandido.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. Esto suele suceder con las listas, por lo que las plantillas ListView y GridView siempre incluyen un ScrollViewer.This is often the case for lists, so ListView and GridView templates always include a ScrollViewer. TextBox y RichEditBox también incluyen un ScrollViewer en sus plantillas.TextBox and RichEditBox also include a ScrollViewer in their templates.

Cuando un elemento ScrollViewer existe en un control, el control de host a menudo tiene el control de eventos integrado para ciertos eventos de entrada y manipulaciones que permiten que el contenido se desplace.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. Por ejemplo, un GridView interpreta un gesto de deslizamiento del dedo y esto hace que el contenido se desplace horizontalmente.For example, a GridView interprets a swipe gesture and this causes the content to scroll horizontally. Se considera que tanto de los eventos de entrada como de las manipulaciones sin procesar que recibe el control de host se encarga el control y los eventos de nivel inferior, como PointerPressed, no subirán de nivel ni se propagarán a los contenedores principales.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. Puedes cambiar parte de la administración de los controles integrados reemplazando una clase de control y los métodos virtuales OnEvent por eventos o volver a crear plantillas del control.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. Pero, en cualquier caso, reproducir el comportamiento predeterminado original no es algo trivial, que suele estar allí para que el control reaccione de formas esperadas a los eventos y a las acciones de entrada y los gestos de un usuario.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. Por lo tanto, debes considerar si realmente necesitas que ese evento de entrada se active.So you should consider whether you really need that input event to fire. Es posible que desee investigar si hay otros eventos de entrada o gestos que no administra el control y usarlos en el diseño de interacción de control o de la aplicación.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.

Para que los controles que incluyen un ScrollViewer puedan influir en algunos de los comportamientos y las propiedades que están dentro del elemento ScrollViewer, ScrollViewer define un número de propiedades adjuntas de XAML que pueden establecerse en los estilos y usarse en enlaces de plantillas.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. Para obtener más información sobre las propiedades adjuntas, consulta Introducción a las propiedades adjuntas.For more info about attached properties, see Attached properties overview.

Propiedades adjuntas de XAML de ScrollViewerScrollViewer XAML attached properties

ScrollViewer define las siguientes propiedades adjuntas de XAML:ScrollViewer defines the following XAML attached properties:

Estas propiedades adjuntas de XAML están destinadas para los casos donde ScrollViewer es implícito, como cuando ScrollViewer existe en la plantilla predeterminada para un ListView o GridView y quieres poder influir en el comportamiento de desplazamiento del control sin tener acceso a elementos de plantilla.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.

Por ejemplo, así que como se hace que las barras de desplazamiento vertical estén siempre visibles en un visor de desplazamiento integrado de 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"/>

En los casos donde un ScrollViewer es explícito en el XAML, como se muestra en el código de ejemplo, no necesitas usar una sintaxis de propiedad adjunta.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. Solo tienes que usar la sintaxis de atributo, por ejemplo <ScrollViewer VerticalScrollBarVisibility="Visible"/>.Just use attribute syntax, for example <ScrollViewer VerticalScrollBarVisibility="Visible"/>.

Cosas que hacer y cosas que evitarDo's and don'ts

  • Siempre que sea posible, diseña para el desplazamiento vertical en lugar del horizontal.Whenever possible, design for vertical scrolling rather than horizontal.
  • Usa movimiento panorámico en un eje para las áreas de contenido que se extienden más allá de un límite de la ventanilla (vertical u horizontal).Use one-axis panning for content regions that extend beyond one viewport boundary (vertical or horizontal). Usa movimiento panorámico en dos ejes para las áreas de contenido que se extienden más allá de ambos límites de la ventanilla (vertical y horizontal).Use two-axis panning for content regions that extend beyond both viewport boundaries (vertical and horizontal).
  • Usa la funcionalidad de desplazamiento integrada de los siguientes elementos: vista de lista, vista de cuadrícula, cuadro combinado, cuadro de texto, cuadro de entrada de texto y controles de navegación centralizada.Use the built-in scroll functionality in the list view, grid view, combo box, list box, text input box, and hub controls. Con estos controles, si hay demasiados elementos que mostrar al mismo tiempo, el usuario puede desplazarse horizontal o verticalmente por la lista de elementos.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.
  • Si quieres que el usuario pueda generar una vista panorámica en ambas direcciones sobre un área mayor, y quizá también aplicar zoom también, por ejemplo, si quieres que el usuario pueda generar una vista panorámica y aplicar zoom sobre una imagen a tamaño completo (en lugar de una imagen con tamaño ajustado a la pantalla), coloca la imagen dentro de un visor de desplazamiento.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.
  • Si el usuario va a desplazarse sobre un fragmento de texto largo, configura el visor para un desplazamiento solamente vertical.If the user will scroll through a long passage of text, configure the scroll viewer to scroll vertically only.
  • El visor de desplazamiento que uses debe contener un solo objeto.Use a scroll viewer to contain one object only. Ten en cuenta que ese objeto puede ser un panel de diseño que contenga a su vez cualquier número de objetos.Note that the one object can be a layout panel, in turn containing any number of objects of its own.
  • No coloques un control dinámico dentro de un visor de desplazamiento para evitar conflictos con la lógica de desplazamiento del control dinámico.Don't place a Pivot control inside a scroll viewer to avoid conflicts with pivot's scrolling logic.

Obtención del código de ejemploGet the sample code

Para desarrolladores (XAML)For developers (XAML)