SimpleComboBox y SimpleComboBoxItem

El cuadro combinado es un control de elementos en forma de lista desplegable. Para colocar contenido en un cuadro combinado en Microsoft Expression Blend, haga doble clic en el cuadro combinado y, a continuación, dibuje un elemento (como un SimpleComboBoxItem) en él. Otra posibilidad es hacer clic con el botón secundario en el cuadro combinado en el panel Objetos y escala de tiempo y, a continuación, hacer clic en Agregar SimpleComboBoxItem para agregar elementos individuales a la colección, o bien, hacer clic en Enlazar ItemsSource a Datos para generar la colección de elementos ComboBoxItem desde un origen de datos. Para ver el cuadro combinado en la mesa de trabajo cuando esté expandido, puede hacer clic con el botón secundario en el cuadro combinado o en el elemento de cuadro combinado en el panel Objetos y escala de tiempo y, a continuación, hacer clic en Expandir ComboBox.

Vista de la mesa de trabajo de un control SimpleComboBox después de agregar dos elementos

Desglosar la plantilla de control

La plantilla del control SimpleComboBox está formada por los siguientes elementos:

• Un panel de cuadrícula, que se usa para que el cuadro combinado contenga varios elementos secundarios. El panel de cuadrícula Grid también se usa porque facilita al diseñador de la interfaz de usuario de la aplicación la adición de otros elementos a la plantilla.

• Un elemento ContentPresenter denominado ContentSite, que está incluido en la cuadrícula y se usa para mostrar el elemento seleccionado.

• Un cuadro de texto denominado PART_EditableTextBox, que está incluido en la cuadrícula y permite al usuario modificar texto dentro del cuadro combinado. Puesto que la clase utiliza el nombre PART_EditableTextBox para buscar el cuadro de texto, no debe cambiarse. De forma predeterminada, el cuadro de texto se contrae y se hace visible cuando IsEditable está establecido en True en el cuadro combinado al que se aplica esta plantilla de control.

• Un control de botón de alternancia emergente, que se usa para crear la parte que se expande del cuadro combinado. El control emergente puede colocarse en relación con otros controles y se representa encima de cualquier otro contenido. Este control también admite el uso de algunas animaciones integradas.

• Un control Grid incluido dentro del control emergente y que contiene un ScrollViewer que permite el desplazamiento en la lista de elementos. StackPanel en ScrollViewer coloca cada elemento. La propiedad IsItemsHost de StackPanel se establece en True para que el control de cuadro combinado pueda colocar los elementos secundarios dentro de StackPanel. Si desea cambiar la forma en que se muestran los elementos, puede reemplazar este panel de diseño; para ello, haga clic con el botón secundario en el elemento Grid desplegable en el panel Objetos y escala de tiempo y, a continuación, seleccione Cambiar tipo de diseño y elija otro panel, como UniformGrid.

La plantilla del control SimpleComboBoxItem está formada por los siguientes elementos:

• Un panel de cuadrícula, que se usa para que el elemento de cuadro combinado contenga varios elementos secundarios. También se usa el panel de cuadrícula porque facilita al diseñador la adición de otros elementos a la plantilla.

• Un elemento Border, que se usa porque incluye una propiedad BorderThickness (grosor del borde) que se puede enlazar mediante una plantilla a la propiedad BorderThickness (grosor del borde) del control de botón al que se aplica la plantilla.

• Un elemento ContentPresenter, que está incluido dentro del elemento Grid y se enlaza automáticamente a la propiedad Content (contenido) del control de elemento al que se aplica la plantilla.

  Vista de objetos: partes básicas (plantilla) de un control SimpleComboBox (izquierda) y un control SimpleComboBoxItem (derecha)

  

Desencadenadores de propiedad usados

Los desencadenadores de propiedad de la plantilla de control sirven para hacer que el control reaccione ante los cambios de propiedad. Puede hacer clic en los elementos en el panel Desencadenadores para ver las propiedades que cambian cuando se activa un desencadenador. Por ejemplo, en la plantilla del cuadro combinado, cuando la propiedad HasItems (tiene elementos) es False, el alto mínimo del elemento DropDownBorder se establece en 95 para que aparezca una ventana desplegable vacía al hacer clic en el cuadro combinado. Si el alto mínimo se estableciera en 0, aparecería una ventana desplegable muy pequeña. En la plantilla del elemento de cuadro combinado, si la propiedad IsHighlighted (está resaltado) es True, la propiedad Background (fondo) del elemento Border se cambia para indicar qué elemento del cuadro combinado se selecciona.

Pinceles usados

Las plantillas SimpleComboBox y SimpleComboBoxItem utilizan los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:

• La propiedad Background (fondo) del elemento DropDownBorder se establece mediante WindowBackgroundBrush.

• La propiedad BorderBrush (pincel del borde) del elemento DropDownBorder se establece mediante SolidBorderBrush.

• La propiedad Foreground (primer plano) se establece mediante DisabledForegroundBrush cuando IsEnabled es False.

• Si SimpleComboBox se ha llenado con elementos que usan la plantilla SimpleComboBoxItem, la propiedad Background (fondo) del elemento se establece mediante SelectedBackgroundBrush cuando se selecciona un elemento y la propiedad Foreground (primer plano) se establece mediante DisabledForgroundBrush cuando IsEnabled es False.

Procedimientos recomendados e instrucciones de diseño

• En general, debe usar un control Grid como raíz de la plantilla si espera que el diseñador agregue más elementos visuales al control. Expression Blend busca un panel de diseño como el control Grid y lo activa de forma predeterminada para que los elementos nuevos de la mesa de trabajo se agreguen como elementos secundarios del panel de diseño.

• La expansión del cuadro combinado se establece mediante el enlace de la propiedad IsChecked (está activado) de ToggleButton y la propiedad IsOpen (está abierto) del elemento emergente a la propiedad IsDropDownOpen (está abierto desplegable) del cuadro combinado al que se aplica esta plantilla de control. Si edita ToggleButton o el elemento emergente, necesitará asegurarse de mantener este enlace a plantilla.

• El elemento ToggleButton utiliza una plantilla independiente denominada ToggleButtonControlTemplate. Para modificarlo, haga clic con el botón secundario en el elemento ToggleButton, elija Editar plantilla y, a continuación, haga clic en Editar actual.

• Para modificar la plantilla SimpleComboBoxItem, haga clic en el botón Editar recurso situado al lado del estilo SimpleComboBoxItem en el panel Recursos. En el modo de edición del estilo, haga clic con el botón secundario en Estilo en el panel Objetos y escala de tiempo, elija Editar plantilla y, a continuación, haga clic en Editar actual. Si modifica la plantilla SimpleComboBoxItem, puede desear conservar o modificar el desencadenador IsHighlighted.

Vea también

Tareas

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