3.4. ScrollViewer Controls
ListBox controls provide a very useful way
of scrolling up and down through a list of items. Sometimes you will
want a layout that is more flexible than the ListBox, but
that is still too large to display all at once and requires the ability
to scroll. None of the container controls that we have seen so far has
any scrolling capability at all because it is provided instead by the ScrollViewer control.
ScrollViewer controls will take into account the size of the control that is placed inside them, and if it is larger than the ScrollViewer,
then automatic scrolling facilities will be made available to allow the
user to access the parts of the contained control that would otherwise
be out of view. Only a single control can be directly contained within
a ScrollViewer, but by using a Grid, StackPanel, or Canvas as that control, we can then place additional child controls indirectly into the ScrollViewer, too.
The ScrollViewer contains a StackPanel whose Width and Height have both been set to Auto so that they automatically expand to match the sizes of the controls contained within. Eight Button controls have then been placed into the StackPanel, causing it to grow much larger than the ScrollViewer that contains it.
When the project is launched, the first five buttons are visible because they fit within the area defined for the ScrollViewer. The remaining buttons are still accessible, however, by dragging the area inside the ScrollViewer.
It is actually very tolerant of where we initiate the drag: even if you
start dragging within one of the buttons, it will still understand the
gesture and begin scrolling its contents.
Figure 19 shows the ScrollViewerExample project with its StackPanel partly scrolled. The scrollbar on the right indicates the position through the overall extent of the StackPanel.
The ScrollViewer can be controlled using its HorizontalScrollBarVisible and VerticalScrollBarVisible properties. Each of these can be set to Disabled, Auto, Hidden, or Visible; and by default it is set to Auto for vertical scrolling and Disabled for horizontal scrolling.
Setting one of these properties to Auto or Visible will enable scrolling in that particular direction. On desktop Silverlight apps, Auto will cause the scrollbar to appear only when it is actually needed, whereas Visible
will display it all the time; but in Windows Phone 7, the scrollbar
always appears just when it is actually being scrolled. If the
scrollbar is set to Disabled, scrolling in that direction will be switched off, even if the content is large enough to allow scrolling. Finally, Hidden scrollbars allow scrolling, but don't display a scrollbar.
3.5. Border Controls
The final control that we will look at is a simple
one. Many of the other controls we have seen support a background color
or a border, but they are not supported in all instances. The TextBlock,
for example, offers neither of these properties. Any time we find a
need for a background or border, but the control we need it for does
not provide it, we can place that control into a Border.
Border controls allow a single child
control to be placed inside them and can then set a background color
behind it and a border around it.
The border thickness can be set independently for each of its four edges. The BorderThickness
property can be given a single number (which it will use for all
edges), two numbers (the first will apply to the left and right edge;
the second applies to the top and bottom) or four numbers (for the
left, top, right, and bottom edges), separated by spaces or commas.
The control can also display rounded corners using the CornerRadius property.
While the Border can be defined with a Width and Height
if you want, it is also possible to omit both of these properties from
its definition. When the control is configured in this way, it will
exactly match itself to the control that is contained within it.
4. User Interface Design
Clearly there is an enormous amount of complexity
and flexibility in the Silverlight page designs. Because Silverlight's
original environment was inside a web browser, some of those functions
are not appropriate or do not function properly on Windows Phone 7
devices. The vast majority performs exactly as expected, however,
providing enormous potential for flexible UIs and game configurations.
If you are unsure about how a control should be
presented or what its features are, Microsoft has released a User
Interface Design and Interaction Guide document that might well provide
answers or inspiration. You can visit http://go.microsoft.com/?linkid=9713252 to download it as a PDF file.
