UXScrollViewer is an intuitive scroll viewer control featuring built-in Aero theme and rich scrolling user experiences that modeled based on Windows 7 Human Interface Guidelines.

By default, UXScrollViewer automatically detects the size of the content it hosted. The vertical and horizontal scrollbar is displayed based on the scrolling strategy specified in VerticalScrollBarVisibility and HorizontalScrollBarVisibility.

Using UXScrollViewer

You use UXScrollViewer to host a single content and facilitate scroll bars when the content exceeded the size of the desired size. UXScrollViewer automatically updates its scroll bar layout when the size of the content changed. It also implements a number of rich UX features and behavior such as consistently revealing scroll bars when the mouse cursor is over the scroll viewer, responsive animation and visual state to indicate dragging, scrolling and more.

The following example shows how to use UXScrollViewer using a simple content scenario.

<Intersoft:UXScrollViewer Height="150" Width="250" BorderThickness="1" BorderBrush="#FF7E7E7E">
    <Grid Height="200" Background="#FFD0EFFF">
        <TextBlock Text="Put very long content here" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Intersoft:UXScrollViewer>

The following figure shows the result of the above example.

By default, the vertical scrollbar is always displayed regardless of the content size. In this case, the vertical scroll bar is shown disabled if the content fits the size. You can customize this behavior to automatically display the vertical scollbar only when necessary by setting the VerticalScrollBarVisibility to Auto. The same is true for HorizontalScrollBarVisibility as well.

The scroll bar visibility for both vertical and horizontal direction provides the following options:

• Disabled
  The scroll bar for the particular direction is disabled. In this mode, the scroll bar will never appear eventhough the content exceeds the desired size.
   
• Auto
  The scroll bar for the particular direction will appear automatically when the content exceeds the desired size.
   
• Hidden
  The scroll bar for the particular direction is hidden and never appear eventhough the content exceeds the desired size. In this mode, the scroll bar logic is performed which updates the relevant scrolling properties.
   
• Visible
  The scroll bar for the particular direction will always be visible regardless of the content size.

The following example shows how to show both scroll bars of the UXScrollViewer only when its content exceeds the desired size.

<Intersoft:UXScrollViewer Height="150" Width="250" BorderThickness="1" BorderBrush="#FF7E7E7E"
                          VerticalScrollBarVisibility="Auto" 
                          HorizontalScrollBarVisibility="Auto">

    <Grid Height="200" Background="#FFD0EFFF">
        <TextBlock Text="Put very long content here" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>

</Intersoft:UXScrollViewer>

Customizing UXScrollViewer Appearance

You can easily customize the UXScrollViewer appearance through the following properties.

If you would like to completely customize the control appearance or if you want to change the styles of each visual state, you can edit the template of the control and do the modification accordingly.

To learn how to customize the template and visual states, see Styles and Template Overview.

Samples and Walkthroughs

For the list of ClientUI walkthroughs, see Walkthroughs and How-to Topics.

For the list of ClientUI samples available in local installation, see Locating the Samples in Local Installation.