Convertir un objeto en un botón

Para crear un botón desde un objeto
Para modificar el estilo del botón
Para aplicar un estilo a un botón
Para quitar o cambiar el estilo de un botón

Puede usar la característica Crear botón en Microsoft® Expression Blend™ para crear un botón a partir de un objeto del área de diseño, como una imagen o una forma. La herramienta Crear botón ajusta el objeto en un recurso de estilo que podrá aplicar a cualquier otro objeto Button.

Un objeto en Expression Blend es cualquier cosa que coloque en el área de diseño, como un panel de diseño, una forma, un control de texto, una imagen, un botón, una plantilla de control o cualquier otro elemento de diseño de la interfaz de usuario (UI). Al colocar un elemento de la UI en el área de diseño, se crea una instancia de objeto del elemento en la aplicación.

Para crear un botón a partir de una elipse

Si aún no lo ha hecho, abra o cree un proyecto nuevo. Para obtener más información, vea Crear un nuevo documento o proyecto.
En el área de diseño, dibuje un círculo con la herramienta Elipse en el Cuadro de herramientas. Para que la elipse sea más visible, puede cambiar su apariencia cambiando sus propiedades en Pinceles, en el panel Propiedades. Para obtener más información, vea Pinceles.
Con la elipse seleccionada en Objetos y escala de tiempo en el panel Interacción, haga clic en Crear botón, en el menú Herramientas, para convertir la elipse en un botón.
Se abrirá el cuadro de diálogo Crear recurso Style.
En Nombre de recurso (clave), seleccione el primer botón de opción (valor predeterminado) y, a continuación, escriba el nombre que se usará para identificar el estilo del botón. Si lo prefiere, puede seleccionar la opción Aplicar a todos para aplicar el estilo a todos los botones del área de diseño que aún no hagan referencia a ningún estilo por su nombre.
En Definir en, haga clic en la opción que refleja dónde desea definir el estilo del botón. Haga clic en Aplicación para que el estilo del botón esté disponible para cualquier documento de la aplicación. Haga clic en Este documento (Window: Window) para que el estilo del botón esté disponible únicamente para el documento actual. Haga clic en Diccionario de recursos para definir el estilo del botón en un diccionario de recursos en la aplicación.
Haga clic en Aceptar para salir del cuadro de diálogo Crear recurso Style y crear el estilo de botón.
Observe que en Objetos y escala de tiempo, la elipse se convierte en un botón cuyo estilo se establece en el nuevo estilo de botón.
Además, el estilo de botón aparece en la ficha Recursos del nodo en que se definió (por ejemplo, en el nodo Window).

Nuevo estilo de botón tal como aparece en la ficha Recursos de Expression Blend

Volver al principio

Para modificar el estilo del botón

Para modificar el estilo de botón que acaba de crear, haga clic con el botón secundario del mouse en el nuevo objeto de botón en Objetos y escala de tiempo, seleccione Editar partes del control (Plantilla) y haga clic en Editar plantilla.
El área de diseño cambia al ámbito de edición de la plantilla de control.

Hay varias formas de entrar en el ámbito de edición de una plantilla de control:

Haga clic con el botón secundario en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
Seleccione el objeto en Objetos y escala de tiempo y, en el menú Objeto, elija Editar partes del control (Plantilla) y haga clic en Editar plantilla. (También puede entrar en el ámbito de edición del estilo desde el menú Objeto.)
En la ficha Recursos, haga clic en el botón Editar recurso junto al nombre del recurso. Esto le lleva al ámbito de edición del estilo, desde donde puede ir al ámbito de edición de la plantilla de control mediante uno de los dos métodos anteriores.

Para salir del ámbito de edición de una plantilla de control, haga clic en el botón Ámbito superior

en Objetos y escala de tiempo. Si ha especificado el ámbito de edición de la plantilla de control desde el ámbito de edición del estilo, volverá al estilo. Vuelva a hacer clic en el botón Ámbito superior para volver al modo de edición del documento.

La herramienta Crear botón ajusta el objeto original (la elipse) en un recurso de estilo que contiene una plantilla de control. En el estilo se definen las propiedades que están establecidas en el objeto al que se aplica el estilo (en este caso, un botón). En la plantilla de control se definen el estado, la estructura y la apariencia del objeto.
Dentro de la plantilla de control se encuentra el panel Grid, que contiene el objeto original (la elipse) y un elemento ContentPresenter que muestra el contenido del botón. La colocación de un objeto dentro de un panel Grid permite agregar y organizar rápidamente otros elementos.

Estructura de la plantilla de control para el nuevo estilo de botón

Puede ver cómo el estilo y la plantilla de control están relacionados mirando el lenguaje de marcado de aplicaciones extensible (XAML) para el recurso. Por ejemplo, la estructura del estilo del botón puede ser similar a la siguiente:

  <Window.Resources>
    <Style x:Key="ButtonStyle1" ...>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>

En Desencadenadores, en el panel Interacción, defina los estados del botón de la forma que desee. Por ejemplo, haga clic en IsMouseOver = True para activar la grabación de desencadenadores del estado cuando el usuario pase el mouse sobre el botón. Seleccione la elipse en Objetos y escala de tiempo y, en Apariencia, en el panel Propiedades, cambie la propiedad Fill de la elipse a otro color. Observe que se agrega un nuevo cambio de propiedad para ellipse.Fill en Desencadenadores, en Propiedades cuando está activo, tal como se muestra en la siguiente imagen:

Es posible que tenga que ajustar el tamaño del panel Desencadenadores para ver la sección Propiedades cuando está activo. Para ajustar el tamaño, haga clic y arrastre los bordes del panel y el borde interior dentro del panel.

Panel Desencadenadores después de cambiar el relleno de la elipse cuando el mouse está sobre el botón

Panel Desencadenadores después de cambiar el relleno de la elipse cuando el puntero está sobre el botón

También puede agregar animación al botón. Por ejemplo, en el panel Desencadenadores, haga clic en IsPressed = True para activar la grabación de desencadenadores del estado cuando el usuario hace clic en el botón. Con la elipse aún seleccionada en Objetos y escala de tiempo, mantenga presionadas las teclas Mayús y Alt mientras arrastra uno de los vértices de la elipse. (La combinación de teclas Mayús+Alt mantiene el punto central del objeto.)
Si lo prefiere, puede agregar una animación más compleja creando una escala de tiempo nueva y desencadenándola desde un Desencadenador de eventos para el evento IsPressed. Para obtener más información, vea Animación e interactividad en este manual del usuario.
Una vez definido el estado del botón como desee, haga clic en el botón Ámbito superior en Objetos y escala de tiempo para volver al ámbito de edición del documento.
Para comprobar el estado, haga clic en Probar Proyecto en el menú Proyecto (o presione F5) y, a continuación, compruebe si el estado del botón funciona correctamente. Por ejemplo, al mover el puntero sobre el botón, el color de relleno debería cambiar.

Volver al principio

Para aplicar un estilo a un botón

Asegúrese de que está en el ámbito de edición que desea. Puede aplicar un estilo a un botón en cualquier ámbito, incluido el ámbito de una plantilla de control.
En el área de diseño, dibuje un botón con la herramienta Button en el Cuadro de herramientas.
Haga clic con el botón secundario en el nuevo objeto de botón en Objetos y escala de tiempo, elija Editar partes del control (Plantilla), elija Aplicar recurso y, a continuación, seleccione el estilo del botón en la lista.
También puede usar los comandos Editar estilo y Editar partes del control (Plantilla) del menú Objeto para aplicar un recurso de estilo.

Aplicar el estilo de botón a un objeto de botón haciendo clic con el botón secundario del mouse

Volver al principio

Para quitar o cambiar el estilo de un botón

Puesto que un estilo de botón es un recurso, puede tratarlo como cualquier otro recurso. Para obtener información acerca del modo de quitar o modificar recursos de estilo, vea los temas de procedimientos en Administración de activos y recursos en este manual del usuario.