WIN10 series: C # App Control Basics 19

ScrollViewer controls

The ScrollViewer control contains a horizontal and a vertical scroll bar and a scrollable content display area where you can place other visible controls. The horizontal and vertical scroll bars of the ScrollViewer control have an arrow at each end, with a slider that slides up and down or left or right. When the content placed in the ScrollViewer control exceeds its bounds, a horizontal or vertical scrollbar is displayed, and the contents of the hidden part can be seen by moving the slider on the scrollbar or by clicking the arrows at both ends of the slider bar.

In a XAML file, the use of the ScrollViewer control is as follows:

<scrollviewer?.../>

- or -

<scrollviewer?... >

<!-- Add visible Controls -

</ScrollViewer>

Here are some common properties of the ScrollViewer control:

• The Verticalscrollbarvisibility property, which sets the visibility of the vertical scroll bar, has 4 property values, Auto,disabled,hidden and visible, respectively.
• The HorizontalScrollBarVisibility property, which sets the visibility of the horizontal scroll bar, is the same as the use of the Verticalscrollbarvisibility property.
• IsEnabled property to set whether the ScrollViewer control uses scroll bars. If the property value is true, use the scroll bar. If the property value is False, the scroll bar is not valid. By default, the IsEnabled value is true.

An example is followed to illustrate how the ScrollViewer control is used .

Create a blank application project with the Windows store named "Scrollviewerdemo" and add the following code to the grid element of the MainPage.xaml file.

<scrollviewer height= "width=" horizontalscrollbarvisibility= "Auto" verticalscrollbarvisibility= "Auto" >

<textblock width= "height=" textwrapping= "Wrap" fontsize= " text=" ScrollViewer The control contains a horizontal and a vertical scroll bar and a scrollable area where you can place other visible controls. The horizontal and vertical scroll bars of the ScrollViewer control have an arrow at each end, and a small slider in the middle. When other visible controls placed in the ScrollViewer control exceed its bounds, a horizontal or vertical scrollbar is displayed, and you can see the entire contents of the visible control by moving the slider or clicking the arrow of the slider bar. "/>

</ScrollViewer>

Add a ScrollViewer control to the above code and set its Height property and the value of the Width property to 200, The value of the HorizontalScrollBarVisibility property and the Verticalscrollbarvisibility property is auto.

Place a TextBlock text block inside the ScrollViewer control and add some content text in it for demonstration purposes, set the Height property of this text block and the value of the Width property to 300, This causes the size of the text block to exceed the width and height set by the ScrollViewer control, so the scrollbar of the ScrollViewer control is automatically displayed so that the text content in the text block can be scrolled through the ScrollViewer control.

Running the program, the text in the TextBlock control is displayed in the scrollable area of the ScrollViewer control, but the text displayed is not complete, and the user can move the slider up or down to see the text content of the part that is not displayed, as shown in effect 4-31.

Figure 4-31 Use of the ScrollViewer control

WIN10 series: C # App Control Basics 19