SimpleListBox y SimpleListBoxItem
El cuadro de lista es un control de elementos en forma de una lista desplazable. Para colocar contenido en un cuadro de lista en Microsoft® Expression Blend™, haga doble clic en el cuadro de lista y, a continuación, dibuje un elemento (como un rectángulo) en él. Otra posibilidad es hacer clic con el botón secundario en el cuadro de lista en Objetos y escala de tiempo y, a continuación, hacer clic en Agregar SimpleListBoxItem para agregar elementos individuales a la colección, o bien hacer clic en Enlazar ItemsSource a datos para generar la colección de elementos SimpleListBoxItem desde un origen de datos. Si agrega elementos individuales a la colección, puede reorganizar los elementos haciendo doble clic en el cuadro de lista para activarlo y, a continuación, arrastrando los elementos para cambiarlos al orden deseado. Puede establecer los elementos que se seleccionan con la propiedad SelectedIndex del cuadro de lista.
Vista del área de diseño de un control SimpleListBox después de agregar dos elementos
Desglosar la plantilla de control
La plantilla del control SimpleListBox está formada por los siguientes elementos:
- Un panel Grid, que se utiliza para que el cuadro de lista contenga varios elementos secundarios. El panel Grid también se usa porque facilita al diseñador de la interfaz de usuario (UI) de la aplicación la adición de otros elementos a la plantilla.
- Un elemento Border, que se utiliza porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla a la propiedad BorderThickness del cuadro de lista al que se aplica esta plantilla.
- Un elemento ScrollViewer, que se utiliza para permitir al usuario de la aplicación desplazarse si la lista es demasiado larga.
- Un panel StackPanel, que está incluido en el elemento ScrollViewer y organiza los elementos. La propiedad IsItemsHost de StackPanel se establece en True para identificar ScrollViewer como el elemento que mostrará los elementos del control de cuadro de lista al que se aplica esta plantilla. Para cambiar StackPanel a otro elemento de panel, haga clic con el botón secundario en el elemento StackPanel en 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 SimpleListBoxItem está formada por los siguientes elementos:
- Un panel Grid, que se utiliza para que el elemento de cuadro de lista contenga varios elementos secundarios. Además, el uso de Grid facilita al diseñador la adición de otros elementos a la plantilla.
- Un elemento Border, que se utiliza porque incluye una propiedad BorderThickness que se puede enlazar mediante una plantilla a la propiedad BorderThickness 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 del control de elemento al que se aplica la plantilla.
Vista de objetos: partes básicas (plantilla) de un control SimpleListBox (izquierda) y un control SimpleListBoxItem (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 Desencadenadores, en el panel Interacción, para ver las propiedades que cambian cuando está activo un desencadenador. Por ejemplo, en la plantilla del cuadro de lista, si la propiedad IsSelected de un elemento del cuadro de lista es True, el color de fondo del elemento cambia. En la plantilla del elemento de cuadro de lista, si la propiedad IsHighlighted es True, la propiedad Background del elemento Border se cambia para indicar qué elemento del cuadro de lista se selecciona.
Pinceles usados
Las plantillas SimpleListBox y SimpleListBoxItem utilizan los siguientes recursos de pincel del diccionario de recursos SimpleStyles.xaml:
- La propiedad Background se establece mediante WindowBackgroundBrush cuando no hay ningún desencadenador activo y mediante DisabledBackgroundBrush cuando IsEnabled es False.
- La propiedad BorderBrush se establece mediante SolidBorderBrush cuando no hay ningún desencadenador activo y mediante DisabledBorderBrush cuando IsEnabled es False.
- Si SimpleListBox se ha llenado con elementos que usan la plantilla SimpleListBoxItem, la propiedad Background del elemento se establece mediante SelectedBackgroundBrush cuando se selecciona un elemento, y la propiedad Foreground se establece mediante DisabledForgroundBrush si IsEnabled es False.
Prácticas recomendadas 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 del área de diseño se agreguen como elementos secundarios del panel de diseño.
- SimpleListBoxItem es un control Grid que contiene un control Border y un control ContentPresenter. Al igual que con otros controles, ContentPresenter debe estar presente porque se usa para mostrar el contenido de cada elemento.