Inténtelo: Personalizar la apariencia de un control SimpleScrollBar

Es fácil personalizar la apariencia de una barra de desplazamiento en Microsoft Expression Blend cuando se usa la plantilla del control SimpleScrollBar.

Para personalizar la apariencia de un control SimpleScrollBar

1. Dibuje un control SimpleScrollBar en la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en la categoría Simple Styles de la ficha Controles del Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Haga clic con el botón secundario en la barra de desplazamiento en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, haga clic en Editar plantilla. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar plantilla para crear una plantilla nueva y guardarla en el documento. Para obtener más información acerca de cómo crear una copia, vea Crear un recurso.

   Sugerencia:

   Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en el botón Ámbito superior, que se encuentra encima del árbol de elementos en el panel Interacción. Para volver al modo de edición de plantillas para una plantilla existente, haga clic con el botón secundario en el elemento cuya plantilla desea editar en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.

3. En Objetos y escala de tiempo, haga clic en el elemento IncreaseRepeat y establezca el atributo Alpha (identificado mediante una A en el lado derecho de la paleta de colores) de las propiedades Background (fondo) y BorderBrush (pincel del borde) en 0 por cierto en Pinceles, en el panel Propiedades.

4. En Objetos y escala de tiempo, haga clic en el elemento de trazado IncreaseArrow y, a continuación, establezca las propiedades Stroke (trazo) y Fill (relleno) en un Pincel de color sólido blanco . Para la propiedad Stroke (trazo), primero deberá quitar el enlace haciendo clic en el botón Opciones avanzadas de la propiedad y después en Restablecer.

5. Haga clic con el botón secundario en el elemento IncreaseRepeat de Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y siga uno de estos procedimientos:

   • Si seleccionó Editar plantilla en el paso 2, haga clic en Editar plantilla ahora para editar la plantilla del control SimpleRepeatButton que está almacenada en SimpleStyles.xaml.

   • Si seleccionó Editar una copia en el paso 2, haga clic en Editar una copia ahora para crear una copia de la plantilla del control SimpleRepeatButton y guárdela en el mismo lugar que la plantilla de ScrollBar.

6. En el ámbito de edición de SimpleRepeatButton, elimine los desencadenadores de eventos IsMouseOver = True e IsPressed = True en Desencadenadores, en el panel Interacción; para ello, seleccione cada desencadenador y haga clic en el botón Eliminar desencadenador.

7. Vuelva al ámbito de edición de la plantilla de SimpleScrollBar mediante uno de estos procedimientos:

   • Si está editando el documento Simple Styles.xaml porque eligió Editar plantilla en el paso 5, haga clic en la ficha del documento principal (por ejemplo, la ficha Window1.xaml) en la parte superior de la mesa de trabajo. Haga clic con el botón secundario en el elemento ScrollBar, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla para volver a la plantilla de ScrollBar que estaba editando antes.

   • Si está editando el documento principal, haga clic en el botón Ámbito superior.

8. Repita el paso anterior para el elemento DecreaseRepeat.

9. Active el elemento GridRoot; para ello, haga doble clic en él en Objetos y escala de tiempo, a continuación, haga clic en el control Border del Cuadro de herramientas y dibuje un borde dentro del elemento GridRoot. Ajuste automáticamente el tamaño del nuevo elemento Border; para ello, haga clic en él con el botón secundario en Objetos y escala de tiempo, elija Redimensionar automáticamente y, a continuación, haga clic en Relleno.

10. Con el nuevo elemento Border seleccionado todavía en Objetos y escala de tiempo, cambie la propiedad CornerRadius (radio de redondeo) de Apariencia, en el panel Propiedades, a 4,4,4,4. De esta manera, se redondearán los vértices del borde.

11. Haga clic con el botón secundario en el elemento [Thumb] de Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar una copia. En el ámbito de edición de ScrollBarStyle, haga clic en el elemento Rectangle y, a continuación, cambie la propiedad Fill (relleno) a un Pincel de color sólido gris oscuro y establezca las propiedades Margin derecho e izquierdo en 2.

12. Pruebe la aplicación (F5) para ver los efectos.

Vea también

Conceptos

SimpleScrollBar