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 el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  2. Agregue un elemento al cuadro combinado; para ello, haga clic con el botón secundario en el cuadro combinado en 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 Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar plantilla para crear una plantilla nueva y guardarla en el documento. Para obtener más información sobre cómo crear una copia, vea Crear un recurso.
    Sugerencia Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en el botón Ámbito superior Botón Ámbito superior, que está situado encima del árbol de elementos del panel Interacción.

    Para volver al modo de edición de plantilla de una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desea editar, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
  5. En el ámbito de edición de la plantilla de control, expanda todos los nodos situados en Objetos y escala de tiempo.
  6. Haga clic con el botón secundario en el elemento ToggleButton, en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, siga uno de estos procedimientos:
    • Si seleccionó Editar plantilla en el paso 4, haga clic en Editar plantilla ahora para editar la plantilla del control ExpanderToggeButton 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 ExpanderToggeButton 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 ExpanderToggeButton. Observe que la cuadrícula 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 elemento Arrow en Objetos y escala de tiempo para identificarlo en el área de diseño. El elemento Arrow es un trazado que representa el botón de expansión para el control ComboBox.
    Puede modificar el elemento Arrow mediante la herramienta Selección directa Herramienta Selección directa para ajustar los puntos del trazado. O bien, puede eliminar el elemento Arrow y después crear un elemento nuevo con la herramienta Pluma Herramienta Pluma del Cuadro de herramientas.
    Sugerencia Para acercar el área de diseño, puede usar el cuadro de texto Zoom Cuadro de texto Zoom, situado en la parte inferior del área de diseño, o el botón de desplazamiento del mouse mientras mantiene la tecla Ctrl presionada.
    Sugerencia Como alternativa a dibujar un elemento de trazado con la herramienta Pluma, puede usar un recurso de imagen importado desde Microsoft® Expression® Design o un archivo de imagen que haya agregado al proyecto.
  8. El efecto de activació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 elementos Rectangle en la plantilla del control ToggleButton. Puede agregar un nuevo cambio de propiedad a los desencadenadores existentes que haga girar el elemento Arrow al hacer clic en el botón de expansión. Con el elemento Arrow seleccionado en Objetos y escala de tiempo, haga clic en IsChecked = True en Desencadenadores, en el panel Interacción; a continuación, haga clic en la ficha Girar en Transformación, dentro del panel Propiedades, y escriba 180 en el cuadro de texto Angle.
    Cuando un usuario haga clic en el botón de expansión para ampliar el cuadro combinado, el elemento 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 Desencadenadores, dentro del panel Interacción, 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 Desencadenadores.
  9. Pruebe la aplicación (F5) para ver los efectos.