How to use Scrolling in WPF: ScrollViewer Control

Most often times in the programming we don’t know about the size of the content to be displayed. The content may be fit in to the allotted area or may be larger than. That’s why in WPF there is a control i.e. ScrollViewer which can enable scrolling of those content whenever the content goes out to the display area.

ScrollViewer makes use of Scroll Bar controls and hooks them up to your content automatically. Just wrap your element in a Scroll Viewer to make it scrollable. I have used a textblock with large content (unfit to allotted area) in a stack panel as in following code in C# language:
<StackPanel>
<TextBlock Text="dotprograming is the latest group in the education field which gives accurate information about programming language"></TextBlock>
</StackPanel>
Run the WPF window and look out the result.



Text shown without ScrollViewer control in WPF

In the above image the content have been hidden and we can’t check the content without maximizing the window. But what about if the content is a paragraph. Now try the below code:
 <ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock Text="dotprograming is the latest group in the education field which gives accurate information about programming language"></TextBlock>
</StackPanel>
</ScrollViewer>

Run the project and check the result. A horizontal scrollbar has been enabled by the ScrollViewer control as in following image:

TextBlock enabled Scrolling with ScrollViewer control in WPF

The same process can be used when we want to enable vertical scrolling. Scrollbar visibility has four options to select by the user which are:
  • Visible—Scrollbar is always visible, whether it is needed or not.
  • Auto—visible if the content is big enough, hidden otherwise.
  • Hidden—always invisible but scrolling can be done using the arrow keys.
  • Disabled—always invisible and doesn’t exist.

2 comments:

  1. I want to the data on the scrollviewer to be selectable. Can you help me please how to do this. For the time being I cant select, copy the data written on the scrollviewer
    Thanks

    ReplyDelete