Sugerencias para la aplicación de estilos al control ScrollBar

El control ScrollBar representa un rango de valores, donde el valor actual está representado por la posición de un tipo de objeto llamado Thumb. Los objetos ScrollBar se usan normalmente dentro de las plantillas de otros controles (por ejemplo, los controles ListBox o ScrollViewer) con el fin de proporcionar funcionalidad de desplazamiento.

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

Propiedades de interés del control ScrollBar

Para hacer que el control ScrollBar sea horizontal o vertical, modifique la propiedad Orientation, en Diseño, dentro del panel Propiedades. Puede especificar el rango de valores si establece las propiedades Minimum y Maximum en Propiedades comunes dentro del panel Propiedades. El valor actual (especificado en la propiedad Value) debe estar comprendido entre los valores máximo y mínimo. En la categoría Propiedades comunes hay otras propiedades que se pueden establecer, como LargeChange y SmallChange.

Puede establecer estas propiedades de varias formas:

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

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

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

El control ScrollBar cambia su apariencia en función del estado en el que se encuentre. La apariencia de cada estado se puede modificar mientras se está en el modo de edición de plantilla si se selecciona un estado en el panel Estados.

Para obtener más información, vea los estados que se enumeran en las siguientes tablas, y vea Definir distintos estados visuales para un control.

Elementos de la plantilla ScrollBar

El control ScrollBar usa una plantilla: la plantilla ScrollBar. Cada elemento de la plantilla desempeña un papel en la apariencia y el comportamiento del objeto ScrollBar al que se aplica la plantilla.

En la plantilla, pueden existir otros objetos para adornar la apariencia del control ScrollBar, 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
VerticalRoot  HorizontalRoot	FrameworkElement	Panel de diseño que contiene los objetos que definen la apariencia del control ScrollBar mientras se orienta verticalmente (u horizontalmente). Este elemento es obligatorio.
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton	Objeto que disminuye la propiedad Value de ScrollBar al hacer clic en el objeto. La propiedad Value disminuye de forma incremental según el valor de la propiedad SmallChange.
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton	Objeto que disminuye la propiedad Value de ScrollBar al hacer clic en el objeto. La propiedad Value disminuye de forma incremental según el valor de la propiedad LargeChange. Este elemento es obligatorio. Sugerencia: Los objetos RepeatButton tienen propiedades que el usuario puede establecer, pero si desea agregar, eliminar o modificar los objetos que forman el objeto RepeatButton, abra la plantilla correspondiente.
VerticalThumb  HorizontalThumb	Thumb	Un objeto cuya posición a lo largo de una barra representa el valor actual del control ScrollBar. Este elemento es obligatorio. Sugerencia: Los objetos Thumb tienen propiedades que el usuario puede establecer, pero si desea agregar, eliminar o modificar los objetos que forman el objeto Thumb, abra la plantilla correspondiente.
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton	Objeto que aumenta la propiedad Value de ScrollBar al hacer clic en el objeto. La propiedad Value aumenta de forma incremental según el valor de la propiedad LargeChange. Este elemento es obligatorio.
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton	Objeto que aumenta la propiedad Value de ScrollBar al hacer clic en el objeto. La propiedad Value aumenta de forma incremental según el valor de la propiedad SmallChange.

Elementos del control ScrollBar

De forma predeterminada, el control ScrollBar puede estar en uno de los tres estados que se indican a continuación, y que se pueden ver en el panel Estados al modificar una plantilla ScrollBar:

Nombre del estado	Descripción
Normal	Apariencia del control ScrollBar cuando no hay ninguna interacción con el control.
MouseOver	Apariencia del control ScrollBar cuando el usuario mueve el puntero sobre él.
Disabled	Apariencia del control ScrollBar cuando la propiedad IsEnabled se ha establecido en False.

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación del estado, haga clic en el botón de grabación o seleccione Base en el panel Estados.

Para convertir objetos en un control ScrollBar

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

• Dibuje un control ScrollBar  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 ScrollBar 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 ScrollBar requiere:

1. Agrupe los objetos en un panel de diseño, seleccione el panel de diseño y, a continuación, en el menú Herramientas, haga clic en Convertir en control.

2. En el cuadro de diálogo que aparece, seleccione ScrollBar, 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.

3. 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 ScrollBar.

4. La plantilla de un control ScrollBar incluye elementos que se usan cuando un objeto ScrollBar está orientado vertical u horizontalmente. Puede asignar todos los elementos del panel Elementos a objetos de la plantilla, o bien asignar solo los elementos relacionados con una orientación del control ScrollBar. Si solo tiene un conjunto de objetos, pero desea diseñar la plantilla para ambas orientaciones del control ScrollBar, puede duplicar los objetos y reorganizarlos.

   Sugerencia:

   Si solo asigna los elementos horizontales en el panel Elementos a los objetos de la plantilla, desaparecerán de la mesa de trabajo si el objeto ScrollBar (al que se aplica la plantilla) se ha establecido para mostrarse verticalmente. Para cambiar la orientación del objeto ScrollBar, haga clic en [ScrollBar] en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo para volver al ámbito de edición del objeto ScrollBar, establezca la propiedad Orientation en Horizontal y, a continuación, use el tercer botón de la barra de ruta de navegación para volver al modo de edición de plantilla.

5. Para crear el objeto para el elemento VerticalRoot (u HorizontalRoot), realice los pasos siguientes:

   1. Dibuje un panel de diseño Grid  que tenga cinco columnas (o cinco filas). Las cinco columnas deben tener el tamaño Auto, Auto, Auto, * y Auto, respectivamente.

      

      Para obtener más información, vea Agregar o quitar una fila o columna y Cambiar la opción de tamaño de una fila o columna.

   2. Haga clic con el botón secundario en el nuevo objeto Grid, seleccione Convertir en elemento de ScrollBar y, a continuación, haga clic en VerticalRoot (o en HorizontalRoot).

6. El espacio en el que se mueve el objeto Thumb se denomina barra. La barra no es un elemento de la plantilla y, por tanto, es opcional. Coloque el objeto u objetos que desee para representar la barra en el objeto VerticalRoot (u HorizontalRoot), extendiendo las cinco columnas (o filas) o solo las tres intermedias.

   Sugerencia:
   Para que un objeto abarque varias columnas (o filas), seleccione el objeto y, a continuación, en el panel Propiedades, establezca la propiedad RowSpan (o ColumnSpan).

7. Dado que los objetos Thumb pueden tener su propia plantilla, debe convertir los objetos que desee usar en un control Thumb mediante los pasos siguientes:

   1. Agrupe los objetos que representarán el objeto Thumb en un panel de diseño.

   2. Mueva el nuevo panel de diseño a la fila (o columna) central del objeto VerticalRoot (o el objeto HorizontalRoot).

      Sugerencia:
      Para colocar un objeto en una columna (o fila) específica, seleccione el objeto y, a continuación, en el panel Propiedades, establezca la propiedad Row (o Column). El número de la primera fila (o columna) es 0.

   3. Haga clic con el botón secundario en el nuevo panel de diseño, seleccione Convertir en elemento de ScrollBar y, a continuación, haga clic en VerticalThumb (o en HorizontalThumb).

   4. En el cuadro de diálogo Convertir en elemento, seleccione la ubicación donde se almacenará la plantilla.

   5. Mientras esté en el modo de edición de plantilla para el nuevo objeto Thumb, puede continuar realizando modificaciones, como seleccionar estados en el panel Estados para modificar la apariencia del objeto Thumb en esos estados. Si desea incluir un margen en el objeto Thumb, establezca las propiedades Margin en el objeto raíz.

   6. Vuelva al modo de edición de plantilla para el objeto ScrollBar haciendo clic en Ámbito superior  en el panel Objetos y escala de tiempo, o haciendo clic en VerticalThumb (o en HorizontalThumb) en la barra de ruta de navegación, situada en la parte superior de la mesa de trabajo.

   7. Establezca las propiedades Width y Height del objeto Thumb en Auto, establezca la propiedad MinHeight (o MinWidth) en un valor mayor que 0 y, por último, establezca las propiedades Margin en 0.

8. Si desea que el usuario pueda hacer clic en un botón en uno de los extremos de la barra para mover el objeto Thumb en incrementos pequeños, realice los pasos siguientes:

   1. Agrupe los objetos que desee usar para el botón de disminución en un panel de diseño.

   2. Mueva el panel de diseño a la primera fila (o columna) del objeto VerticalRoot (o a la primera columna del objeto HorizontalRoot).

   3. Haga clic con el botón secundario en el panel de diseño, seleccione Convertir en elemento de ScrollBar y, a continuación, haga clic en VerticalSmallDecrease (o en HorizontalSmallDecrease).

   4. En el cuadro de diálogo Convertir en elemento, seleccione la ubicación donde se almacenará la plantilla.

   5. Mientras esté en el modo de edición de plantilla para el nuevo objeto RepeatButton, puede continuar haciendo modificaciones, como eliminar el objeto ContentPresenter. Si desea incluir un margen en el objeto RepeatButton, establezca las propiedades Margin en el objeto raíz.

   6. Vuelva al modo de edición de plantilla para el objeto ScrollBar haciendo clic en Ámbito superior  en el panel Objetos y escala de tiempo, o haciendo clic en VerticalSmallDecrease (o en HorizontalSmallDecrease) en la barra de ruta de navegación, situada en la parte superior de la mesa de trabajo.

   7. Ajuste las propiedades de Diseño en el panel Propiedades para que el objeto RepeatButton aparezca en el lugar que desee. También es posible que desee reorganizar los objetos si están ocultos detrás de otros objetos.

      Para obtener más información, vea Cambiar el orden de distribución en capas de los objetos.

   8. Repita estos pasos para el objeto VerticalSmallIncrease (o el objeto HorizontalSmallIncrease), moviéndolo a la última fila del objeto VerticalRoot (o a la última columna del objeto HorizontalRoot).

9. Si desea que el usuario pueda hacer clic en la barra en cualquier lado del objeto Thumb para moverlo en incrementos mayores, realice los pasos siguientes:

   1. Dibuje un control RepeatButton en cada una de las filas (o columnas) de cualquier lado del objeto Thumb.

   2. Haga clic con el botón secundario en el objeto RepeatButton que disminuirá el valor del objeto ScrollBar, señale Convertir en elemento de ScrollBar y, a continuación, haga clic en VerticalLargeDecrease (o en HorizontalLargeDecrease).

   3. Haga clic con el botón secundario en el objeto RepeatButton que aumentará el valor del objeto ScrollBar, seleccione Convertir en elemento de ScrollBar y, a continuación, haga clic en VerticalLargeIncrease (o en HorizontalLargeIncrease).

   4. Si no desea que los objetos RepeatButton estén visibles, puede establecer sus propiedades de Opacity en 0.

      Sugerencia:
      Como alternativa, puede convertir objetos existentes en plantillas de control RepeatButton, del mismo modo que hizo con el objeto VerticalSmallDecrease (o el objeto HorizontalSmallDecrease). Asegúrese de mover los objetos RepeatButton convertidos a las filas (o columnas) situadas a cada lado del objeto Thumb.

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

11. Considere la posibilidad de enlazar algunas de las propiedades de pincel de los objetos de la plantilla a las siguientes propiedades del objeto ScrollBar que finalmente usará la plantilla:

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

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

12. Para salir del modo de edición de plantilla, haga clic en [ScrollBar] 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 ScrollBar nueva a otros objetos ScrollBar, vea Aplicar o quitar un recurso.

Referencias

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

Vea también

Tareas

Enlazar un objeto con datos proporcionados por el usuario o con otros valores internos

Conceptos

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

SimpleScrollBar

Aplicar estilos a un control que admite plantillas