Inténtelo: personalizar la apariencia del botón de expansión de un control SimpleComboBox

Personalizar la apariencia del botón de expansión de un cuadro combinado en Microsoft Expression Blend es fácil cuando se usa la plantilla de control ToggleButton del control SimpleComboBox .

Para personalizar el botón de expansión de un control SimpleComboBox

1. Dibuje un control SimpleComboBox en la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en Simple Styles, en la categoría Estilos del panel Activos. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Agregue un elemento al cuadro combinado; para ello, haga clic con el botón secundario en el cuadro combinado en el panel Objetos y escala de tiempo y, a continuación, haga clic en Agregar SimpleComboBoxItem.

3. Agregue uno o dos elementos adicionales al cuadro combinado repitiendo el paso anterior.

4. Haga clic con el botón secundario en ComboBox en el panel Objetos y escala de tiempo, elija Editar plantilla y, a continuación, haga clic en Editar actual. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar actual para crear una plantilla nueva y guardarla en el documento. Para obtener más información acerca de cómo crear una copia, vea Crear un recurso.

   Sugerencia:

   Para salir del modo de edición de plantillas y volver al ámbito del documento, haga clic en Devolver ámbito a , que está encima del árbol de objetos en el panel Objetos y escala de tiempo. Para volver al modo de edición de plantillas para una plantilla existente, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en el objeto cuya plantilla desee editar, elija Editar plantilla y, a continuación, haga clic en Editar actual.

5. En el ámbito de edición de la plantilla de control, expanda todos los nodos del panel Objetos y escala de tiempo.

6. Haga clic con el botón secundario en el objeto ToggleButton del panel Objetos y escala de tiempo, elija Editar plantilla y realice una de las acciones siguientes:

   • Si seleccionó Editar actual en el paso 4, haga clic ahora en Editar actual para editar la plantilla del control ExpanderToggleButton que está almacenada en SimpleStyles.xaml.

   • Si seleccionó Editar una copia en el paso 4, haga clic en Editar una copia ahora para crear una copia de la plantilla del control ExpanderToggleButton y guárdela en el mismo lugar que la plantilla de ComboBox .

   El aspecto del botón de expansión se diseña en la plantilla del control ExpanderToggleButton . Observe que la cuadrícula Grid de la plantilla abarca todo el ancho del cuadro combinado. Este diseño permite que la lista desplegable aparezca sin tener en cuenta el lugar en que el usuario haga clic dentro del cuadro combinado.

7. Seleccione el objeto Arrow en el panel Objetos y escala de tiempo para identificarlo en la mesa de trabajo. El objeto Arrow es un elemento Path que representa el botón de expansión para el control ComboBox .

   Puede modificar el objeto Arrow mediante la herramienta Selección directa para ajustar los puntos del trazado. O bien, puede eliminar el objeto Arrow y después crear un objeto nuevo con la herramienta Pluma en el panel Herramientas.

   Sugerencia:
   Para acercar la mesa de trabajo, puede usar el cuadro de texto Zoom situado en la parte inferior de la mesa de trabajo o el botón de desplazamiento del mouse mientras mantiene presionada la tecla CTRL.

   Sugerencia:
   Como alternativa al dibujo de un objeto de trazado con la herramienta Pluma, puede usar un recurso de material gráfico importado desde Microsoft Expression Design o un archivo de imagen que haya agregado al proyecto.

8. El efecto de sustitución que se observa al hacer clic en el botón de expansión está definido por desencadenadores de propiedad que modifican la apariencia de los objetos Rectangle en la plantilla del control ToggleButton . Puede agregar un nuevo cambio de propiedad a los desencadenadores existentes que haga girar el objeto Arrow al hacer clic en el botón de expansión. Con el objeto Arrow seleccionado en el panel Objetos y escala de tiempo, haga clic en IsChecked = True en el panel Desencadenadores y, a continuación, haga clic en la ficha Girar en Transformación, dentro del panel Propiedades, y escriba 180 en el cuadro de texto Ángulo.

   Cuando un usuario haga clic en el botón de expansión para ampliar el cuadro combinado, el objeto Arrow girará 180 grados y volverá a su giro original cuando se vuelva a hacer clic de nuevo.

   Sugerencia:

   Cuando está seleccionado un desencadenador de propiedad en el panel Desencadenadores, toda modificación realizada en Expression Blend establecerá un valor para que se cambie en esa condición de desencadenador. Asegúrese de que esté seleccionado el desencadenador correcto antes de realizar cambios. Si desea realizar cambios que afecten al estado predeterminado de la plantilla de control, haga clic en Valor predeterminado en el panel Desencadenadores.

9. Pruebe la aplicación (F5) para ver los efectos.

Vea también

Conceptos

SimpleComboBox y SimpleComboBoxItem

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