Sugerencias para la aplicación de estilos al control ComboBox

El control ComboBox representa un objeto que combina un cuadro de texto no editable con un control Popup. El control Popup contiene un control ListBox que permite a los usuarios seleccionar un elemento de una lista.

Al igual que los demás controles, el control ComboBox (incluidos los controles Popup, ListBox y cada control ComboBoxItem contenido en el objeto ComboBox) se puede modificar para que tenga una apariencia muy diferente a la predeterminada. La apariencia predeterminada del control ComboBox es la siguiente:

Propiedades de interés del control ComboBox

Para establecer el elemento que está seleccionado en el control ComboBox, establezca la propiedad SelectedIndex en Propiedades comunes en el panel Propiedades. Un valor de -1 muestra el objeto ComboBox sin ninguna selección. Un valor de 0 muestra el objeto ComboBox con el primer elemento seleccionado.

Para agregar elementos a un control ComboBox, puede agregar manualmente objetos ComboBoxItem o enlazar una colección de datos al objeto ComboBox para que los elementos aparezcan de forma automática.

Para obtener más información, vea Enlazar un objeto a datos y Crear datos de ejemplo.

Elementos de la plantilla ComboBox

El control ComboBox usa una plantilla para definir la apariencia del cuadro desplegable, la flecha desplegable y la ventana emergente: la plantilla ComboBox. Cada elemento de la plantilla desempeña un papel en la apariencia y el comportamiento del objeto ComboBox al que se aplica la plantilla.

Sugerencia:

Para aplicar estilos a los elementos que contiene un control ComboBox, debe modificar otras plantillas. Por ejemplo, cuando un control ComboBox está enlazado a datos, la plantilla que usa para aplicar estilos a los elementos que contiene es una plantilla de elementos generados (una plantilla de datos). Cuando un control ComboBox no está enlazado a datos, no tiene una plantilla que se aplique a los elementos que contiene. En su lugar, debe modificar la plantilla de los propios elementos; por ejemplo, la plantilla ComboBoxItem.

En la plantilla, pueden existir otros objetos para adornar la apariencia del control ComboBox, pero los elementos enumerados en la tabla siguiente están asociados a su comportamiento en un contrato.

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla. En el panel Objetos y escala de tiempo, aparece un icono junto a cada objeto que está actuando como elemento en el panel Elementos.

Nombre de elemento	Tipo de objeto	Descripción
ContentPresenter	ContentPresenter	Objeto que muestra el elemento seleccionado cuando el control ComboBox no está expandido. Este elemento es obligatorio.
ContentPresenterBorder	FrameworkElement	Panel de diseño que contiene la parte superior del control ComboBox. Este elemento es obligatorio.
DropDownToggle	ToggleButton	Botón que expande el control ComboBox cuando se hace clic en el botón. De forma predeterminada, el botón contiene un objeto Path que representa una flecha, pero puede cambiarlo a una imagen.
Popup	Popup	Objeto Popup que muestra el contenido del control ComboBox. Este elemento es obligatorio.

Estados del control ComboBox

De forma predeterminada, el control ComboBox puede estar en alguno de los tres estados siguientes del grupo de estados CommonStates, que puede ver en el panel Estados cuando modifica una plantilla ComboBox:

Nombre del estado	Descripción
Normal	Apariencia del control ComboBox cuando no hay ninguna interacción con el control.
MouseOver	Apariencia del control ComboBox cuando el usuario mueve el puntero sobre él.
Disabled	Apariencia del control ComboBox cuando la propiedad IsEnabled se ha establecido en False.

El control ComboBox puede estar en alguno de los tres estados siguientes del grupo de estados FocusStates:

Nombre del estado	Descripción
Unfocused	Apariencia del control ComboBox cuando no recibe el foco del teclado.
Focused	Apariencia del control ComboBox cuando tiene el foco del teclado y no está expandido. Por ejemplo, es posible que un usuario presione la tecla TAB para recorrer los objetos de la aplicación hasta que el foco del teclado esté en el control ComboBox.
FocusedDropDown	Apariencia del control ComboBox cuando tiene el foco del teclado y está expandido.

El control ComboBox puede estar en alguno de los tres estados siguientes del grupo de estados ValidationStates:

Nombre del estado	Descripción
Valid	Apariencia del control ComboBox cuando es válido.
InvalidUnfocused	Apariencia del control ComboBox cuando no es válido y no tiene el foco del teclado.
InvalidFocused	Apariencia del control ComboBox cuando no es válido y tiene el foco del teclado.

Sugerencia:

Un grupo de estados contiene los estados visuales que forman parte de la misma categoría lógica y que no se pueden mostrar al mismo tiempo. Por ejemplo, el grupo CommonStates incluye estados relacionados con la interacción del usuario mediante un dispositivo de entrada como el mouse. Solo se puede mostrar un estado de este grupo de estados cada vez, pero un estado de un grupo sí se puede mostrar al mismo tiempo que un estado de otro grupo de estados.

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación de un estado, haga clic en el botón de grabación  en la mesa de trabajo, o bien seleccione Base en el panel Estados. Para modificar la apariencia del control cuando dos estados diferentes están activos, puede anclar una vista previa de un estado de un grupo de estados mientras modifica un estado de otro grupo de estados.

Para convertir objetos en un control ComboBox

Para modificar la plantilla de un control ComboBox, realice una de las acciones siguientes:

• Dibuje un control ComboBox  en la mesa de trabajo y, a continuación, cree una copia de la plantilla predeterminada.

  Para obtener más información, vea Crear o modificar una plantilla.

• Diseñe el aspecto del control ComboBox dibujando objetos o importando material gráfico y, a continuación, use el comando Convertir en control.

Si usa el comando Convertir en control, siga los pasos que se indican a continuación para asegurarse de crear todos los objetos que la plantilla ComboBox requiere:

1. Agrupe todos los objetos con los que desea definir la apariencia del control ComboBox en un control Grid.

2. Seleccione el nuevo control Grid y, en el menú Herramientas, haga clic en Convertir en control.

3. En el cuadro de diálogo que aparece, seleccione ComboBox, asígnele un nombre a la plantilla y seleccione la ubicación donde se almacenará.

   Para obtener información acerca de las ubicaciones, vea Crear un recurso.

4. Después de hacer clic en Aceptar, Microsoft Expression Blend entra en el modo de edición de plantilla y muestra los objetos que forman el control ComboBox. Puede continuar modificando la plantilla en este modo. Por ejemplo, agregar o modificar objetos, o bien seleccionar un estado en el panel Estados para modificar la apariencia de la plantilla en dicho estado.

5. Si el grupo de objetos originales incluía un objeto TextBlock , el objeto TextBlock se convierte en un objeto ContentPresenter en la plantilla del control ComboBox. Esto permite que el objeto ComboBox muestre texto. Si los objetos originales no incluían un objeto TextBlock, se agregará automáticamente un objeto ContentPresenter a la plantilla.

   Si el objeto ContentPresenter no tiene asignado el elemento correcto en la plantilla, haga clic con el botón secundario en el objeto ContentPresenter, elija Convertir en elemento de ComboBox y haga clic en ContentPresenter.

   Opcionalmente, puede mover o agregar otros objetos al objeto ContentPresenter si desea que esos objetos aparezcan en el control ComboBox incluso cuando no haya ningún elemento seleccionado.

6. Si tiene objetos o material gráfico que desea usar como flecha desplegable para el control ComboBox, proceda como se indica a continuación:

   1. Agrúpelos en un panel de diseño.

   2. Haga clic con el botón secundario en el panel de diseño.

   3. Elija Convertir en elemento de ComboBox.

   4. Haga clic en DropDownToggle.

      Esto reemplazará los objetos por un objeto ToggleButton y usará los objetos para crear el estilo y la plantilla que se aplicarán al objeto ToggleButton.

   5. En el cuadro de diálogo Convertir en elemento, escriba un nombre para el estilo ToggleButton que se creará.

   6. Seleccione una ubicación donde se almacenará el estilo y haga clic en Aceptar.

      En el modo de edición de plantilla del nuevo objeto ToggleButton, puede continuar realizando modificaciones, como eliminar el objeto ContentPresenter (si no desea mostrar texto en el objeto ToggleButton) o seleccionar estados en el panel Estados para modificar la apariencia del objeto ToggleButton en esos estados.

   7. Para volver al modo de edición de plantilla para el objeto ComboBox, haga clic en Ámbito superior  en el panel Objetos y escala de tiempo o haga clic en DropDownToggle en la barra de ruta de navegación en la parte superior de la mesa de trabajo.

   [!NOTA]

   El elemento DropDownToggle es opcional porque también se puede hacer clic en ContentPresenterBorder para abrir la lista de elementos del control ComboBox y proporciona una superficie de clic mayor.

7. El elemento Popup muestra los elementos del control ComboBox. Normalmente, se usa un objeto ItemsPresenter para mostrar una lista de elementos, y este objeto ItemsPresenter se suele mostrar dentro de un control ScrollViewer para proporcionar la funcionalidad de desplazamiento. Para crear el elemento Popup, realice lo siguiente:

   1. En el panel Objetos y escala de tiempo, seleccione el panel de diseño raíz.

   2. En el panel Elementos, haga doble clic en el elemento Popup para crear un objeto Popup en la raíz de la plantilla.

   3. Dentro del nuevo objeto Popup, dibuje un nuevo control ItemsPresenter.

   4. Use la herramienta Selección  para modificar el tamaño y la ubicación del elemento emergente.

8. Para crear el elemento ContentPresenterBorder, seleccione sólo el objeto ContentPresenter y el objeto ToggleButton opcional, elija Agrupar en en el menú Objeto y seleccione un panel de diseño. Haga clic con el botón secundario en el nuevo panel de diseño, seleccione Convertir en elemento de ComboBox y, a continuación, haga clic en ContentPresenterBorder.

9. Plantéese la posibilidad de enlazar algunas de las propiedades de pincel de los objetos de la plantilla a las siguientes propiedades del objeto ComboBox que finalmente usará la plantilla:

   • Background

   • BorderBrush

   • Foreground

   • BorderThickness

   Para obtener más información, vea Trasladar propiedades de objetos a la plantilla.

10. Para salir del modo de edición de plantilla, haga clic en [ComboBox] en la barra de ruta de navegación situada en la parte superior de la mesa de trabajo, o haga clic en Ámbito superior en el panel Objetos y escala de tiempo.

    Para obtener información acerca de cómo aplicar una plantilla ComboBox nueva a otros objetos ComboBox, vea Aplicar o quitar un recurso.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control ComboBox de Microsoft Silverlight en la galería de controles de Silverlight (puede estar en inglés) en MSDN.

Vea también

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes

SimpleComboBox y SimpleComboBoxItem

Aplicar estilos a un control que admite plantillas