SimpleSlider
El control deslizante es un control simple que permite a un usuario seleccionar entre un rango de valores moviendo un control Thumb. De forma predeterminada, el control deslizante se muestra en horizontal, pero puede cambiarlo a vertical con la propiedad Orientation de Propiedades comunes en el panel Propiedades de Microsoft® Expression Blend™. Para establecer el valor de un control deslizante, use las propiedades Minimum, Maximum y Value.
Vista del área de diseño de un control SimpleSlider
Desglosar la plantilla de control
La plantilla del control SimpleSlider está formada por los siguientes elementos:
- Un panel Grid denominado GridRoot, que se usa para que el control deslizante contenga los diversos elementos secundarios. El panel Grid también se usa porque facilita al diseñador de la interfaz de usuario (UI) de la aplicación la adición de otros elementos a la plantilla. GridRoot se divide en tres filas: la fila superior contiene el elemento TopTick, la fila central contiene el elemento Thumb y la fila inferior contiene el elemento BottomTick.
- Dos elementos TickBar denominados TopTick y BottomTick, que se usan para mostrar marcas de graduación en el control deslizante. De manera predeterminada, su propiedad Visibility está establecida en Collapsed. Los elementos TickBar determinan el número de marcas de graduación que se mostrará en función de las propiedades establecidas en el control deslizante al que se aplica esta plantilla. Los elementos TickBar no proporcionan ninguna plantilla modificable, pero puede establecer el pincel que usan para mostrar la marca de graduación mediante la propiedad Foreground en el control deslizante (TickBar está enlazado mediante plantilla a la propiedad Foreground del control deslizante).
- Un elemento Border, que se utiliza porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla a la propiedad BorderThickness del control de botón al que se aplica la plantilla.
- Un elemento Track denominado PART_Track, que se usa para mostrar un elemento Thumb a lo largo de una barra. El usuario puede arrastrar el elemento Thumb. De forma predeterminada, el elemento Thumb usa la plantilla SimpleThumbStyle, que se puede modificar.
- Dos elementos RepeatButton, que están incluidos en el elemento PART_Track y permiten al usuario hacer clic en cualquier lado del control para hacer cambios mayores en el valor del control deslizante. Puede especificar el valor para estos cambios en la propiedad LargeChange del control deslizante (no en la plantilla). El valor que se especifica mediante la propiedad SmallChange se usa cuando el usuario mueve el control con las teclas de dirección.
- Una transformación de diseño, que se usa para mostrar el control deslizante con una orientación horizontal. Este diseño facilita la edición, para que no necesite acordarse de modificar dos plantillas distintas. No obstante, existen casos en los que las dos orientaciones deben ser suficientemente distintas y requieren plantillas independientes. En este caso, puede usar un archivo de recursos XAML en el elemento <Style> de la vista XAML de Expression Blend para cambiar las plantillas en función de la orientación. Puede ver un ejemplo de ello en la plantilla predeterminada del control del sistema Slider.
 |
No cambie el nombre de ningún elemento cuyo nombre empiece por "PART_", porque el código que implementa el control hace referencia a estos elementos. |
Vista de objetos: partes básicas (plantilla) de un control SimpleSlider
Desencadenadores de propiedad usados
Los desencadenadores de propiedad de la plantilla de control sirven para hacer que el control reaccione ante los cambios de propiedad. Puede hacer clic en los elementos en Desencadenadores, en el panel Interacción, para ver las propiedades que cambian cuando está activo un desencadenador. Por ejemplo, en la plantilla SimpleSlider, los desencadenadores se usan para hacer que los elementos TickBar aparezcan en función de la propiedad TickPlacement. Esto establece la visibilidad de los elementos TopTick y BottomTick. La orientación vertical y horizontal también se configuran en los desencadenadores de la plantilla SimpleSlider. Esto aplica una transformación de diseño al control deslizante, que gira 90 grados. Puesto que Track se orienta automáticamente, se fuerza hacia atrás para que no se gire dos veces.
Pinceles usados
La plantilla SimpleSlider usa los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:
- La propiedad Background se establece mediante LightBrush cuando no hay ningún desencadenador activo y mediante DisabledBackgroundBrush cuando IsEnabled es False.
- La propiedad BorderBrush se establece mediante NormalBorderBrush cuando no hay ningún desencadenador activo y mediante DisabledBorderBrush cuando IsEnabled es False.
- La propiedad Foreground del elemento TopTick se establece mediante GlyphBrush.
- La propiedad Fill de la plantilla SimpleThumb se establece mediante NormalBrush y la propiedad Stroke mediante NormalBorderBrush.
Prácticas recomendadas e instrucciones de diseño
- En general, debe usar un control Grid como raíz de la plantilla si espera que el diseñador agregue más elementos visuales al control. Expression Blend busca un panel de diseño como el control Grid y lo activa de forma predeterminada para que los elementos nuevos del área de diseño se agreguen como elementos secundarios del panel de diseño.
- Si lo desea, puede agregar desencadenadores a la plantilla SimpleSlider o modificar el elemento PART_Track para hacer que la apariencia del control deslizante sea más interesante, pero no puede cambiar el nombre de ningún elemento cuyo nombre empiece por "PART_", ya que el código que implementa el control hace referencia a estos elementos. Es necesario colocar Thumb y los botones de repetición en los elementos correctos dentro de Track. El control track sabe cómo colocar el elemento Thumb en función del valor de Slider. Los botones de repetición usan enlaces de comandos para hacer que el valor del control deslizante aumente o disminuya.
- Al modificar la plantilla de SimpleSlider, puede hacer que los elementos TickBar aparezcan mediante el uso del área Desencadenadores del panel Interacción y la selección del desencadenador adecuado. Por ejemplo, en la plantilla SimpleSlider, cuando TickPlacement está establecido en Both, los dos elementos TickBar se muestran estableciendo su propiedad Visibility en Visible.