Sugerencias para la aplicación de estilos al control ListBox para controles de Silverlight en Blend

Artículo
10/09/2014

JJ170044.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(es-es,VS.120).png

Puede utilizar la plantilla de control ListBox integrada para crear una plantilla ListBox personalizada. La apariencia predeterminada del control ListBox es la siguiente:

JJ170044.3cc2d3af-6781-4937-b068-c3448a56406d(es-es,VS.120).png

Elementos de la plantilla ListBox

El control ListBox tiene un elemento: ContentElement. Este elemento es obligatorio.

Sugerencia

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla.

Estados del control ListBox

De forma predeterminada, el control ListBox puede estar en uno de los tres estados siguientes del grupo de estados ValidationStates:

Nombre del estado	Descripción
Valid	Apariencia del control ListBox cuando es válido.
InvalidUnfocused	Apariencia del control ListBox cuando no es válido y no tiene el foco del teclado.
InvalidFocused	Apariencia del control ListBox cuando no es válido y tiene el foco del teclado.

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación del estado, haga clic en el botón de grabación JJ170044.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(es-es,VS.120).png en la mesa de trabajo, o bien seleccione Base en el panel Estados.

Para convertir objetos en un control ListBox

La imagen siguiente es un diseño integral (composición) de un ListBox creado por un diseñador:

ListBox

En este ejemplo se utiliza el código XAML del paso 2 del siguiente procedimiento, que corresponde al gráfico anterior para crear un cuadro de contraseña personalizado mediante la plantilla de control ListBox.

Nota

Es importante destacar que el gráfico anterior no es aún un control ListBox, sino una ilustración que se puede convertir en un control ListBox.

Abra un nuevo proyecto de Microsoft Silverlight. En la Vista de código, busque el código siguiente y, a continuación, elimine la barra diagonal (/) de cierre.
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

Copie y pegue el código siguiente en el nuevo proyecto, después del código que encontró en el paso 1.

<Grid x:Name="root" Height="146" Width="146">
   <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
   <TextBlock Margin="5,5,0,0" Foreground="White" Text="Lorem"/>
   <TextBlock Margin="5,26,0,0" Foreground="White" Text="Ipsum"/>
   <Grid x:Name="verticalscrollbar" Width="17" Height="146" 
       HorizontalAlignment="Right" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
   <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
      VerticalAlignment="Top"/>
   <Rectangle 
      x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
      Margin="0,24,0,0" VerticalAlignment="Top"/>
   <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7"
      Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
      VerticalAlignment="Bottom" />
   </Grid>
</Grid>

Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en root y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en ListBox y, a continuación, haga clic en Aceptar.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en ScrollViewer y, a continuación, haga clic en Eliminar.
Presione la tecla Mayús y seleccione ambos elementos TextBlock. Haga clic con el botón secundario y, a continuación, haga clic en Cortar.
Haga clic en **Devolver ámbito a ** y, a continuación, presione Ctrl+V cuatro veces para crear ocho elementos TextBlock nuevos. Presione la tecla Mayús y, a continuación, seleccione cada uno de los elementos TextBlock.
En la categoría Diseño del panel Propiedades, a la derecha del cuadro Ancho, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en ListBox, haga clic en Editar plantilla y, a continuación, en Editar actual.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en root, haga clic en Crear en elemento de ListBox y, a continuación, haga clic en ScrollViewer. Haga clic en Aceptar.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en ContentPresenter y, a continuación, haga clic en Eliminar.
En el panel Objetos y escala de tiempo, haga clic en root. En el panel Elementos, haga doble clic en ScrollContentPresenter.
En el panel Objetos y escala de tiempo, haga clic con el botón secundario en VerticalScrollBar, haga clic en Crear en elemento de ScrollViewer y, a continuación, haga clic en VerticalScrollBar. Haga clic en Aceptar.

Para aplicar estilo a VerticalScrollBar, vea Sugerencias para la aplicación de estilos al control ScrollBar para controles de Silverlight en Blend
Haga clic en **Devolver ámbito a ** para volver a la plantilla ScrollViewer.
Haga clic en la regla azul a la izquierda del control y arrastre la regla hacia la derecha junto a la barra de desplazamiento para dividir la raíz en dos columnas, según se muestra en la siguiente imagen:
Para la columna derecha, haga clic en **Estrella ** dos veces. Aparece el icono Automático .
En la categoría Diseño del panel Propiedades, haga clic en Mostrar propiedades avanzadas. Haga clic en Opciones avanzadas a la derecha de MinWidth y, a continuación, haga clic en Restablecer.
En el panel Objetos y escala de tiempo, haga clic en ScrollContentPresenter. En la categoría Diseño del panel Propiedades, a la derecha de ColumnSpan, haga clic en Opciones avanzadas y, a continuación, haga clic en Restablecer.
Con VerticalScrollBar seleccionado en el panel Objetos y escala de tiempo, cambie a la Vista en dos paneles. Copie y pegue el código siguiente en la línea de XAML que comienza por <ScrollBar x:Name="VerticalScrollBar".
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
Nota

También puede establecer estas propiedades mediante el uso de expresiones personalizadas.
Haga clic en **Devolver ámbito a **. En el panel Objetos y escala de tiempo, haga clic en ScrollViewer. Agregue un elemento ItemsPresenter desde el panel Activos. Para ello, haga clic en Controles, en Todos y, a continuación, en ItemsPresenter. Dibuje el elemento ItemsPresenter en la mesa de trabajo, en la columna izquierda de ListBox.
Con ItemsPresenter seleccionado en el panel Objetos y escala de tiempo, en la categoría Diseño del panel Propiedades, haga clic en Opciones avanzadas a la derecha de la propiedad Ancho y, a continuación, haga clic en Restablecer. Repita el mismo procedimiento para Alto.
Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

Importante

El control ListBox no funcionará según lo previsto a menos que haya aplicado un estilo a ScrollBar según la información de Sugerencias para la aplicación de estilos al control ScrollBar para controles de Silverlight en Blend como se describe en el paso 13.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control ListBox de Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.