Share via

Using Scrollers

  • Article

The Scroller view item allows you to horizontally or vertically scroll text and images that cannot fit within the space provided.

A simple way to implement the Scroller is within the Content section of a UI, with a set of focusable interactive children. By default, the item that has focus is always in view. Items that do not fit within the scrolling region will be clipped.

The scrolling content can be interactive. For example, the user can mouse over a list of items, and the one that has focus changes appearance. The Scroller can be set to respond to different types of input, depending on the content. For example, a large block of text cannot receive focus, so the Scroller could be configured to respond to keyboard input (for example, by pressing the UP ARROW and DOWN ARROW keys) to scroll. The Scroller can also respond to mouse input to set focus on different items and to scroll.

You can configure the Scroller to display a fade on the vertical or horizontal edges of the scrolling region using the Orientation and FadeSize attributes. For example, a vertical orientation with a fade size of 20 will fade 20 pixels inside the top and bottom edges of the scrolling region. A negative fade size value fades the outside of the scrolling region. (The Scroller and Clip elements both provide edge fading. However, the Scroller element adds scrolling support.)

The following elements are used with the Scroller:

  • To specify how the scrolling data should behave, use the ScrollingData element, which tracks the current position of the scroll. You can also use its methods to change the scroll position—for example, if you want to create buttons that control scrolling.
  • To specify how the Scroller should respond to mouse and keyboard input, use the ScrollingInputHandler element. This handler works with ScrollingData to change the position of the current scroll position.

A useful implementation of the Scroller is to create a list of scrolling items. You can use the Repeater element to repeat a display of a defined UI. The Repeater element is required for list-based scrolling if you want to enable keyboard navigation through the list, and must be referenced by the ScrollingData element.

The following example displays static text within a small region. Because static text cannot receive focus, this example enables keyboard input (such as directional keys) to scroll through the text.

An example of a Scroller view item.

  <UI Name="StaticTextScroller">

    <Locals>
      <ScrollingHandler Name="ScrollingHandler" HandleHomeEndKeys="true"
                        HandleDirectionalKeys="true" HandlePageKeys="true"/>
      <ScrollingData Name="ScrollingData" />
    </Locals>

    <Rules>
      <Default Target="[ScrollingHandler.ScrollingData]" Value="[ScrollingData]"/>
    </Rules>

    <Content>
      <Panel Layout="VerticalFlow">
        <Children>
          <ColorFill Name="Background" Content="White" MouseInteractive="true"
                     Padding="30,30,30,30" MaximumSize="300,200" Margins="10,0,10,0">
            <Children>
              <Scroller Orientation="Vertical" FadeSize="-20" ScrollingData="[ScrollingData]" >
                <Children>
                  <Text Color="Blue" Font="Verdana,30" WordWrap="true"
                        Content="You can use the Up, Down, Home, End, PageUp, and PageDown keys to scroll through this text." />
                </Children>
              </Scroller>
            </Children>
          </ColorFill>
        </Children>
      </Panel>
    </Content>
    
  </UI>

Sample Explorer

  • Scrolling > all samples

See Also