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
            <RowDefinition />
            <RowDefinition Height="30"/>
            <ColumnDefinition />
        <ScrollViewer Grid.Row="0" Grid.Column="0"  HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <Image x:Name="imgSource" />
        <Button x:Name="btnLoadImage" Grid.Column="0" Grid.Row="1" Content="Load Image" Width="200" Height="30" Click="btnLoadImage_Click" />
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.UriSource = new Uri(fileName);
                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


  Modified On Mar-22-2018 06:09:22 AM

Leave Comment