Scroll Viewer

The ScrollViewer control allows oversized content to be displayed by putting it into a scrollable area. A ScrollViewer element has a single child. Example 3-35 uses an Ellipse element, but it could be anything. If you want to put multiple elements into a scrollable view, you would nest them inside a panel.

Example 3-35. ScrollViewer

<ScrollViewer HorizontalScrollBarVisibility="Auto">

<Ellipse Fill="Green" Height="1000" Width="2000" /> </ScrollViewer>

If the content of a ScrollViewer is larger than the space available, the ScrollViewer can provide scroll bars to allow the user to scroll around the content, as Figure 3-39 shows. By default, a ScrollViewer provides a vertical scroll bar, but not a horizontal one. In Example 3-35, the HorizontalScrollBarVisibility property has been set to Auto, indicating that a horizontal scroll bar should be added if required.

This Auto visibility we've chosen for the horizontal scroll bar is different from the default vertical behavior. The VerticalScrollBarVisibility defaults to Visible, meaning that the scroll bar is present whether it is required or not.

Figure 3-39. ScrollViewer

There are two ways to make sure a scroll bar does not appear. You can set its visibility either to Disabled (the default for horizontal scroll bars) or to Hidden. The distinction is that Disabled constrains the logical size of the ScrollViewer's contents to be the same as the available space. Hidden allows the logical size to be unconstrained, even though the user has no way of scrolling into the excess space. This can change the behavior of certain layout styles.

To examine how these settings affect the behavior of a ScrollViewer, we'll start with the code shown in Example 3-36, and then show what happens as we change the ScrollViewer properties.

Example 3-36. A resizable layout

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition Height="Auto" /> </Grid.RowDefinitions>

<Button Grid.Column="0">Stretched</Button> <Button Grid.Column="1">Stretched</Button> <Button Grid.Column="2">Stretched</Button> </Grid> </ScrollViewer>

This example shows a Grid containing three Button elements in a row. If the Grid is given more space than it requires, it will stretch the buttons to be wider than necessary. If it is given insufficient space, it will crop the buttons. If it is placed inside a ScrollViewer, it will be possible for the ScrollViewer to provide enough virtual, scrollable space for it, even if the space on-screen is insufficient.

Figure 3-40 shows how the Grid in Example 3-36 appears in a ScrollViewer when there is more than enough space. All four options for HorizontalScrollBarVisibility are shown, and in all four cases, the buttons have been stretched to fill the space.

1 iss 1 s,«flM I s™^ a-

| snetttai | „ i s„el[tai

HorizontalScrollbarVisibility.Visible

HorizontalScrollbarVisibility.Auto

1 Sneichfd [ strMriiea Sneiched

sneicbfd | f.trMdiea ,1, Streiched

HorizontalScrollbarVisibility.Hidden

HorizontalScrollbarVisibility.Disabled

Figure 3-40. HorizontalScrollBarVisibility settings with enough space

Figure 3-40. HorizontalScrollBarVisibility settings with enough space

Figure 3-41 shows the same four arrangements, but with insufficient horizontal space. The top two ScrollViewer elements have horizontal scrolling enabled, with Visible and Auto, respectively. As you would expect, the ScrollViewer has provided enough space to hold all of the content, and allows the user to scroll the hidden part into view. At the bottom left, where the horizontal scroll bar is set to Hidden, the layout behavior is the same—it has arranged the elements as though there were enough space to hold all of them. The only difference is that it has not shown a scroll bar. (Scrolling will still occur if the user uses keyboard navigation to move the focus into the hidden area.) At the bottom right, we can see that the behavior resulting from Disabled is different. Here, not only is a scroll bar not shown, but also horizontal scrolling is disabled completely. The Grid has therefore been forced to crop the buttons to fit into the available space.

HorizontalScrollbarVisibility.Visible HorizontalScrollbarVisibility.Auto

HorizontalScrollbarVisibility.Hidden HorizontalScrollbarVisibility.Disabled

Figure 3-41. HorizontalScrollBarVisibility settings with insufficient space

Was this article helpful?

0 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook


Post a comment