Sugerencias para la aplicación de estilos al control ComboBox para controles de Silverlight en Blend

Puede utilizar la plantilla de control ComboBox integrada para crear una plantilla ComboBox personalizada. El control Popup contiene un control ListBox que permite a los usuarios seleccionar un elemento de una lista. La apariencia predeterminada del control ComboBox es la siguiente:

Elementos de la plantilla ComboBox

La plantilla ComboBox incluye los siguientes elementos:

Nombre de elemento	Tipo de objeto
ContentPresenter	ContentPresenter
ContentPresenterBorder	FrameworkElement
DropDownToggle	ToggleButton
Popup	Popup

Sugerencia

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla.

Sugerencias para ComboBox

Un cuadro combinado consta de una ventana emergente que contiene una lista de elementos (4), un área en la que se muestra el elemento seleccionado actualmente (1), y un botón de alternancia que se usa para abrir y cerrar la ventana emergente (3).

Elemento ContentPresenter

El elemento ContentPresenter es obligatorio y su finalidad es mostrar el elemento actual. Si coloca algún contenido dentro del elemento ContentPresenter en la plantilla, dicho contenido se mostrará siempre que no haya ningún elemento seleccionado.

Elemento ContentPresenterBorder

Si IsHitTestVisible es True, se puede hacer clic en el elemento ContentPresenterBorder para abrir o cerrar la ventana emergente, y dicha ventana emergente estará situada en la esquina inferior izquierda de ContentPresenterBorder (2). Un panel de diseño es una buena elección para el elemento ContentPresenterBorder.

Elemento DropDownToggle

El elemento DropDownToggle es opcional, pero se puede utilizar como otra manera de abrir y cerrar la ventana emergente.

Elemento Popup

El elemento Popup es obligatorio. Es el lugar donde se muestran los elementos. Se utiliza un ItemsPresenter para indicar dónde se deben mostrar los elementos. ItemsPresenter debe colocarse dentro del elemento ScrollViewer. Popup se abre en relación con los límites del objeto raíz de la plantilla.

Estados del control ComboBox

De forma predeterminada, el control ComboBox puede estar en uno de los tres estados siguientes del grupo de estados CommonStates, que se pueden ver en el panel Estados al modificar una plantilla ComboBox:

Nombre del estado	Descripción
Normal	Apariencia del control ComboBox cuando no hay 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 está establecida 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 tiene el foco del teclado.
Focused	Apariencia del control ComboBox cuando tiene el foco de teclado y el control ComboBox no está expandido. Por ejemplo, un usuario puede presionar la tecla Tab para pasar de un objeto a otro en la aplicación hasta que el foco del teclado esté en el control ComboBox.
FocusedDropDown	Apariencia del control ComboBox cuando tiene el foco de teclado y el control ComboBox 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 del 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.

Enlace de plantillas

Puede enlazar las propiedades Background, BorderBrush, Foreground o BorderThickness a una plantilla. Para obtener más información, vea Trasladar propiedades de objetos a la plantilla en Blend.

Para convertir objetos en un control ComboBox

El gráfico siguiente es un diseño integral (composición) de un cuadro combinado.

Nota

Es importante destacar que el gráfico anterior no es aún un control ComboBox, sino una ilustración que se parece a un control ComboBox.

Este ejemplo utiliza el código XAML en el paso 2 del procedimiento siguiente.

1. Abra un nuevo proyecto de Microsoft Silverlight. En la Vista de código, busque el código siguiente y, a continuación, elimine la barra diagonal (/) de cierre.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copie y pegue el código siguiente en el nuevo proyecto, después del código que encontró en el paso 1.

   <Grid Height="70" Width="120">
   <Rectangle 
      x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" 
      Height="20" VerticalAlignment="Top" />
   <Rectangle 
      Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" 
      Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
   <Path 
      Fill="White" Stretch="Fill" Width="8" Height="5" 
      Data="M6,12 L2,16 L-1,12 L-4,12 L1,17 L3,17 L9,12 z" Margin="0,8,4,0" 
      HorizontalAlignment="Right" VerticalAlignment="Top" />
   <Rectangle 
      x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" 
      Margin="0,20,0,0" />
   <TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
   <TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>
   </Grid>
   

3. Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.

4. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en Cuadrícula y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en ComboBoxy, a continuación, haga clic en Aceptar.

5. En el panel Objetos y escala de tiempo, presione la tecla Ctrl y, a continuación, haga clic en ambos elementos TextBlock. Haga clic con el botón secundario en cualquier elemento seleccionado y, a continuación, haga clic en Cortar. Haga clic en **Devolver ámbito a ** y, a continuación, haga clic en Pegar. En el panel Propiedades, en la categoría Diseño, junto a Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto.

6. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en ComboBox, haga clic en Editar plantilla y, a continuación, en Editar actual.

7. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en contentarea, haga clic en Agrupar en y, a continuación, en Grid.

8. Haga clic con el botón secundario en Grid, haga clic en Crear en elemento de ComboBox y, a continuación, haga clic en ContentPresenterBorder.

9. En el panel Elementos, haga doble clic en ContentPresenter. En el panel Propiedades, en la categoría Diseño, establezca Margen en los siguientes valores:

   • Izquierdo   5

   • Derecho   5

   • Superior   1

   • Inferior   0

10. En el panel Objetos y escala de tiempo, haga clic en Rectángulo, presione la tecla Ctrl y, a continuación, haga clic en Trazado. Haga clic con el botón secundario en la selección, haga clic en Agrupar en y, a continuación, haga clic en Grid.

11. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en Cuadrícula, haga clic en Crear en elemento de ComboBox y, a continuación, en DropDownToggle. Haga clic en Aceptar.

12. Haga clic con el botón secundario en Trazado y, a continuación, haga clic en Cortar. Haga clic en **Devolver ámbito a **, haga clic en DropDownToggle y, a continuación, presione Ctrl+V para pegar.

13. En el panel Objetos y escala de tiempo, seleccione Cuadrícula. En el panel Elementos, haga doble clic en Popup.

14. En el panel Herramientas, haga doble clic en Cuadrícula. En el panel Propiedades, en la categoría Diseño, junto a Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto.

15. En el panel Objetos y escala de tiempo, haga clic en popupbackground y, a continuación, arrástrelo a la cuadrícula que acaba de crear. En el panel Propiedades, en la categoría Diseño, junto a Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto, HorizontalAlignment, VerticalAlignment y Margen.

16. En el panel Objetos y escala de tiempo, arrastre ScrollViewer a la nueva cuadrícula. En el panel Propiedades, en la categoría Diseño, junto a Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto, HorizontalAlignment, VerticalAlignment y Margen.

17. Haga clic en **Devolver ámbito a **. En la categoría Diseño del panel Propiedades, establezca Alto en 20.

18. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

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

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control ComboBox de Microsoft Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.

Vea también

Conceptos

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

SimpleComboBox y SimpleComboBoxItem (soporte WPF en Blend)

Diseñar un control que admita plantillas en Blend