Scrolling In Silverlight Panels

Scrolling is a very basic User Interface feature which allows you to navigate vertically or horizontally the content which may take up more than available area. In Silverlight scrolling is not available by default for any of the panels. But it can easily be made available with just a little bit of XAML. In this post I will show you how to enable scrolling for a StackPanel which contains more items than it can fit within its size.

To begin with I will create a StackPanel with about 10 rectangles.

<StackPanel x:Name="LayoutRoot"
            Background="Honeydew">
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
</StackPanel>

To get a ScrollViewer all I need to do is Wrap my StackPanel inside a ScrollViewer.

<ScrollViewer>
  <StackPanel x:Name="LayoutRoot"
              Background="Honeydew">
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
  </StackPanel>
</ScrollViewer>

ScrollViewer can also be used with other panels such as Grid, Canvas etc. Other than scrolling vertically ScrollViewer can also be uses to scroll horizontally. This can be done by setting HorizontalScrollBarVisibility property as shown below.