Inténtelo: Personalizar la apariencia de un control SimpleScrollBar

Es fácil personalizar la apariencia de una barra de desplazamiento en Blend para Visual Studio si se usa la plantilla de control SimpleScrollBar.

Para personalizar la apariencia de un estilo SimpleScrollBar

1. Dibuje un objeto SimpleScrollBar en la mesa de trabajo de Blend.

   Sugerencia

   Los controles de estilo simple están disponibles en Simple Styles, en la categoría Estilos del panel Activos.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 del panel Objetos y escala de tiempo, elija Editar plantilla y, después, haga clic en Editar actual. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar actual para crear una plantilla nueva y guardarla en el documento.

   Para obtener más información acerca de cómo crear una copia, vea Copiar, cortar, pegar o eliminar un objeto en Blend.

   Sugerencia

   Para salir del modo de edición de plantillas y volver al ámbito del documento, haga clic en Devolver ámbito a, que está encima del árbol de objetos en el panel Objetos y escala de tiempo.

   Para volver al modo de edición de plantilla para una plantilla existente, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto cuya plantilla desee editar, elija Editar plantilla y, a continuación, haga clic en Editar actual.

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

4. En el panel Objetos y escala de tiempo, haga clic en el objeto de trazado IncreaseArrow y, a continuación, establezca las propiedades Stroke y Fill en un Pincel de color sólido blanco. En el caso de la propiedad Stroke, primero tiene que quitar el enlace haciendo clic en Opciones avanzadas y después en Restablecer.

5. Haga clic con el botón secundario en el objeto IncreaseRepeat del panel Objetos y escala de tiempo, elija Editar plantilla y realice una de las acciones siguientes:

   • Si seleccionó Editar actual en el paso 2, haga clic en Editar actual ahora para editar la plantilla de 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 de control SimpleRepeatButton y guárdela en el mismo lugar que la plantilla del estilo SimpleScrollBar.

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

7. Vuelva al ámbito de edición de la plantilla SimpleScrollBar mediante una de las acciones siguientes:

   • 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 objeto ScrollBar, elija Editar plantilla y, a continuación, haga clic en Editar actual para volver a la plantilla ScrollBar que estaba editando antes.

   • Si está editando el documento principal, haga clic en Devolver ámbito a .

8. Repita el paso anterior para el objeto DecreaseRepeat.

9. Haga clic en el objeto GridRoot en el panel Objetos y escala de tiempo para activarlo. Haga clic en el control Border en el panel Herramientas y, a continuación, dibuje un objeto Border dentro del objeto GridRoot. Ajuste automáticamente el tamaño del nuevo objeto Border; para ello, haga clic con el botón secundario en él, en el panel Objetos y escala de tiempo, elija Redimensionar automáticamente y, a continuación, haga clic en Relleno.

10. Con el nuevo objeto Border todavía seleccionado en el panel Objetos y escala de tiempo, cambie la propiedad CornerRadius bajo Apariencia en el panel Propiedades a 4,4,4,4. Esto redondeará las esquinas del borde.

11. Haga clic con el botón secundario en el objeto [Thumb] del panel Objetos y escala de tiempo, elija Editar plantilla y, a continuación, haga clic en Editar una copia. En el ámbito de edición del estilo SimpleThumbStyle, haga clic en el objeto Rectangle y, a continuación, cambie la propiedad Fill a un Pincel de color sólido gris oscuro y establezca las propiedades Margin para los márgenes izquierdo y derecho en 2.

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

Vea también

Conceptos

SimpleScrollBar (soporte WPF en Blend)