Export (0) Print
Expand All

ListBox control styling tips

Ee371162.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(en-us,Expression.40).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:

Ee371162.3cc2d3af-6781-4937-b068-c3448a56406d(en-us,Expression.40).png

Parts of the ListBox template

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

tip noteTip

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 Ee371162.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(en-us,Expression.40).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.

NoteNote

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.

  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 Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.40).png, 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 Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.40).png 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:

    ListBox with columns
  16. For the right column, click Star Ee371162.1b4edaf6-b6a8-4498-80dc-949375fa610d(en-us,Expression.40).png two times. The Auto icon Ee371162.aa9ec064-22f8-4b62-9eed-3f4772362d22(en-us,Expression.40).png 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}"
    
    
    NoteNote

    You can also set these properties by using custom expressions.

  20. Click Return scope to Ee371162.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(en-us,Expression.40).png. 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 noteImportant

    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 Ee371162.xtlink_newWindow(en-us,Expression.40).png on MSDN.

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft