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.