Silverlight ScrollViewer control in VB.NET

In this article we will learn how to use ScrollViewer control in Silverlight 4.
  • 2099

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.

s.gif
 

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.

s1.gif
 

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. 
 

s2.gif
 

Figure 3.

Image after scrolling horizontally:

s3.gif
 

Figure 4.

Image after scrolling vertically:

s4.gif
 

Figure 5.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.