Compartir a través de

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

  • Artículo

JJ170239.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(es-es,VS.120).png

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

JJ170239.c01e5314-5b29-4283-a483-b0a1cb3b59f6(es-es,VS.120).png

Estados del control de botón

Puede ver los posibles estados del control Button en el panel Estados al modificar una plantilla Button. De forma predeterminada, el control Button puede estar en uno de los cuatro estados siguientes del grupo de estados CommonStates:

Nombre del estado

Descripción

Normal

Apariencia del control Button cuando no hay interacción con el control.

MouseOver

Apariencia del control Button cuando el usuario mueve el puntero sobre él.

Pressed

Apariencia del control Button cuando el usuario hace clic en él, o cuando el control recibe el foco y el usuario presiona ENTRAR o la barra espaciadora.

Disabled

Apariencia del control Button cuando la propiedad IsEnabled está establecida en False.

El control Button puede estar en uno de los dos estados siguientes del grupo de estados FocusStates:

Nombre del estado

Descripción

Unfocused

Apariencia del control Button cuando no tiene el foco del teclado.

Focused

Apariencia del control Button 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 Button.

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 Indicador de modo de grabación JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(es-es,VS.120).png en la mesa de trabajo, o bien seleccione Base en el panel Estados.

Para obtener más información, vea Definir distintos estados visuales para un control en Blend.

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 texto en un control de botón

Las imágenes siguientes representan un diseño integral de un botón que incluye los estados Normal, MouseOver, Pressed, Disabled, y Focused:

Normal

Botón en estado Normal

MouseOver

Botón en estado MouseOver

Pressed

Botón en estado Presionado

Disabled

Botón en estado Deshabilitado

Focused

Botón en estado Enfocado

Nota

Es importante destacar que los gráficos anteriores aún no son controles Button, sino ilustraciones que se pueden convertir en controles Button.

El siguiente procedimiento usa el código XAML del paso 2 del procedimiento siguiente, que corresponde al estado Normal en los gráficos anteriores.

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. Abra un nuevo proyecto de Microsoft Silverlight. 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 MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</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 Cuadrícula y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en Botón y, a continuación, haga clic en Aceptar.

    En la vista Código, observe que el código que pegó en el paso anterior se ha reemplazado por el código para un nuevo control Button. Además, Blend para Visual Studio convirtió el control Button en una plantilla para un nuevo estilo Button y aplicó dicha plantilla a Button.

    El objeto TextBlock de la composición tiene un primer plano de color gris claro. El nuevo estilo Button también tiene un primer plano de color gris claro. OK es el contenido textual del botón anterior y del control Button, y el objeto TextBlock del código anterior se ha reemplazado por un elemento ContentPresenter con las mismas propiedades del objeto TextBlock original.

  5. Para agregar estados al control Button, siga estos pasos:

    1. En el panel Objetos y escala de tiempo, haga clic en Rectángulo.

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

    3. En el panel Propiedades, establezca Relleno y Trazo en #FF808080.

    4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

  6. Para aplicar las mismas propiedades al estado Pressed, en el panel Estados, haga clic con el botón secundario en MouseOver, haga clic en Copiar estado a y, a continuación, haga clic en Pressed.

  7. Para desplazar el texto del botón al presionarlo, siga estos pasos:

    1. En el panel Estados, haga clic en Pressed.

    2. En el panel Objetos y escala de tiempo, haga clic en Content Presenter.

    3. En el panel Propiedades, en la ficha Trasladar de la categoría Transformar, establezca X e Y en 1.

    4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

  8. En el panel Estados, haga clic en Normal, haga clic en Agregar transición y, a continuación, en Normal a MouseOver. En el cuadro Duración de la transición, escriba 0,2 y, a continuación, haga clic en Base.

  9. La composición incluye un rectángulo azul alrededor del botón cuando se encuentra en el estado Focused. Para crear el rectángulo, agregue un nuevo objeto Rectangle con el estado Focused seleccionado. Esta acción se denomina "dibujar en estado", es decir, el nuevo objeto es visible solo en el estado en el que se dibujó. Para crear el rectángulo en el estado Focused, en el panel Estados, haga clic en Focused y, a continuación, haga doble clic en la herramienta Rectángulo del panel Herramientas para crear el nuevo objeto Rectangle.

  10. El siguiente paso es establecer las propiedades del nuevo rectángulo. Las propiedades tienen que cambiarse en Base, no en el estado Focused. Sin embargo, el rectángulo es actualmente transparente y no será visible en Base. Haga clic en el Indicador de modo de grabación JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(es-es,VS.120).png para hacer visible el rectángulo. Tenga en cuenta que el nuevo rectángulo (rectangle1) sigue seleccionado en el panel Objetos y escala de tiempo. En el panel Propiedades, establezca las siguientes propiedades para rectangle1:

    • Fill   Establézcala en Sin pincel.

    • Stroke color   Establézcala en # FF00C0FF.

    • RadiusX   Establézcala en 2.

    • RadiusY   Establézcala en 2.

    • Margin   Establezca Izquierdo en 1, Derecho en 1, Superior en 1 e Inferior en 1.

  11. Opcionalmente, si desea agregar más interactividad al rectángulo mientras el botón está en el estado Focused, lleve a cabo el siguiente procedimiento para crear una animación de estado fijo. En caso contrario, continúe en el paso 12.

    1. En el panel Estados, seleccione el estado Focused.

    2. En el panel Objetos y escala de tiempo, haga clic en el botón Mostrar escala de tiempo.

    3. Arrastre el fotograma clave a la marca de 2 segundos y, a continuación, mueva el cabezal de reproducción de la escala de tiempo a 2,2 segundos.

    4. En el panel Estados, seleccione rectangle1.

    5. En la pestaña Apariencia del panel Propiedades, establezca Opacidad en 0.

    6. En el panel Objetos y escala de tiempo, mueva el cabezal de reproducción de la escala de tiempo a 0 segundos y, a continuación, seleccione rectangle1. En el panel Propiedades, en la pestaña Escalar, establezca X e Y en 5.

    7. En el panel Objetos y escala de tiempo, haga clic en el fotograma clave en 2. En el panel Propiedades, en la categoría Entrada y salida lenta, establezca EasingFunction en Quartic Out.

    8. En el panel Objetos y escala de tiempo, debajo de la pestaña, haga clic en el nombre del estado (en este caso, Focused). En el panel Propiedades, en la pestaña Propiedades comunes, establezca RepeatBehavior en Forever.

  12. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

Para convertir objetos en un control de botón

Las imágenes siguientes son una composición de un botón creado por un diseñador que incluye los estados Normal, MouseOver, Pressed, Disabled y Focused:

Normal

Gráfico de botón Normal

MouseOver

Gráfico de botón MouseOver

Pressed

Gráfico de botón presionado

Disabled

Gráfico de botón deshabilitado

Focused

Gráfico de botón enfocado

Nota

Es importante destacar que los gráficos anteriores aún no son controles Button, sino ilustraciones que se pueden convertir en controles Button.

El siguiente procedimiento usa el código XAML del paso 2 del procedimiento siguiente, que corresponde al estado Normal en los gráficos anteriores.

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. Abra un nuevo proyecto de Microsoft Silverlight. 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 MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</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 Cuadrícula y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en Botón y, a continuación, haga clic en Aceptar.

    En la vista Código, observe que el código que pegó en el paso anterior se ha reemplazado por el código para un nuevo control Button. Además, Blend convirtió el control Button en una plantilla para un nuevo estilo Button y aplicó dicha plantilla a Button.

  5. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en Contenido y, a continuación, haga clic en Cortar.

  6. Devuelva el ámbito a UserControl, haga clic con el botón secundario en UserControl y, a continuación, haga clic en Pegar.

  7. Para agregar estados al control Button, siga estos pasos:

    1. En el panel Objetos y escala de tiempo, haga clic en Rectángulo.

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

    3. En el panel Propiedades, establezca Relleno y Trazo en #FF808080.

    4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

  8. Para aplicar las mismas propiedades al estado Pressed, en el panel Estados, haga clic con el botón secundario en MouseOver, haga clic en Copiar estado a y, a continuación, haga clic en Pressed.

  9. Para desplazar el texto del botón al presionarlo, siga estos pasos:

    1. En el panel Estados, haga clic en Pressed.

    2. En el panel Objetos y escala de tiempo, haga clic en Content Presenter.

    3. En el panel Propiedades, en la pestaña Trasladar de la categoría Transformación, establezca X e Y en 1.

    4. Vuelva al panel Estados y, a continuación, haga clic en Base para finalizar la grabación de estado.

  10. En el panel Estados, haga clic en Normal, haga clic en Agregar transición y, a continuación, en Normal a MouseOver.

  11. En el cuadro Duración de la transición, escriba 0,2 y, a continuación, haga clic en Base.

    La composición incluye un rectángulo azul alrededor del botón cuando este se encuentra en el estado Focused. Para crear el rectángulo, agregue un nuevo objeto Rectangle con el estado Focused seleccionado. Esta acción se denomina "dibujar en estado", es decir, el nuevo objeto es visible solo en el estado en el que se dibujó. Para crear el rectángulo en el estado Focused, en el panel Estados, haga clic en Focused y, a continuación, haga doble clic en la herramienta Rectángulo del panel Herramientas para crear el nuevo objeto Rectangle.

  12. El siguiente paso es establecer las propiedades del nuevo rectángulo. Las propiedades tienen que cambiarse en Base, no en el estado Focused. Sin embargo, el rectángulo es actualmente transparente y no será visible en Base. Haga clic en el Indicador de modo de grabación JJ170239.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(es-es,VS.120).png para hacer visible el rectángulo. Tenga en cuenta que el nuevo rectángulo (rectangle1) sigue seleccionado en el panel Objetos y escala de tiempo. En el panel Propiedades, establezca las siguientes propiedades para rectangle1:

    • Fill   Establézcala en Sin pincel.

    • Stroke color   Establézcala en # FF00C0FF.

    • Margin   Establezca Izquierdo en 1, Derecho en 1, Superior en 1 e Inferior en 1.

  13. Opcionalmente, si desea agregar más interactividad al rectángulo mientras el botón está en el estado Focused, lleve a cabo el siguiente procedimiento para crear una animación de estado fijo. En caso contrario, continúe en el paso 14.

    1. En el panel Estados, seleccione el estado Focused.

    2. En el panel Objetos y escala de tiempo, haga clic en el botón Mostrar escala de tiempo.

    3. Arrastre el fotograma clave a la marca de 2 segundos y, a continuación, mueva el cabezal de reproducción de la escala de tiempo a 2,2 segundos.

    4. En el panel Estados, seleccione rectangle1 y, a continuación, en la pestaña Apariencia del panel Propiedades, establezca Opacidad en 0.

    5. En el panel Objetos y escala de tiempo, mueva el cabezal de reproducción de la escala de tiempo a 0 segundos y, a continuación, seleccione rectangle1. En el panel Propiedades, en la pestaña Escalar, establezca X e Y en 5.

    6. En el panel Objetos y escala de tiempo, haga clic en el fotograma clave en 2. En el panel Propiedades, en la categoría Entrada y salida lenta, establezca EasingFunction en Quartic Out.

    7. En el panel Objetos y escala de tiempo, debajo de la pestaña, haga clic en el nombre del estado (en este caso, Focused).

    8. En el panel Propiedades, en la pestaña Propiedades comunes, establezca RepeatBehavior en Forever.

  14. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

Para obtener información acerca de cómo aplicar la nueva plantilla Button a otros objetos Button, vea Aplicar o quitar un recurso en Blend.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control Button de Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.

Vea también

Tareas

Inténtelo: Crear un botón de sustitución (soporte WPF en Blend)

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes en Blend

SimpleButton

Diseñar un control que admita plantillas en Blend