Click here to Skip to main content
11,719,185 members (86,894 online)
Click here to Skip to main content

Silverlight Tip: ScrollViewer for a WrapPanel

, 4 Oct 2010 CPOL 13.2K
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)

Share

About the Author

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

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 3 Pin
Rahul K P Singh19-Nov-12 18:46
memberRahul 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 | Terms of Use | Mobile
Web02 | 2.8.150901.1 | Last Updated 4 Oct 2010
Article Copyright 2010 by chaitanya venneti
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid