Inténtelo: personalizar la apariencia del botón de expansión de un control SimpleComboBox
.png "Esta página es específica de proyectos WPF")
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
Dibuje un control SimpleComboBox en la mesa de trabajo de Expression Blend.
.gif "Sugerencia")
Sugerencia:Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca
.png "Cc294708.0224cabd-5da1-4e01-bddd-4a647401a098(es-es,Expression.10).png")
. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.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.
Agregue uno o dos elementos adicionales al cuadro combinado repitiendo el paso anterior.
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 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 el botón Ámbito superior
.png "Cc294708.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(es-es,Expression.10).png")
, que está encima del árbol de elementos del panel Interacción.Para volver al modo de edición de plantillas para una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desee editar, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
En el ámbito de edición de la plantilla de control, expanda todos los nodos de Objetos y escala de tiempo.
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.
Seleccione el elemento Arrow en Objetos y escala de tiempo para identificarlo en la mesa de trabajo. 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
.png "Cc294708.6dd6571f-c116-451d-8dd2-1f88b8406362(es-es,Expression.10).png")
para ajustar los puntos del trazado. O bien, puede eliminar el elemento Arrow y después crear un elemento nuevo con la herramienta Pluma.png "Cc294708.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(es-es,Expression.10).png")
del Cuadro de herramientas.Sugerencia:Para acercar la mesa de trabajo, puede usar el cuadro de texto Zoom
.png "Cc294708.12524287-c48b-4cfc-b614-01951207239d(es-es,Expression.10).png")
, 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 a dibujar un elemento de trazado con la herramienta Pluma, puede usar un recurso de imagen importado desde Microsoft Expression Design 2 o un archivo de imagen que haya agregado al proyecto.
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 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 Ángulo.
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.
Pruebe la aplicación (F5) para ver los efectos.