Personalizar la apariencia de un control SimpleScrollBar

Personalizar la apariencia de una barra de desplazamiento en Microsoft® Expression Blend™ es fácil cuando se usa la plantilla del control SimpleScrollBar.

Para personalizar la apariencia de un control SimpleScrollBar

  1. Dibuje un control SimpleScrollBar en el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  2. Haga clic con el botón secundario en la barra de desplazamiento de 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 sobre 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 Botón Ámbito superior, que está situado encima del árbol de elementos del panel Interacción.

    Para volver al modo de edición de plantilla de una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desea editar, 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 Alfa (identificado por una "A" en el lado derecho de la paleta de color) de las propiedades Background y BorderBrush en 0%, en la categoría Pinceles del panel Propiedades.
  4. En Objetos y escala de tiempo, haga clic en el elemento de trazado IncreaseArrow y establezca las propiedades Stroke y Fill en un Pincel de color sólido Botón Pincel de color sólido blanco. Para la propiedad Stroke, es preciso quitar primero el enlace; para ello, haga clic en el botón Opciones avanzadas de la propiedad Botón Opciones avanzadas de la propiedad y, a continuación, haga clic 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, dentro del panel Interacción; para ello, seleccione cada desencadenador y haga clic en el botón Eliminar desencadenador 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 del área de diseño. 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 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, haga clic en el control Border del Cuadro de herramientas y, a continuación, 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 Ajuste automático de tamaño y, a continuación, haga clic en Rellenar.
  10. Con el nuevo elemento Border seleccionado todavía en Objetos y escala de tiempo, cambie la propiedad CornerRadius 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, después, 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 a un Pincel de color sólido Botón 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.