Modificar la apariencia del elemento seleccionado de un control SimpleListBox

Personalizar la apariencia de un elemento seleccionado en un cuadro de lista en Microsoft® Expression Blend™ es fácil cuando se usa la plantilla del control SimpleListBoxItem.

Para modificar la apariencia del elemento seleccionado de un control SimpleListBox

  1. Dibuje un control SimpleListBox en el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  2. Agregue un elemento al cuadro de lista; para ello, haga clic con el botón secundario en el cuadro de lista en Objetos y escala de tiempo y, a continuación, haga clic en Agregar SimpleListBoxItem.
  3. Haga clic con el botón secundario en uno de los elementos del cuadro de lista en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, 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 sobre cómo crear una copia, vea Crear un recurso.
    Sugerencia Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en el botón Ámbito superior Botón Ámbito superior, que está situado encima del árbol de elementos del panel Interacción.

    Para volver al modo de edición de plantilla de una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desea editar, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
  4. Haga clic en IsSelected = True en Desencadenadores, en el panel Interacción. De manera predeterminada, el color de fondo del borde se modifica al seleccionar un elemento, como puede observar en Propiedades cuando está activo en el panel Desencadenadores. Puede cambiar el color del fondo por otro diferente; para ello, haga clic en Border en Objetos y escala de tiempo y modifique la propiedad Background en la categoría Pinceles del panel Propiedades.
    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.
  5. Para agregar más elementos al cuadro de lista que usa la plantilla que acaba de modificar, puede hacer clic en el botón Ámbito superior Botón Ámbito superior para volver al modo de edición del documento, hacer doble clic en el elemento del cuadro de lista para activarlo y, a continuación, agregar el estilo personalizado de la ficha Estilos locales del Panel biblioteca Botón Panel biblioteca.
  6. Pruebe la aplicación (F5) para ver los efectos.

Para modificar la apariencia del elemento seleccionado mediante la plantilla ItemContainerStyle

También puede modificar la apariencia del elemento seleccionado mediante la plantilla ItemContainerStyle del cuadro de lista para elementos que no sean ListBoxItems. Por ejemplo, si dibuja un rectángulo en el cuadro de lista o usa enlace de datos en la propiedad ItemsSource de dicho cuadro de lista para generar los elementos, puede aplicar estilos a los elementos con la plantilla ItemContainerStyle.

  1. Dibuje un control SimpleListBox en el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  2. Agregue unos cuantos elementos al cuadro de lista; para ello, haga doble clic en el cuadro de lista en Objetos y escala de tiempo para seleccionarlo y, a continuación, dibuje un Rectángulo Herramienta Rectángulo u otro control en el cuadro de lista en el área de diseño. O bien, puede hacer clic con el botón secundario en el elemento del cuadro de lista y hacer clic en Agregar SimpleListBoxItem.
    Sugerencia Si desea intentar el enlace de datos para generar elementos automáticamente para el cuadro de lista, puede usar los procedimientos de Crear un lector de noticias RSS en este manual del usuario.
  3. Haga clic en el objeto ListBox en Objetos y escala de tiempo. En el menú Objeto, elija Editar otros estilos, elija Editar ItemContainerStyle y, a continuación, haga clic en Editar una copia.
    Aparecerá la ventana Crear recurso Style. Para obtener más información sobre las opciones de la ventana Crear recurso Style, vea Crear un recurso. Para seguir este procedimiento, acepte los valores predeterminados y haga clic en Aceptar.
    Expression Blend pasa al modo de edición para el estilo de ListBoxItem.
  4. Las plantillas están incluidas en elementos de estilo, así que para editar la plantilla de ListBoxItem, haga clic con el botón secundario en el elemento Style en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
    Nota Haga clic en Editar plantilla aquí en lugar de en Editar una copia porque las plantillas de controles están incluidas en elementos de estilo e hizo clic en Editar una copia en el paso 3 para crear una copia del estilo.
    Expression Blend pasa al ámbito de edición de ListBoxItemStyleTemplate, la plantilla que usa el cuadro de lista para todos los elementos. Dentro de esta plantilla hay un elemento Border de nombre Bd, un elemento ContentPresenter y dos desencadenadores para el estado IsSelected.
  5. En Desencadenadores, en el panel Interacción, haga clic en uno de los desencadenadores IsSelected para pasar al modo de grabación de dicho desencadenador y, a continuación, cambie las propiedades del elemento Bd.
  6. Pruebe la aplicación (F5) para ver los efectos.