Inténtelo: Cambiar la apariencia del elemento seleccionado de un control SimpleListBox
.png "Esta página es específica de proyectos WPF")
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
Dibuje un control SimpleListBox en la mesa de trabajo de Expression Blend.
.gif "Sugerencia")
Sugerencia:Los controles de estilo simple están disponibles en la categoría Simple Styles de la ficha Controles del Panel biblioteca
.png "Cc295254.0224cabd-5da1-4e01-bddd-4a647401a098(es-es,Expression.10).png")
. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.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.
Haga clic con el botón secundario en los elementos de 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 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 el botón Ámbito superior
.png "Cc295254.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(es-es,Expression.10).png")
, que se encuentra encima del árbol de elementos en el panel Interacción.Para volver al modo de edición de plantillas para una plantilla existente, haga clic con el botón secundario en el elemento cuya plantilla desea editar en Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
Haga clic en IsSelected = True en Desencadenadores, en el panel Interacción. De manera predeterminada, el color de fondo del borde cambia al seleccionar un elemento, como puede observar en Propiedades cuando está activo en Desencadenadores. Puede cambiar el color de 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.
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
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 de la ficha Estilos locales del Panel biblioteca.Pruebe la aplicación (F5) para ver los efectos.
Para modificar la apariencia del elemento seleccionado mediante la plantilla ItemContainerStyle
Dibuje un control SimpleListBox en la mesa de trabajo de Expression Blend.
Sugerencia:Los controles de estilo simple están disponibles en la categoría Simple Styles de la ficha Controles del Panel biblioteca
. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.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
.png "Cc295254.ae750268-92e8-403a-9e07-b662da4e9e1e(es-es,Expression.10).png")
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 de Inténtelo: Crear un lector de noticias RSS en este manual del usuario.
Haga clic en el objeto ListBox en Objetos y escala de tiempo. En el menú Objeto, haga clic en 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.
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 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, 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.
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.
Pruebe la aplicación (F5) para ver los efectos.