ListBox control styling tips

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

Parts of the ListBox template

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

States of the ListBox control

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

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  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:

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.

1. 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"/>
   

2. 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>
   

3. Add a closing Grid tag (</Grid>) after the code that you just pasted.

4. 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.

5. In the Objects and Timeline panel, right-click ScrollViewer, and then click Delete.

6. Press Shift and select both TextBlock elements. Right-click, and then click Cut.

7. 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.

8. 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.

9. In the Objects and Timeline panel, right-click ListBox, click Edit Template, and then click Edit Current.

10. In the Objects and Timeline panel, right-click root, click Make Into Part of ListBox, and then click ScrollViewer. Click OK.

11. In the Objects and Timeline panel, right-click ContentPresenter, and then click Delete.

12. In the Objects and Timeline panel, click root. In the Parts panel, double-click ScrollContentPresenter.

13. 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.

14. Click **Return scope to ** to return to the ScrollViewer template.

15. 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:

    

16. For the right column, click **Star ** two times. The Auto icon  appears.

17. In the Layout category of the Properties panel, click Show advanced properties. Click Advanced options to the right of MinWidth, and then click Reset.

18. 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.

19. 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}"
    

    Note

    You can also set these properties by using custom expressions.

20. 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.

21. 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.

22. 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.

References

You can find detailed information about the properties and events of the Silverlight ListBox control at the Silverlight Control Gallery on MSDN.

See Also

Tasks

Use the DataGrid control

Use the TreeView control

Concepts

Styling tips for common Silverlight controls

SimpleComboBox and SimpleComboBoxItem

Styling tips for common Silverlight controls

Style a control that displays data