Inténtelo: cambiar 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 la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en Simple Styles, en la categoría Estilos del panel Activos. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Agregue un elemento al cuadro de lista; para ello, haga clic con el botón secundario en el cuadro de lista en el panel Objetos y escala de tiempo y, a continuación, haga clic en Agregar SimpleListBoxItem.

3. Haga clic con el botón secundario en los elementos del cuadro de lista en el panel Objetos y escala de tiempo, elija Editar plantilla y, después, haga clic en Editar actual. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar actual para crear una plantilla nueva y guardarla en el documento.

   Para obtener más información acerca de 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 Ámbito superior, que está encima del árbol de elementos en el panel Objetos y escala de tiempo. Para volver al modo de edición de plantilla para una plantilla existente, en el panel Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desee editar, elija Editar plantilla y, a continuación, haga clic en Editar actual.

4. Haga clic en IsSelected = True en el panel Desencadenadores. De manera predeterminada, el color de fondo del borde cambia al seleccionar un elemento, como puede observar en Propiedades cuando está activo en el panel Desencadenadores. Puede cambiar el color de fondo por otro diferente; para ello, haga clic en Border en el panel 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 el panel Desencadenadores, 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 el panel Desencadenadores.

5. Para agregar más elementos al cuadro de lista que usa la plantilla que acaba de modificar, puede hacer clic en Ámbito superior para volver al ámbito 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 desde la categoría Estilos del panel Activos.

6. Pruebe la aplicación (F5) para ver los efectos.

Para modificar la apariencia del elemento seleccionado mediante la plantilla ItemContainerStyle

1. Dibuje un control SimpleListBox en la mesa de trabajo de Expression Blend.

   Sugerencia:
   Los controles de estilo simple están disponibles en Simple Styles, en la categoría Estilos del panel Activos. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Agregue algunos elementos al cuadro de lista; para ello, haga doble clic en el cuadro de lista en el panel Objetos y escala de tiempo para seleccionarlo y, a continuación, dibuje un rectángulo u otro control en el cuadro de lista en la mesa de trabajo. 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 descritos en Inténtelo: crear un lector de noticias RSS.

3. Haga clic en el objeto ListBox en el panel Objetos y escala de tiempo. En el menú Objeto, señale Editar estilos adicionales, elija Editar ItemContainerStyle y, a continuación, haga clic en Editar una copia.

   Aparecerá la ventana Crear recurso Style. 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.

   Para obtener más información sobre las opciones de la ventana Crear recurso Style, vea Crear un recurso.

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 el panel Objetos y escala de tiempo, elija Editar plantilla y, a continuación, haga clic en Editar actual.

   [!NOTA]

   Haga clic en Editar actual aquí en lugar de en Editar una copia porque las plantillas de control están incluidas en elementos de estilo y en el paso 3 hizo clic en Editar una copia para crear una copia del estilo.

   Expression Blend pasa al ámbito de edición de ListBoxItemStyleTemplate, que es 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 el panel Desencadenadores, 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.

Vea también

Conceptos

SimpleListBox y SimpleListBoxItem