articles

ScrollViewer control in WPF

Anonymous User14955 06-Apr-2011

In XAML <ScrollViewer /> element is used to create a scroll viewer control in WPF. Scroll viewer control responds to both mouse and keyboard commands and defines numerous methods with which to scroll content by predetermined increments. A scroll viewer control can have one child, typically a panel elements that can host a children collection of elements. The content property defines sole child of the Scroll Viewer. We can use scroll viewer control for those control which does not provide scrolling functionality.

The following XAML code snippets represent use of ScrollViewer control
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Row="0" Grid.Column="0"  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Image x:Name="imgSource" />
        </ScrollViewer>
        <Button x:Name="btnLoadImage" Grid.Column="0" Grid.Row="1" Content="Load Image" Width="200" Height="30" Click="btnLoadImage_Click" />
</Grid>
 
Business logic of this demonstration
/// <summary>
        /// On the click event of browse image button a open file
        /// dialog box opens and we browse the image that we needs
        /// to open
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void btnLoadImage_Click(object sender, RoutedEventArgs e)
        {
            Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
            if (ofd.ShowDialog().Value)
            {
                string fileName = ofd.FileName;
                BitmapImage img = new BitmapImage();
                img.BeginInit();
                img.UriSource = new Uri(fileName);
                img.EndInit();
                imgSource.Source = img;
            }
        }
Output of the following code snippet is as follows

ScrollViewer control in WPF

When user click on Load image button then an open file dialog box opens and user select image and then click Open button and then image is loaded.

ScrollViewer control in WPF

 


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By