In this article we will learn how to use ScrollViewer control in Silverlight 4.
ScrollViewer control
Represents a scrollable area that can contain other visible elements. Suppose an image which has the large size and Image control alone would not be sufficient to display the content of the picture. only part of it would be visible in the UI. To see the entire image you need a control that can allow you to scroll, either horizontally, or vertically or in both directions.
Properties: These are the following properties of the ScrollViewer control.
Figure 1.
HorizontalScrollBarVisibility - This property is used to indicates whether a horizontal ScrollBar should be displayed.
VerticalScrollBarVisibility - This property is used to indicates whether a Vertical ScrollBar should be displayed.
Width - Gets or sets the width of a ScrollViewer control.
Height - Gets or sets the height of a ScrollViewer control.
Foreground - This property is used to describes the foreground color.
Creating ScrollViewer control in XAML
<ScrollViewer Width="200" Height="200" VerticalScrollBarVisibility="Visible"HorizontalScrollBarVisibility="Visible" >
For example:
Drag and drop the ScrollViewer control and an Image control from the Toolbox on the form. The form looks like this.
Figure 2.
XAML Code
<UserControl x:Class="SilverlightApplication39.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 Width="200" Height="200" VerticalScrollBarVisibility="Visible"HorizontalScrollBarVisibility="Visible" >
<Image Stretch="Fill" Width="400" Height="400" Name="Image1">
</Image>
</ScrollViewer>
</Grid>
</UserControl>
Now select image control and set the source property.
<Image Stretch="Fill" Width="400" Height="400" Name="Image1"Source="/SilverlightApplication39;component/Images/flowers-image.jpg">
Now build the Application.
Figure 3.
Image after scrolling horizontally:
Figure 4.
Image after scrolling vertically:
Figure 5.