Home / Programming / Blog article: Scrolling In Silverlight Panels

| RSS

Scrolling In Silverlight Panels

July 7th, 2009 | 1 Comment | Posted in Programming

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

Leave a Reply 7407 views, 1 so far today |
Follow Discussion

One Response to “Scrolling In Silverlight Panels”

Trackbacks

  1. Style Silverlight ScrollViewer With A New ControlTemplate | One .Net Way  

Leave a Reply





Switch to our mobile site