Compartir a través de


SimpleSlider

This page applies to WPF projects only

El control deslizante es un control simple que, al mover un control Thumb, permite a un usuario seleccionar entre una variedad de valores. De forma predeterminada, el control deslizante se muestra en horizontal, pero puede cambiarlo a vertical con la propiedad Orientation (orientación) de Propiedades comunes en el panel Propiedades de Microsoft Expression Blend. Para establecer el valor de un control deslizante, use las propiedades Minimum (mínimo), Maximum (máximo) y Value (valor).

Vista de la mesa de trabajo de un control SimpleSlider

Cc295377.50295968-6423-4517-9479-ed886201b731(ES-ES,Expression.30).png

Desglosar la plantilla de control

La plantilla del control SimpleSlider está formada por los siguientes elementos:

  • Un panel de cuadrícula denominado GridRoot, que se usa para que el control deslizante contenga varios elementos secundarios. El panel de cuadrícula Grid también se usa porque facilita al diseñador de la interfaz de usuario de la aplicación la adición de otros elementos a la plantilla. El 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 (visibilidad) 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 (primer plano) en el control deslizante (TickBar está enlazado mediante plantilla a la propiedad Foreground [primer plano] del control deslizante).

  • Un elemento Border, que se usa porque incluye una propiedad BorderThickness (grosor del borde) que se puede enlazar mediante una plantilla a la propiedad BorderThickness (grosor del borde) 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 importantes 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 (cambio pequeño) 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 Setter 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.

    Cc295377.alert_caution(ES-ES,Expression.30).gifPrecaución:

    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

    Cc295377.29dedf1c-7f1c-41d0-82a6-8bfccb4eb726(ES-ES,Expression.30).png

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 el panel Desencadenadores para ver las propiedades que cambian cuando se activa 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 (colocación de graduación). 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 (fondo) se establece mediante LightBrush cuando no hay ningún desencadenador activo y mediante DisabledBackgroundBrush cuando IsEnabled es False.

  • La propiedad BorderBrush (pincel del borde) se establece mediante NormalBorderBrush cuando no hay ningún desencadenador activo y mediante DisabledBorderBrush cuando IsEnabled es False.

  • La propiedad Foreground (primer plano) del elemento TopTick se establece mediante GlyphBrush.

  • La propiedad Fill (relleno) de la plantilla SimpleThumb se establece mediante NormalBrush y la propiedad Stroke (trazo) mediante NormalBorderBrush.

Procedimientos recomendados 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 de la mesa de trabajo 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 si usa el panel Desencadenadores para seleccionar el desencadenador adecuado. Por ejemplo, en la plantilla SimpleSlider, cuando TickPlacement está establecido en Both, los dos elementos TickBar se muestran estableciendo su propiedad Visibility (visibilidad) en Visible.

Vea también

Tareas

Inténtelo: personalizar el elemento Thumb de un control SimpleSlider