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

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

Elementos de la plantilla Slider

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

Sugerencia

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

Nombre de elemento	Tipo de objeto
HorizontalTemplate  VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton  VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb  VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton  VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

Sugerencias para los controles deslizantes

Elemento Template

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

Para crear un elemento template, cree una cuadrícula denominada HorizontalTemplate o VerticalTemplate que contenga tres columnas (para la orientación horizontal) o filas (para la orientación vertical) con los tamaños Automático, Automático y Star.

Elemento Thumb

Este elemento es obligatorio. El control de posición es el elemento móvil del control deslizante.

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

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 el objeto u objetos que representa la barra en el elemento Template, de forma que abarquen las tres columnas (o filas).

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 RepeatButton funcionen pero que 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.

Estados del control Slider

De forma predeterminada, el control Slider puede estar en uno de los tres estados del grupo de estados CommonStates, que se pueden ver en el panel Estados al modificar una plantilla Slider:

Nombre del estado	Descripción
Normal	Apariencia del control Slider cuando no hay interacción con el control.
MouseOver	Apariencia del control Slider cuando el usuario mueve el puntero sobre él.
Disabled	Apariencia del control Slider cuando la propiedad IsEnabled está establecida en False.

El control Slider puede estar en alguno de los dos estados siguientes del grupo de estados FocusStates:

Nombre del estado	Descripción
Unfocused	Apariencia del control Slider cuando no tiene el foco del teclado.
Focused	Apariencia del control Slider cuando tiene el foco del teclado. Por ejemplo, un usuario puede presionar la tecla Tab para pasar de un objeto a otro en la aplicación hasta que el foco del teclado esté en el control Slider.

Sugerencia

Un grupo de estados contiene los estados visuales que forman parte de la misma categoría lógica y que no se pueden mostrar al mismo tiempo.Por ejemplo, el grupo CommonStates incluye estados relacionados con la interacción del usuario mediante un dispositivo de entrada como el mouse.Solo se puede mostrar un estado de este grupo de estados cada vez, pero un estado de un grupo sí se puede mostrar al mismo tiempo que un estado de otro grupo de estados.

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 modificar la apariencia del control cuando dos estados diferentes están activos, puede anclar una vista previa de un estado de un grupo de estados mientras modifica un estado de otro grupo de estados.

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 Slider

La imagen siguiente es un diseño completo (composición) de un control deslizante creado por un un diseñador que incluye los estados MouseOver y Pressed del elemento HorizontalThumb.

Normal

MouseOver

Pressed

Disabled

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

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. 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 Width="146" Height="17" >
   <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
   <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
   </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 Grid y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en Slider y, a continuación, haga clic en Aceptar.

   En la vista Código, observe que el código que pegó en el paso anterior ha sido reemplazado por el código correspondiente a un nuevo Slider. Además, Blend convirtió Grid en una plantilla para un nuevo estilo Slider y aplicó esa plantilla a Grid.

5. Para agregar columnas a la cuadrícula del elemento Template, en la vista Diseño, haga clic en la regla azul a la izquierda del control y arrástrela para agregar nuevas filas, según se muestra en la siguiente imagen:

   Si agrega las filas tal y como se muestra, los elementos estarán en las filas correctas. Track tiene un valor de 3 para ColumnSpan, y thumb está en Column 1.

   Nota

   La numeración empieza en 0, para que las 3 columnas se enumeren de 0 a 2.

6. Para convertir la raíz de la plantilla en el elemento HorizontalTemplate, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en Grid, haga clic en Crear en elemento de Slider y, a continuación, haga clic en HorizontalTemplate. Tenga en cuenta que Grid ha pasado a denominarse HorizontalTemplate.

7. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en thumb, haga clic en Crear en elemento de Slider y, a continuación, haga clic en HorizontalThumb.

8. Para agregar estados al elemento HorizontalThumb, siga este procedimiento:

   1. En el panel Objetos y escala de tiempo, haga clic en thumb.

   2. En el panel Estados, haga clic en MouseOver.

   3. En el panel Propiedades, establezca la propiedad Fill en #FFCCCCCC.

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

9. Haga clic con el botón secundario en MouseOver en el panel Estados, haga clic en Copiar estado a y, a continuación, haga clic en Pressed.

10. Para crear el desplazamiento, con el estado Pressed seleccionado en el panel Estados, en la categoría Transformar del panel Propiedades, establezca X e Y en 1. Haga clic en Base para finalizar la grabación de estado.

11. En el panel Estados, haga clic en Normal. Haga clic en Agregar transición y, a continuación, haga clic en Normal a MouseOver. Establezca Duración de la transición en 0,2. Haga clic en Base para finalizar la grabación de estado.

12. Vuelva al modo de edición de plantilla para el control Slider [SliderStyle1 (plantilla Slider)] haciendo clic en Devolver ámbito a  en el panel Objetos y escala de tiempo.

13. En el panel Objetos y escala de tiempo, haga clic en HorizontalThumb. En la categoría Diseño del panel Propiedades, haga clic en Opciones avanzadas junto a Margin y, a continuación, haga clic en Restablecer.

14. En el panel Objetos y escala de tiempo, haga clic en HorizontalTemplate. En el panel Elementos, haga doble clic en HorizontalTrackLargeChangeDecreaseRepeatButton para crear ese elemento y convertirlo en un elemento secundario de HorizontalTemplate. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 0.

15. En el panel Objetos y escala de tiempo, haga clic en HorizontalTemplate. En el panel Elementos, haga doble clic en HorizontalTrackLargeChangeIncreaseRepeatButton para crear ese elemento y convertirlo en un elemento secundario de HorizontalTemplate. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 0.

16. Para las columnas 0 y 1, haga clic en el icono Estrella  dos veces hasta que aparezca el icono Automático . Para la columna 2, asegúrese de que aparece el icono Estrella. Haga clic en el divisor de la columna central 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.

17. En el panel Objetos y escala de tiempo, haga clic en HorizontalTemplate. En el panel Estados, haga clic en Disabled. En la categoría Apariencia del panel Propiedades, establezca Opacidad en 50.

18. Compile el proyecto; para ello, presione Ctrl+Mayús+B. Una vez finalizada la compilación, presione 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 Slider 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

SimpleSlider (soporte WPF en Blend)