Convertir un objeto en 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 de la mesa de trabajo, 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 de botón.

Sugerencia:
Un objeto en Expression Blend es cualquier cosa que coloque en la mesa de trabajo, 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 la mesa de trabajo, se crea una instancia de objeto del elemento en la aplicación.

Para crear un botón a partir de una elipse

1. 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.

2. En la mesa de trabajo, dibuje un círculo con la herramienta Elipse  del Cuadro de herramientas. Para que la elipse sea más visible, puede modificar su apariencia si cambia sus propiedades en Pinceles, en el panel Propiedades. Para obtener más información, vea Aplicar un pincel al trazo o relleno de un objeto.

3. 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.

4. 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 todo para aplicar el estilo a todos los botones de la mesa de trabajo que aún no hagan referencia a ningún estilo por su nombre.

5. 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.

6. 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

1. Para modificar el estilo de botón que acaba de crear, haga clic con el botón secundario 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.

   La mesa de trabajo cambia al ámbito de edición de la plantilla de control.

   Sugerencia:

   Hay varias formas de entrar en el ámbito de edición de una plantilla de control. Por ejemplo, puede ver el estilo de botón en la ficha Recursos y, a continuación, hacer clic en el botón Editar recurso junto al nombre del recurso. De esta forma, pasará al ámbito de edición del estilo, que le llevará al ámbito de edición de la plantilla de control; para ello, haga clic con el botón secundario en el objeto de estilo en Objetos y escala de tiempo, seleccione Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla. 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.

   Sugerencia:
   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.

2. 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>
   

3. 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, a continuación, 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:

   [!NOTA]

   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 puntero está sobre el botón

   

4. 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 un guión gráfico nuevo y desencadenando dicho guión gráfico desde un Desencadenador de eventos para el evento IsPressed. Para obtener más información, vea Desencadenadores e interactividad del usuario.

5. 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.

6. Para comprobar el estado, haga clic en Probar Solución 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

1. 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.

2. En la mesa de trabajo, dibuje un botón con el control Button  del Cuadro de herramientas.

3. 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

   

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 de cómo quitar o modificar recursos de estilo, vea los temas de procedimientos de Recursos.

Volver al principio

Vea también

Conceptos

Crear un control a partir de objetos existentes