ListBox control styling tips

Article
02/19/2013

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

You can use the built-in ListBox control template to create a custom ListBox template. By default, the ListBox control looks like the following:

JJ170044.3cc2d3af-6781-4937-b068-c3448a56406d(fr-fr,VS.110).png

Parts of the ListBox template

The ListBox control has one part: the ContentElement part. This part is mandatory.

Conseil
To view the parts of the template, open the Parts panel while modifying the template.

States of the ListBox control

By default, the ListBox control can be in one of the following three states of the ValidationStates state group:

State name	Description
Valid	The appearance of the ListBox control when it is valid.
InvalidUnfocused	The appearance of the ListBox control when it is invalid and does not have keyboard focus.
InvalidFocused	The appearance of the ListBox control when it is invalid and has keyboard focus.

When you select a state, state recording is turned on, and any changes that you make will be recorded for that state. To turn off state recording, click the recording button JJ170044.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.110).png on the artboard, or select Base in the States panel.

To convert objects into a ListBox control

The following image is a design comprehensive (comp) of a ListBox created by a designer:

ListBox

This example uses the XAML code in step 2 of the following procedure, which corresponds to the preceding graphic to create a custom password box by using the ListBox control template.

[!REMARQUE]

It is important to note that the preceding graphic is not yet a ListBox control, but artwork that that can be converted into a ListBox control.

Open a new Microsoft Silverlight project. In Code view, locate the following code, and then delete the closing slash mark (/).
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

Copy and then paste the following code into your new project, after the code that you located in step 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>

Add a closing Grid tag (</Grid>) after the code that you just pasted.
In the Objects and Timeline panel, right-click root, and then click Make Into Control. In the Make Into Control dialog box, click ListBox, and then click OK.
In the Objects and Timeline panel, right-click ScrollViewer, and then click Delete.
Press Shift and select both TextBlock elements. Right-click, and then click Cut.
Click **Return scope to **, and then press Ctrl+V four times to create eight new TextBlock elements. Press Shift and then select each of the TextBlock elements.
In the Layout category of the Properties panel, to the right of the Width box, click Advanced options, and then click Reset. Repeat for Height.
In the Objects and Timeline panel, right-click ListBox, click Edit Template, and then click Edit Current.
In the Objects and Timeline panel, right-click root, click Make Into Part of ListBox, and then click ScrollViewer. Click OK.
In the Objects and Timeline panel, right-click ContentPresenter, and then click Delete.
In the Objects and Timeline panel, click root. In the Parts panel, double-click ScrollContentPresenter.
In the Objects and Timeline panel, right-click VerticalScrollBar, click Make Into Part of ScrollViewer, and then click VerticalScrollBar. Click OK.

To style the VerticalScrollBar, see ScrollBar control styling tips.
Click **Return scope to ** to return to the ScrollViewer template.
Divide the root into two columns by clicking the blue ruler to the left of the control while dragging the ruler to the right next to the scroll bar as illustrated in the following image:
For the right column, click **Star ** two times. The Auto icon appears.
In the Layout category of the Properties panel, click Show advanced properties. Click Advanced options to the right of MinWidth, and then click Reset.
In the Objects and Timeline panel, click ScrollContentPresenter. In the Layout category of the Properties panel, to the right of ColumnSpan, click Advanced options, and then click Reset.
With VerticalScrollBar selected in the Objects and Timeline panel, switch to Split view. Copy and then paste the following code into the line of XAML that begins with <ScrollBar x:Name="VerticalScrollBar".
```
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
Maximum="{TemplateBinding ScrollableHeight}" 
Value="{TemplateBinding VerticalOffset}" 
ViewportSize="{TemplateBinding ViewportHeight}"
```
[!REMARQUE]

You can also set these properties by using custom expressions.
Click **Return scope to **. In the Objects and Timeline panel, click ScrollViewer. Add an ItemsPresenter from the Assets panel by clicking Controls, clicking All, and then clicking ItemsPresenter. Draw the ItemsPresenter on the artboard in the left column of the ListBox.
With the ItemsPresenter selected in the Objects and Timeline panel, in the Layout category of the Properties panel, click Advanced options to the right of the Width property, and then click Reset. Repeat for Height.
Build your project (Ctrl+Shift+B), and then test your project by pressing F5.

Important

The ListBox will not work as expected unless you have styled the ScrollBar by using the ScrollBar control styling tips as described in step 13.