Click here to Skip to main content
Click here to Skip to main content

Silverlight Tip: ScrollViewer for a WrapPanel

, 4 Oct 2010
Rate this:
Please Sign up or sign in to vote.
The Silverlight wrap panel is a great control which automatically wraps the elements in it either horizontally or vertically as required to fit them within the size of the panel. This short article explains how to enable a scrollviewer for the wrap panel content.
Silverlight Tip: ScrollViewer for a WrapPanel
 
The Silverlight wrap panel is a great control which automatically wraps the elements in it either horizontally or vertically as required to fit them within the size of the panel.
 
Using a wrap panel is fairly simple and straight forward.
<ControlsToolkit:WrapPanel Orientation="Horizontal">
    <TextBlock Text="Item 1"/>
    <TextBlock Text="Item 2"/>
    <TextBlock Text="Item 3"/>
    <TextBlock Text="Item 4"/>
    <TextBlock Text="Item 5"/>
    <TextBlock Text="Item 6"/>
    <TextBlock Text="Item 7"/>
    <TextBlock Text="Item 8"/>
    <TextBlock Text="Item 9"/>
    <TextBlock Text="Item 10"/>
</ControlsToolkit:WrapPanel>
 
The Orientation can be either Horizontal or Vertical.
 
However, when the number of items are more and the space is limited, wrap panel will not provide scrollbars. Instead, it’ll cut-off the content.
 
Ok, we have scrollviewer for that purpose. Just put the wrap panel inside a scrollviewer.
 
Let’s try that.
<ScrollViewer>
    <ControlsToolkit:WrapPanel Orientation="Horizontal">
        <TextBlock Text="Item 1"/>
        <TextBlock Text="Item 2"/>
        <TextBlock Text="Item 3"/>
        <TextBlock Text="Item 4"/>
        <TextBlock Text="Item 5"/>
        <TextBlock Text="Item 6"/>
        <TextBlock Text="Item 7"/>
        <TextBlock Text="Item 8"/>
        <TextBlock Text="Item 9"/>
        <TextBlock Text="Item 10"/>
    </ControlsToolkit:WrapPanel>
</ScrollViewer>
 
So now I have added a scrollviewer. Let’s see how it’ll look.

Horizontal


Fine, there is a scrollviewer, but instead of using the scrollviewer the wrap panel adjusted all the content with in the panel by reducing the whitespace in between. This is because the Orientation is set to Horizontal.
 
What happens if we change the Orientation to Vertical.

vertical


Now there is a scrollbar, but what happened to the Wrapping?
 
When the Orientation is set to Vertical, the wrap panel will first align the content vertically and when the space is not available then it wraps the content to another column. Since we have a scrollviewer here, the vertical space is unlimited, hence all the content in a single row.
 
That’s a nice explanation. But what is the solution?
 
For wrap panel to work with in a scrollviewer, you need to take care of the Width and ItemWidth properties of wrap panel.
 
<ControlsToolkit:WrapPanel Orientation="Horizontal"
            ItemWidth="200"
            Width="Auto">
 
And here is the result with scrollbar and the content wrapped.

scrollbar


The same trick works when the wrap panel is used in a ItemsControl with DataBinding. You can either keep your ItemsControl inside a scrollviewer or can change the control template of ItemsControl by adding a scrollviewer to the content presenter inside the template.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

chaitanya venneti
Software Developer (Senior) BrainScale Consulting
India India
Silverlight developer
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 3 PinmemberRahul K P Singh19-Nov-12 18:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 4 Oct 2010
Article Copyright 2010 by chaitanya venneti
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid