Silverlight Tip: ScrollViewer for a WrapPanel

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.

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.

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.

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.