Sugerencias para la aplicación de estilos al control Slider

El control Slider representa un intervalo de valores, en el que el valor actual está representado por la posición de un tipo de objeto denominado Thumb.

Al igual que con todos los controles, el control Slider se puede modificar para que tenga una apariencia muy diferente a la predeterminada. La apariencia predeterminada del control Slider es la siguiente:

Propiedades de interés del control Slider

Puede hacer que un control Slider sea horizontal o vertical estableciendo la propiedad Orientation en Propiedades comunes en el panel Propiedades. También puede invertir la dirección de los números seleccionando la propiedad IsDirectionReversed. Para especificar el intervalo de valores, establezca las propiedades Minimum y Maximum. El valor actual (especificado en la propiedad Value) debe estar comprendido entre los valores máximo y mínimo. En la categoría Propiedades comunes hay otras propiedades que se pueden establecer, como LargeChange y SmallChange.

Puede establecer estas propiedades de varias formas:

• Establecer las propiedades del objeto    Después de dibujar un objeto Slider en la mesa de trabajo, puede establecer estas propiedades del objeto directamente. Si desea que varios controles Slider usen los mismos valores, establezca estas propiedades en un estilo.

• Establecer las propiedades en un estilo   Si establece estas propiedades en el estilo del objeto Slider, todos los objetos Slider que usen ese estilo usarán esos valores. Puede sobrescribir los valores de un objeto específico.

  Para obtener más información, vea Crear un estilo.

El control Slider cambia de apariencia según el estado en el que esté. Puede modificar la apariencia de cada estado en el modo de edición de plantilla seleccionando un estado en el panel Estados.

Para obtener más información, vea los estados que se enumeran en las siguientes tablas, y vea Definir distintos estados visuales para un control.

Elementos de la plantilla Slider

El control Slider usa una plantilla: Plantilla Slider. Cada parte de la plantilla juega un papel en la apariencia y el comportamiento del objeto Slider al que se aplica la plantilla.

Otros objetos pueden coexistir en la plantilla para adornar la apariencia del control Slider, pero los elementos que se enumeran en la tabla siguiente están asociados a su comportamiento en un contrato.

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

Nombre de elemento	Tipo de objeto	Descripción
HorizontalTemplate  VerticalTemplate	FrameworkElement	Panel de diseño que contiene los objetos que definen la apariencia del control Slider cuando está orientado horizontalmente (o verticalmente). Este elemento es obligatorio.
HorizontalTrackLargeChangeDecreaseRepeatButton  VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton	Objeto que disminuye la propiedad Value del objeto Slider al hacer clic en el objeto. La propiedad Value (valor) disminuye de forma incremental según el valor de la propiedad LargeChange.
HorizontalThumb  VerticalThumb	Thumb	Objeto cuya posición a lo largo de una barra representa el valor actual del control Slider. Este elemento es obligatorio.
HorizontalTrackLargeChangeIncreaseRepeatButton  VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton	Objeto que disminuye la propiedad Value del objeto Slider al hacer clic en el objeto. La propiedad Value (valor) aumenta de forma incremental según el valor de la propiedad LargeChange.

Estados del control Slider

De forma predeterminada, el control Slider puede estar en alguno de los tres estados siguientes del grupo de estados CommonStates, que puede ver en el panel Estados cuando modifica 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 el 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.

Para convertir objetos en un control Slider

Para modificar la plantilla de un control Slider, realice una de las acciones siguientes:

• Dibuje un control Slider  en la mesa de trabajo y cree una copia de la plantilla predeterminada.

  Para obtener más información, vea Crear o modificar una plantilla.

• Diseñe el aspecto del control Slider dibujando objetos o importando material gráfico, y use después el comando Convertir en control.

Si usa el comando Convertir en control, siga estos pasos para estar seguro de que crea todos los objetos que requiere la plantilla Slider:

1. Agrupe todos los objetos con los que desea definir la apariencia del control Slider en un panel de diseño de cuadrícula (Grid).

2. Seleccione el nuevo objeto Grid y, en el menú Herramientas, haga clic en Convertir en control.

3. En el cuadro de diálogo que aparece, seleccione Slider, dé un nombre a la plantilla y seleccione la ubicación donde se almacenará la plantilla.

   Para obtener información acerca de las ubicaciones, vea Crear un recurso.

4. Al hacer clic en Aceptar, Microsoft Expression Blend entra en el modo de edición de plantilla y muestra los objetos que constituyen el control Slider vertical.

5. La plantilla de un control Slider incluye elementos que se usan cuando el objeto Slider está orientado horizontal o verticalmente. Puede asignar todos los elementos del panel Elementos a objetos de la plantilla; o bien, puede asignar sólo los elementos relacionados con una orientación del control Slider. Si tiene sólo un conjunto de objetos, pero desea diseñar la plantilla para ambas orientaciones del control Slider, puede duplicar los objetos y reorganizar el conjunto duplicado.

   Sugerencia:

   Si asigna sólo elementos verticales del panel Elementos a los objetos de la plantilla, los objetos desaparecerán de la mesa de trabajo si el objeto Slider (al que está aplicada la plantilla) está establecido para mostrarse horizontalmente. Para cambiar la orientación del objeto Slider, haga clic en [Slider] en la barra de ruta de navegación de la parte superior de la mesa de trabajo para volver al ámbito de edición del objeto Slider, establezca la propiedad Orientation en Vertical y use el tercer botón de la barra de ruta de navegación para volver al modo de edición de plantilla.

6. Para crear el objeto para el elemento HorizontalTemplate (o VerticalTemplate), proceda como se indica a continuación:

   1. Dibuje un panel de diseño Grid  que tenga tres columnas (o tres filas). Las tres columnas deben tener los valores de tamaño Auto, Auto y variación de tamaño proporcional (*), respectivamente.

      Para obtener más información, vea Agregar o quitar una fila o columna y Cambiar la opción de tamaño de una fila o columna.

   2. Haga clic con el botón secundario en el nuevo objeto Grid, seleccione Convertir en elemento de Slider y, a continuación, haga clic en HorizontalTemplate (o en VerticalTemplate).

7. El espacio en el que se mueve el objeto Thumb se denomina barra. La barra no es un elemento de la plantilla y, por tanto, es opcional. Coloque los objetos que desee para representar la barra en el objeto HorizontalTemplate (o VerticalTemplate), de forma que abarquen las tres columnas (o filas).

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

8. Puesto que un objeto Thumb puede tener su propia plantilla, los objetos que desee usar deben convertirse en un control Thumb del siguiente modo:

   1. Agrupe los objetos que representarán el objeto Thumb en un panel de diseño.

   2. Mueva el nuevo panel de diseño a la columna (o fila) central del objeto HorizontalTemplate (o VerticalTemplate).

      Sugerencia:
      Para colocar un objeto en una columna (o fila) específica, seleccione el objeto y, en el panel Propiedades, establezca la propiedad Column (o Row). El número de la primera columna (o fila) es 0.

   3. Haga clic con el botón secundario en el nuevo panel de diseño, seleccione Convertir en elemento de Slider y, a continuación, haga clic en HorizontalThumb (o en VerticalThumb).

   4. En el cuadro de diálogo Convertir en elemento, seleccione la ubicación donde se almacenará la plantilla.

   5. Mientras esté en el modo de edición de plantilla para el nuevo objeto Thumb, puede continuar realizando modificaciones, como seleccionar estados en el panel Estados para modificar la apariencia del objeto Thumb en esos estados. Si desea incluir un margen en el objeto Thumb, establezca las propiedades Margin en el objeto raíz.

   6. Vuelva al modo de edición de plantilla para el objeto Slider haciendo clic en Ámbito superior  en el panel Objetos y escala de tiempo, o haciendo clic en VerticalThumb (o en HorizontalThumb) en la barra de ruta de navegación, situada en la parte superior de la mesa de trabajo.

   7. Establezca las propiedades Width y Height del nuevo objeto Thumb para especificar valores de forma que la columna (o fila) central cambie de tamaño automáticamente para ajustarse al objeto Thumb.

9. Si desea que el usuario pueda hacer clic en un botón en uno de los extremos de la barra para mover el objeto Thumb en incrementos pequeños, realice los pasos siguientes:

   1. Agrupe los objetos que desee usar para el botón de disminución en un panel de diseño.

   2. Mueva el panel de diseño a la primera columna (o fila) del objeto HorizontalTemplate (o a la primera fila del objeto VerticalTemplate).

   3. Haga clic con el botón secundario en el panel de diseño, seleccione Convertir en elemento de Slider y, a continuación, haga clic en HorizontalTrackLargeChangeDecreaseRepeatButton (o en VerticalTrackLargeChangeDecreaseRepeatButton).

   4. En el cuadro de diálogo Convertir en elemento, seleccione la ubicación donde se almacenará la plantilla.

   5. Mientras esté en el modo de edición de plantilla para el nuevo objeto RepeatButton, puede continuar haciendo modificaciones, como eliminar el objeto ContentPresenter. Si desea incluir un margen en el objeto RepeatButton, establezca las propiedades Margin en el objeto raíz.

   6. Vuelva al modo de edición de plantilla para el objeto Slider haciendo clic en Ámbito superior  en el panel Objetos y escala de tiempo, o haciendo clic en HorizontalTrackLargeChangeDecreaseRepeatButton (o en VerticalTrackLargeChangeDecreaseRepeatButton) en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo.

   7. Ajuste las propiedades de la categoría Diseño en el panel Propiedades para que el objeto RepeatButton aparezca en el lugar que desee. También es posible que desee reorganizar los objetos si están ocultos detrás de otros objetos.

      Para obtener más información, vea Cambiar el orden de distribución en capas de los objetos.

   8. Repita estos pasos para el objeto HorizontalTrackLargeChangeIncreaseRepeatButton (o VerticalTrackLargeChangeIncreaseRepeatButton), moviéndolo a la última columna del objeto HorizontalTemplate (o a la última fila del objeto VerticalTemplate).

10. Puede continuar modificando la plantilla en este modo. Por ejemplo, agregar o modificar objetos, o bien seleccionar un estado en el panel Estados para modificar la apariencia de la plantilla en dicho estado.

11. Considere la posibilidad de enlazar algunas de las propiedades de pincel de los objetos de la plantilla a las siguientes propiedades del objeto Slider que finalmente usará la plantilla:

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    Para obtener más información, vea Trasladar propiedades de objetos a la plantilla.

12. Para salir del modo de edición de plantilla, haga clic en [Slider] en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo, o haga clic en Ámbito superior en el panel Objetos y escala de tiempo.

    Para obtener información sobre cómo aplicar una plantilla Slider nueva a otros objetos Slider, vea Aplicar o quitar un recurso.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control Slider de Microsoft Silverlight en la galería de controles de Silverlight (puede estar en inglés) 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

SimpleSlider

Aplicar estilos a un control que admite plantillas