#888 – Different Ways to Scroll Content in a ScrollViewer

There are several different ways that you can scroll content within a ScrollViewer.

To scroll content vertically:

  • Click and drag the vertical scrollbar with the mouse
  • Click the up/down arrow widgets at either end of the scrollbar  (scroll small amount)
  • Tab through control that can receive focus.  When you tab to a control, it is scrolled into view.
  • Use the mouse scroll wheel
  • Press up / down arrow keys  (scroll small amount)
  • Press Page Up Page Down keys  (scroll by full page)
  • Ctrl-Home to scroll to beginning, Ctrl-End to scroll to end

To scroll content horizontally:

  • Click and drag the horizontal scrollbar with the mouse
  • Click the up/down arrow widgets at either end of the scrollbar  (scroll small amount)
  • Tab through control that can receive focus.  When you tab to a control, it is scrolled into view.
  • Press left / right arrow keys  (scroll small amount)
Advertisements

#887 – The Difference between Disabled and Hidden Scrollbar Visibility

ScrollViewer allows setting the horizontal or vertical scrollbar visibility to AutoDisabledHidden or Visible.  The Disabled and Hidden options are similiar, but subtly different.

  • Hidden – Scrollbar is not shown, but content is allowed to scroll (e.g. using arrow keys).  Content in ScrollViewer is given an infinite amount of space in the scrolling direction.  (E.g. Infinite width if HorizontalScrollBarVisibility is set to Hidden).
  • Disabled – Content cannot scroll and is not allowed to be larger than the ScrollViewer’s size in the scrolling direction.

We can see how this works by placing a horizontally-oriented WrapPanel inside a ScrollViewer.  When the HorizontalScrollBarVisibility is set to Hidden, the WrapPanel is infinitely wide and therefore never wraps.  (You can still scroll the content using the arrow keys).

887-001

If the HorizontalScrollBarVisibility is set to Disabled, the WrapPanel can’t scroll horizontally and its width is constrained to the width of the ScrollViewer, causing it to wrap.

887-002

#886 – Wrapping a Canvas in a ScrollViewer

Because the ScrollViewer control is a ContentControl, it can contain any single element.  It most often contains a single Panel, which in turn contains child elements.

Below is an example of a ScrollViewer that contains a Canvas, which in turn contains several different elements.  When the containing window is sized to be smaller than the Canvas element, the scrollbars automatically appear.

    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <Canvas Width="340" Height="330">
            <Image Canvas.Left="15" Canvas.Top="5"
                   Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Canvas.Left="0" Canvas.Top="120"
                Grid.Column="1" Content="Augustus - 63BC - 14AD" />

            <Image Canvas.Top="180" Canvas.Left="200"
                   Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
            <Label Canvas.Top="295" Canvas.Left="180"
                   Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>

            <Line Canvas.Left="140" Canvas.Top="140" X2="65" Y2="50"
                  Stroke="RoyalBlue"/>
        </Canvas>
    </ScrollViewer>

886-001

#885 – Wrapping a Grid in a ScrollViewer

Because the ScrollViewer control is a ContentControl, it can contain any single element.  It most often contains a single Panel, which in turn contains child elements.

Below is an example of a ScrollViewer that contains a Grid, which in turn contains a number of different elements.

    <ScrollViewer Margin="5" CanContentScroll="False"
                  HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Image Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />

            <Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>

            <Button Grid.Row="1" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
            <Button Grid.Row="1" Grid.Column="2" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
        </Grid>
    </ScrollViewer>

885-001
885-002

#884 – Making a StackPanel Scroll More Intelligently

By default, when you place content in a ScrollViewer, the ScrollViewer itself decides how far to scroll the content each time that you click on the arrows included with the scrollbar (or use the arrow keys).

For example, we can place a vertical StackPanel within a ScrollViewer, where each element in the StackPanel is itself a panel containing an image and some text.  Each time we click on an arrow widget to scroll down by one increment, the content slides down a little bit.

884-001
884-002
However, we can tell the ScrollViewer that the StackPanel knows how to scroll itself by setting the ScrollViewer.CanContentScroll property to true.  The StackPanel now scrolls down one element a time when we click on the arrows.  That is, it scrolls down to the next child element, which in this case is the next image/text combination.

884-003

884-004

 

#883 – ScrollViewer Is a ContentControl

Because a ScrollViewer is a ContentControl, it can contain exactly one child element.  The size of the child element is typically larger than the actual size of the ScrollViewer.  You then use the scrollbars in the ScrollViewer to scroll the larger child element within the smaller view.

As a ContentControl, a ScrollViewer will typically contain a Panel control, which in turn can contain a number of different children.  However, the ScrollViewer might also just contain a single child control that is not a panel.

In the example below, the ScrollViewer contains a single Image that can then be scrolled within the parent window.

    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <Image Source="Augustus.jpg"/>
    </ScrollViewer>

883-001

#565 – Workaround for Inability to Scroll ScrollViewer in Design Mode in Blend

When you’re working in Blend and have some scrollable content in a ScrollViewer, you won’t be able to see all of the content at design time because Blend doesn’t let you scroll the ScrollViewer.

This can be frustrating, since you want to see your content at design time.  In the example above, I have a series of Image controls in a vertical StackPanel, but I can only see the first couple.

The trick to working around this limitation is to put your content into a UserControl and then put that UserControl into the ScrollViewer.  You can then scroll the contents of the UserControl on the artboard.

Create a UserControl.

Move your content into the new UserControl.

Remove design-time width and height.

Go back to the window that contains your ScrollViewer.  Find the UserControl in the Assets panel and drag it into the ScrollViewer.

You can now scroll at design time.