Sugerencias para la aplicación de estilos al control ScrollViewer

El control ScrollViewer representa un objeto que muestra un área de visualización desplazable. En el área de visualización se puede colocar cualquier objeto. Por ejemplo, dentro de la plantilla de un control ListBox hay un control ScrollViewer que contiene un elemento ItemsPresenter que muestra una lista de elementos.

Al igual que con los demás controles, el control ScrollViewer se puede modificar y mostrar una apariencia muy distinta a la predeterminada. La apariencia predeterminada del control ScrollViewer es la siguiente:

Propiedades de interés del control ScrollViewer

Para ocultar o mostrar los objetos ScrollBar en un control ScrollViewer, establezca las propiedades HorizontalScrollBarVisibility y VerticalScrollBarVisibility, que aparecen al hacer clic en Mostrar propiedades avanzadas  en la parte inferior de la categoría Diseño del panel Propiedades.

Puede establecer estas propiedades de varias formas:

• Establecer las propiedades del objeto   Después de dibujar un control ScrollViewer en la mesa de trabajo, puede establecer las propiedades del objeto directamente. Si desea que varios objetos ScrollViewer usen los mismos valores, establezca estas propiedades en un estilo.

• Establecer las propiedades en un estilo   Si establece estas propiedades en el estilo del objeto ScrollViewer, cualquier objeto ScrollViewer que utilice dicho estilo usará esos valores. Puede sobrescribir los valores de un objeto específico.

  Para obtener más información, vea Crear un estilo.

Para mostrar un elemento en un control ScrollViewer, puede seleccionarlo en Objetos y escala de tiempo para convertirlo en el contenedor activo y, a continuación, dibujar nuevos objetos o mueva objetos existentes al control ScrollViewer.

Si desea que el control ScrollViewer muestre elementos en una colección de datos, considere la posibilidad de usar un control ListBox.

Para obtener más información, vea Enlazar un objeto a datos y Crear datos de ejemplo.

Elementos de la plantilla ScrollViewer

El control ScrollViewer usa una plantilla para definir su apariencia: la plantilla ScrollViewer. Cada elemento de la plantilla desempeña una función en la apariencia y el comportamiento del objeto ScrollViewer al que se aplica la plantilla.

En la plantilla, pueden existir otros objetos para adornar la apariencia del control ScrollViewer, pero los elementos enumerados en la tabla siguiente están asociados a su comportamiento en un contrato.

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla.

Nombre de elemento	Tipo de objeto	Descripción
ScrollContentPresenter	ScrollContentPresenter	Objeto que muestra el contenido del control ScrollViewer. Este elemento es obligatorio.
HorizontalScrollBar	ScrollBar	Objeto ScrollBar situado en la parte inferior del control ScrollViewer.
VerticalScrollBar	ScrollBar	Objeto ScrollBar situado en la parte derecha del control ScrollViewer.

Estados del control ScrollViewer

De forma predeterminada, el control ScrollViewer no tiene definido ningún estado. Puede crear estados personalizados o bien usar los estados de un control que incluye un control ScrollViewer en su plantilla, por ejemplo, el control ListBox.

Para obtener más información, vea Definir estados visuales y tiempos de transición diferentes en un control de usuario y Sugerencias para la aplicación de estilos al control ListBox.

Para convertir objetos en un control ScrollViewer

Para modificar la plantilla de un control ScrollViewer, realice una de las siguientes acciones:

• Dibuje un control ScrollViewer  en la mesa de trabajo y, a continuación, cree una copia de la plantilla predeterminada.

  Para obtener más información, vea Crear o modificar una plantilla.

• Diseñe el aspecto del control ScrollViewer dibujando objetos o importando material gráfico y, a continuación, use el comando Convertir en control.

Si usa el comando Convertir en control, siga los pasos que se indican a continuación para asegurarse de crear todos los objetos que la plantilla ScrollViewer requiere:

1. Agrupe todos los objetos que desee para definir la apariencia del control ScrollViewer en un panel de diseño de cuadrícula (Grid).

2. Seleccione el nuevo objeto Grid y, en el menú Herramientas, haga clic en Convertir en control.

3. En el cuadro de diálogo que aparece, seleccione ScrollViewer, asígnele un nombre a la plantilla y seleccione la ubicación donde se almacenará.

   Para obtener información acerca de las ubicaciones, vea Crear un recurso.

4. Después de hacer clic en Aceptar, Microsoft Expression Blend entra en el modo de edición de plantilla y muestra los objetos que forman parte del control ScrollViewer vertical. Puede continuar modificando la plantilla en este modo. Por ejemplo, agregar o modificar objetos, o bien seleccionar un estado en el panel Estados para modificar la apariencia de la plantilla en dicho estado.

5. Elimine el objeto ContentPresenter que se creó en la plantilla.

6. Para agregar un objeto que se asignará al elemento ScrollContentPresenter de la plantilla, haga doble clic en ScrollContentPresenter en el panel Elementos. Mueva el nuevo objeto ScrollContentPresenter a la posición deseada.

   Sugerencia:

   También puede agregar un objeto ScrollContentPresenter y cambiar su nombre a ScrollContentPresenter antes de convertir los objetos en un control ScrollViewer. Cuando el comando Convertir en control convierte objetos en un control, el objeto que tenga el mismo nombre y sea del mismo tipo que el elemento de la plantilla se convertirá automáticamente en dicho elemento. Si no se puede utilizar ningún objeto, el elemento aparecerá en el panel Elementos junto a un icono que indica que no se utiliza. Para obtener más información, vea Asignar elementos de plantilla a objetos.

7. Si tiene material gráfico u otros objetos que desea usar para los elementos HorizontalScrollBar y VerticalScrollBar de la plantilla, haga lo siguiente:

   1. Agrupe cada conjunto de objetos en un panel de diseño.

   2. Haga clic con el botón secundario en uno de los nuevos paneles de diseño, seleccione Convertir en elemento de ScrollViewer y, a continuación, haga clic en HorizontalScrollBar o en VerticalScrollBar.

      De este modo se reemplazarán los objetos por un objeto ScrollBar y se utilizarán para crear el estilo y la plantilla que se aplicarán al objeto ScrollBar.

   3. En el cuadro de diálogo Convertir en elemento, escriba un nombre para el estilo ScrollBar que se creará, seleccione una ubicación donde desee almacenar el estilo y, a continuación, haga clic en Aceptar.

   4. Mientras esté en el modo de edición de plantilla para el nuevo objeto ScrollBar, puede continuar haciendo modificaciones en los objetos.

      Para obtener más información, vea Sugerencias para la aplicación de estilos al control ScrollBar.

   Vuelva al modo de edición de plantilla para el objeto ScrollViewer haciendo clic en Ámbito superior  en el panel Objetos y escala de tiempo, o haciendo clic en HorizontalScrollBar o en VerticalScrollBar en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo.

8. Considere la posibilidad de enlazar las siguientes propiedades de los objetos de su plantilla a las propiedades del objeto ScrollViewer que finalmente usará su plantilla:

   • Visibilidad   Enlace esta propiedad de la plantilla a la propiedad Visible.

   • Máximo   Enlace esta propiedad de la plantilla a la propiedad Width (para el objeto HorizontalScrollBar) o a la propiedad Height (para el objeto VerticalScrollBar).

   Para obtener más información, vea Trasladar propiedades de objetos a la plantilla.

9. Considere la posibilidad de enlazar algunas de las propiedades de pincel en su plantilla:

   • Background

   • BorderBrush

   • BorderThickness

10. Para salir del modo de edición de plantilla, haga clic en [ScrollViewer] en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo, o haga clic en Ámbito superior en el panel Objetos y escala de tiempo.

    Para obtener información acerca de cómo aplicar una plantilla ScrollViewer nueva a otros objetos ScrollViewer, vea Aplicar o quitar un recurso.

Referencias

Puede encontrar información detallada acerca de las propiedades y eventos del control ScrollViewer de Microsoft Silverlight en la galería de controles de Silverlight (puede estar en inglés) en MSDN.

Vea también

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes

Aplicar estilos a un control que admite plantillas

SimpleScrollBar