Crear un control a partir de objetos existentes

Puede usar la característica Convertir en control de Microsoft Expression Blend para crear una plantilla de control a partir de un objeto de la mesa de trabajo. La herramienta Convertir en control ajusta los objetos en un recurso de estilo que puede volver a usar.

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 proyecto nuevo.

2. En la mesa de trabajo, dibuje un círculo con la herramienta Elipse  del panel 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 de color sólido o de degradado al trazo o relleno de un objeto.

3. Haga clic con el botón secundario en la elipse, elija Agrupar en y, a continuación, haga clic en el nombre de un contenedor de diseño, como la cuadrícula (Grid).

4. Una vez seleccionada la cuadrícula en el panel Objetos y escala de tiempo, haga clic en Convertir en control en el menú Herramientas para convertir la cuadrícula en un botón.

   Se abre el cuadro de diálogo Convertir en control.

5. En Tipo de control, haga clic en el tipo de control que desea crear, como el control Button .

6. En Nombre (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.

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

8. Haga clic en Aceptar para salir del cuadro de diálogo Crear recurso Style y crear el estilo de botón.

   Observe que en el panel 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

   

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 el panel Objetos y escala de tiempo, elija Editar plantilla y haga clic en Editar actual.

   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 el panel Objetos y escala de tiempo, elija Editar plantilla y, a continuación, haga clic en Editar actual. Para salir del ámbito de edición de una plantilla de control, haga clic en Devolver ámbito a  en el panel 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 Devolver ámbito a para volver al modo de edición del documento.

   Sugerencia:
   La herramienta Convertir en control 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 hay un panel Grid que contiene el objeto original (la elipse) y un objeto ContentPresenter que muestra el contenido del objeto de botón. La colocación de un objeto dentro de un panel Grid permite agregar y organizar rápidamente otros objetos.

   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 el panel Desencadenadores, 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 el panel 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 el panel 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 haga clic en el botón. Con la elipse aún seleccionada en el panel Objetos y escala de tiempo, mantenga presionadas las teclas MAYÚS y ALT mientras arrastra uno de los vértices de la elipse. (El método abreviado de teclado 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 Escribir código que responda a eventos.

5. Cuando haya definido los estados del botón a su gusto, haga clic en Devolver ámbito a  en el panel Objetos y escala de tiempo para volver al ámbito de edición del documento.

6. Para probar los estados, haga clic en Ejecutar Proyecto en el menú Proyecto (o presione F5) y, a continuación, compruebe si los estados del botón funcionan correctamente. Por ejemplo, al mover el puntero sobre el botón, el color de relleno debería cambiar.

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 la herramienta Button   del panel Herramientas.

3. Haga clic con el botón secundario en el nuevo objeto de botón en el panel Objetos y escala de tiempo, elija Editar plantilla, elija Aplicar recurso y, a continuación, seleccione el estilo de botón en la lista.

   También puede usar los comandos Editar estilo y Editar 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

   

Para quitar o cambiar el estilo de un botón

• Puesto que un estilo de botón es un recurso, trátelo como cualquier otro recurso.

  Para obtener información acerca de cómo quitar o modificar recursos de estilo, vea Restablecer una propiedad a su valor predeterminado y Crear recursos reutilizables.

Vea también

Tareas

Crear un control de usuario a partir de objetos existentes

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes
Aplicar estilos a los elementos de una plantilla de control de Silverlight

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.