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>

Panel without ScrollViewer

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

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.

HorizontalScrollBarVisibility

Tagged with:
 

2 Responses to Scrolling In Silverlight Panels

  1. [...] an earlier post I showed you how to add ScrollViewer to Panels. In this post I will show you how to change the look of  the ScrollViewer using Expression [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>