WPF ScrollViewer control in VB.NET

In this article we will learn how to use ScrollViewer control in WPF.
  • 2178

In this article we will learn how to use ScrollViewer control in WPF.

ScrollViewer control

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.

sv2.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 Height="31" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ScrollViewer1"VerticalAlignment="Top" Width="124" />

The ScrollViewer control looks like this.

sv1.gif
 

Figure 2.

For example:

Drag and drop the ScrollViewer control and an Image control from the Toolbox on the form. The form looks like this.

sv3.gif
 

Figure 3.

XAML Code

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

    <Grid Width="579">

        <ScrollViewer Height="200" VerticalScrollBarVisibility="Visible"HorizontalScrollBarVisibility="Visible" Margin="143,26,229,85">

            <Image Stretch="Fill" Width="395" Height="254" Name="Image1">

            </Image>

        </ScrollViewer>

    </Grid>

</Window>

 

Now select image control and set the source property.

 

<Image Stretch="Fill" Width="395" Height="254" Name="Image1"Source="/WpfApplication3;component/Images/dog-animal.jpg">

</Image>

 

Now build the Application. 
 


 

sv4.gif 

Figure 4.

 

Image after scrolling horizontally:


 

sv5.gif 

Figure 5.

 

Image after scrolling vertically:


 

sv6.gif 

Figure 6.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.