Silverlight ScrollViewer Example

In this article we will be seeing how to create Silverlight ScrollViewer control.

ScrollViewer control is used to enable scrolling of content. It provides Horizontal/VerticalScrollBarVisibility properties that can be set to one of four values:

• Auto
• Disabled
• Hidden
• Visible

Xaml:

<ScrollViewer />


Steps Involved:

Creating a Silverlight Application:

1. Open Visual Studio 2010.
2. Go to File => New => Project.
3. Select Silverlight from the Installed templates and choose the Silverlight Application template.
4. Enter the Name and choose the location.
5. Click OK.
6. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
7. Click OK.

Creating the UI:

Open MainPage.xaml file and replace the code with the following.

    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="ScrollViewerControl.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <ScrollViewer Height="300" Width="300"
                    VerticalScrollBarVisibility="Auto"
                    HorizontalScrollBarVisibility="Auto">
            <ScrollViewer.Content>
                <StackPanel>
                    <Image Source="/ ScrollViewerControl;component/Images/img4.png"></Image>
                </StackPanel>
            </ScrollViewer.Content>           
        </ScrollViewer>
    </Grid>  
</UserControl>