Sugerencias para la aplicación de estilos al control ScrollBar para controles de Silverlight en Blend

Puede utilizar la plantilla de control ScrollBar integrada para crear una plantilla ScrollBar personalizada. La apariencia predeterminada de la plantilla de control ScrollBar es la siguiente:

Elementos de la plantilla ScrollBar

La plantilla ScrollBar incluye dos conjuntos de elementos: un conjunto para una barra de desplazamiento vertical y otro conjunto para una barra de desplazamiento horizontal. Los nombres de los elementos están precedidos por la palabra "vertical" u "horizontal," según la orientación de la barra de desplazamiento.

Sugerencia

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

Nombre de elemento	Tipo de objeto
VerticalRoot  HorizontalRoot	FrameworkElement
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton
VerticalThumb  HorizontalThumb	Thumb
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton

Sugerencias de ScrollBar

Elemento Root

Este elemento es obligatorio. El elemento Root contiene todos los elementos que componen el control ScrollBar en una orientación determinada.

Para crear un elemento Root, cree una cuadrícula denominada HorizontalRoot o VerticalRoot que contenga cinco columnas (para la orientación horizontal) o filas (para la orientación vertical) con los tamaños Automático, Automático, Automático, Star, Automático.

Elemento Thumb

Este elemento es obligatorio. El control de posición es el elemento móvil de la barra de desplazamiento.

Para convertir el objeto u objetos que representan en control de posición en un control Thumb (HorizontalThumb o VerticalThumb), coloque el elemento Thumb en la columna/fila central del elemento Root y establezca las propiedades Width y Height del elemento Thumb para que se cambie el tamaño de la columna (o la fila) para ajustarse al control de posición.

No establezca las propiedades Margin para el control de posición. Para obtener el mismo efecto, establezca los márgenes del objeto raíz de la plantilla Thumb.

Barra

El espacio en el que se mueve el control de posición se denomina barra. La barra no es un elemento y es opcional.

Para incluir una barra, coloque los objetos que representa la barra en el elemento Root, de forma que abarquen las cinco columnas (o filas) o solo las tres columnas (o filas) intermedias.

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

Mover el control de posición a lo largo de la barra en incrementos grandes

Si desea que el usuario pueda hacer clic en la barra en un lado cualquiera del control de posición para mover el control en incrementos grandes, coloque un control RepeatButton en las dos columnas (o filas) en uno de los lados del elemento Thumb y denomínelos VerticalLargeDecrease y VerticalLargeIncrease (o HorizontalLargeDecrease y HorizontalLargeIncrease). Para que los controles RepeatButtons funcionen pero no se vean, establezca el valor de Opacity en cero. Como alternativa, aplique una plantilla que contenga un solo objeto con Opacity cero a los controles RepeatButton.

Mover el control de posición a lo largo de la barra en incrementos pequeños

Si desea que el usuario pueda hacer clic en un botón en un extremo cualquiera de la barra para mover el control de posición en pequeños incrementos, convierta los objetos que representan estos botones en controles RepeatButton y denomínelos VerticalSmallDecrease y VerticalSmallIncrease (o HorizontalSmallDecrease y HorizontalSmallIncrease). Colóquelos en los extremos de las dos columnas (o filas).

Elementos del control ScrollBar

También puede utilizar estados con la plantilla de control ScrollBar. De forma predeterminada, el control ScrollBar puede estar en uno de los tres estados siguientes del grupo de estados CommonStates:

Nombre del estado	Descripción
Normal	Apariencia del control ScrollBar cuando no hay 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 está establecida en False.

Sugerencia

Para ver los estados disponibles, abra el panel Estados cuando modifique una plantilla ScrollBar.

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 Indicador de modo de grabación  o seleccione Base en el panel Estados.

Para obtener más información, vea Definir distintos estados visuales para un control en Blend.

Enlace de plantillas

Puede enlazar mediante plantilla las propiedades Background, BorderBrush, Foreground, BorderThickness o Padding. Para obtener más información, vea Trasladar propiedades de objetos a la plantilla en Blend.

Para convertir objetos en un control ScrollBar

La imagen siguiente es un diseño completo (composición) de una barra de desplazamiento que incluye los estados MouseOver y Pressed de los elementos VerticalThumb, VerticalSmallDecrease y VerticalSmallIncrease.

Normal

MouseOver

Pressed

Disabled

En este ejemplo se utiliza el código XAML del paso 1 del siguiente procedimiento, que corresponde a los gráficos anteriores para crear una barra de desplazamiento personalizada mediante la plantilla de control ScrollBar.

Sugerencia

Haga clic en Vista en dos paneles para ver los cambios en la Vista de diseño y en la vista Código a medida que sigue este procedimiento.

1. Abra un nuevo proyecto de Microsoft Silverlight. En la Vista de código, busque el código siguiente y, a continuación, elimine la barra diagonal (/) de cierre.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copie y pegue el código siguiente en el nuevo proyecto, después del código que encontró en el paso 1.

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

3. Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.

4. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en verticalscrollbar y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en ScrollBar y, a continuación, haga clic en Aceptar.

   En la Vista de código, observe que el código que pegó en el paso anterior ha sido reemplazado por el código para un nuevo control ScrollBar (busque el código que empieza por <Grid x:Name="verticalscrollbar">). Además, Blend para Visual Studio convirtió verticalscrollbar en una plantilla para un nuevo estilo ScrollBar y aplicó dicha plantilla a verticalscrollbar (busque <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">).

   Sugerencia

   En el panel Objetos y escala de tiempo, tenga en cuenta que UserControl ha sido reemplazado por Template.

5. Para hacer que verticalscrollbar sea la raíz de la plantilla, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en verticalscrollbar y, a continuación, haga clic en Crear en elemento de ScrollBar y, a continuación, haga clic en VerticalRoot. Tenga en cuenta que verticalscrollbar ha pasado a denominarse VerticalRoot.

6. Para agregar filas a la cuadrícula del elemento Root, en la vista Diseño, haga clic en la regla azul a la izquierda del control para agregar nuevas filas.

   Si agrega las filas tal y como se muestra, los elementos estarán en las filas correctas. Track tiene un RowSpan de 5, smalldecrease está en Row 0, thumb está en Row 2 y smallincrease está en Row 4.

   Nota

   La numeración empieza en 0, para que las 5 filas se enumeren de 0 a 4.

   Ahora debe definir los elementos de la ilustración como elementos de la plantilla. A medida que se definen los elementos, también puede asignar valores a propiedades específicas.

7. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en smalldecrease, haga clic en Crear en elemento de ScrollBar y, a continuación, haga clic en VerticalSmallDecrease. En el cuadro de diálogo Crear en elemento, haga clic en Aceptar.

   El elemento smalldecrease se acaba de convertir en un tipo de RepeatButton que es el elemento VerticalSmallDecrease de la plantilla de control ScrollBar.

8. De forma predeterminada, Blend crea un ContentPresenter para el elemento. En este ejemplo, no se utilizará ContentPresenter, por lo que puede eliminarlo haciendo clic con el botón secundario en ContentPresenter en el panel Objetos y escala de tiempo y, a continuación, haciendo clic en Eliminar.

9. Para establecer las propiedades del elemento VerticalSmallDecrease, en el Objetos y escala de tiempo, haga clic en smalldecrease y, a continuación, abra el panel Propiedades. En la categoría Diseño, establezca Ancho y Alto en 7.

10. Para agregar estados al elemento VerticalSmallDecrease, en el panel Estados, haga clic en MouseOver. En el panel Propiedades, establezca la propiedad Fill en #FFCCCCCC. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

    Nota

    También puede finalizar la grabación de estado haciendo clic en el Indicador de modo de grabación  en la esquina superior izquierda de la ventana del documento.

    En el panel Estados, haga clic en Pressed. En el panel Propiedades, establezca la propiedad Fill en #FFE5E5E5. Vuelva al panel Estados y, a continuación, haga clic en Base.

    En el panel Estados, haga clic en Normal, haga clic en Agregar transición y, a continuación, en Normal a MouseOver. En el cuadro Duración de la transición, escriba 0,2 y, a continuación, haga clic en Base.

11. En el panel Objetos y escala de tiempo, haga clic en Grid. En la categoría Pinceles del panel Propiedades, haga clic en Pincel de color sólido  y establezca la propiedad Alpha en 1.

12. Vuelva al modo de edición de plantilla para el objeto ScrollBar [ScrollBarStyle1 (plantilla ScrollBar)] haciendo clic en Devolver ámbito a  en el panel Objetos y escala de tiempo, o haciendo clic en VerticalSmallDecrease en la barra de ruta de navegación, situada en la parte superior de la mesa de trabajo.

    Repita los pasos 7 al 12 para el elemento smallincrease.

13. Para definir thumb como elemento de la plantilla, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en thumb, haga clic en Crear en elemento de ScrollBar y, a continuación, haga clic en VerticalThumb. En el cuadro de diálogo Crear en elemento, haga clic en Aceptar.

14. Para establecer las propiedades del elemento VerticalThumb, vuelva al modo de edición de plantilla para el control ScrollBar [ScrollBarStyle1 (plantilla ScrollBar)] haciendo clic en Devolver ámbito a  y, a continuación, en el panel Objetos y escala de tiempo, haga clic en VerticalThumb. En el panel Propiedades, en la categoría Diseño, establezca Width y Height en 7. Establezca los valores de Margen de la manera siguiente:

    • Izquierdo: 5

    • Derecho: 5

    • Superior: 0

    • Inferior: 0

    Haga clic en Propiedades avanzadas y, a continuación, establezca MinHeight en 7. Se asigna un valor de altura mínima para el control de desplazamiento, de modo que esté siempre visible.

15. Para agregar estados al elemento thumb, vuelva a la plantilla Thumb [ThumbStyle1(ThumbTemplate)] haciendo clic en thumb en la barra de ruta de navegación en la parte superior de la mesa de trabajo. En el panel Estados, haga clic en MouseOver. En el panel Propiedades, establezca la propiedad Fill en #FFCCCCCC. Vuelva al panel Estados y, a continuación, haga clic en Base.

    En el panel Estados, haga clic en Pressed. En el panel Propiedades, establezca la propiedad Fill en #FFE5E5E5. Vuelva al panel Estados y, a continuación, haga clic en Base.

    En el panel Estados, haga clic en Normal, haga clic en Agregar transición y, a continuación, en Normal a MouseOver. En el cuadro Duración de la transición, escriba 0,2 y, a continuación, haga clic en Base.

16. Vuelva a ScrollBarStyle1 (plantilla de ScrollBar) haciendo clic en Devolver ámbito a  en el panel Objetos y escala de tiempo. En el panel Objetos y escala de tiempo, haga clic en VerticalRoot. En el panel Elementos, haga doble clic en VerticalLargeDecrease para crear ese elemento y convertirlo en un elemento secundario de VerticalRoot. En el panel Propiedades, establezca Row en 1 y Opacity en 0.

17. En el panel Objetos y escala de tiempo, haga clic en VerticalRoot. En el panel Elementos, haga doble clic en VerticalLargeIncrease para crear ese elemento y convertirlo en un elemento secundario de VerticalRoot. En el panel Propiedades, establezca Row en 3 y Opacity en 0.

18. Para las filas 0, 1, 2 y 4, haga clic en el icono Estrella  dos veces hasta que aparezca el icono Automático . Para la fila 3, asegúrese de que aparece el icono Estrella. Se establecen los valores de alto de las filas del siguiente modo: Automático, Automático, Automático, Estrella y Automático. Haga clic en cada uno de los divisores de fila de tamaño automático y, a continuación, en el panel Propiedades, haga clic en Mostrar propiedades avanzadas. A la derecha del valor MinHeight, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer.

19. En el panel Objetos y escala de tiempo, haga clic en VerticalRoot. En el panel Estados, haga clic en Disabled. En el panel Propiedades, establezca Opacity en 50.

20. Compile el proyecto; para ello, haga clic en Ctrl+Mayús+B. Una vez finalizada la compilación, haga clic en F5 para ejecutar el proyecto y, a continuación, pruebe la barra de desplazamiento.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control  ScrollBar de Silverlight en la página de controles y cuadros de diálogo de Silverlight 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 en Blend

SimpleScrollBar (soporte WPF en Blend)