Your users won't get very far if they can't traverse your
application, and that's where the Silverlight navigation controls come in to save
the day. There are only a couple of controls I consider "navigation"
controls in the current Silverlight 2 beta 1, though some of the Input controls
we've already looked at (like the button) could also be used for navigation.
The controls we'll look at in this section- HyperlinkButton, ScrollBar, and
ScrollViewer- can all be used to help users navigate through
your application or navigate your content. Let's see how they work.
HyperlinkButton
The HyperlinkButton is a familiar carryover from the ASP.NET
world and it serves the primary purpose of making it easy to link to other
URLs. The HypelinkButton exposes all of the "standard" Silverlight
button properties with one key addition: the NavigateUri
property. To use the control, you can simply set this to a valid Uri and
Silverlight will automatically redirect you to that location. Listing 17 shows
a simple implementation of the HyperlinkButton. Notice that by default it
renders in blue (standard link usability on the web), but it does not underline by default (hovered or unhovered). This is
something you may want to address manually to make your Silverlight application
more user friendly on the web.
Listing 17 - Silverlight HyperlinkButton
<HyperlinkButton NavigateUri="http://www.google.com" Content="Click Me" />
The NavigateUri property cannot be used to
"navigate" to different XAML pages in your Silverlight application. If
you try to pass a relative XAML location to this property (like, let's say,
page2.xaml), Silverlight will throw an exception.
ScrollBar & ScrollViewer
The ScrollBar and ScrollViewer controls, unlike the
Hyperlink, are familiar carryovers from the WinForms world. The ScrollBar
control provides a flexible implementation of a scrollbar that you can use for
any number of purposes, not just scrolling content. In essence, it is Slider
control with RepeatButtons automatically rendered on either end of the track.
The ScrollViewer, meanwhile, is more focused on delivering support for
scrolling content. It is actually composed with ScrollBar controls internally,
so it is not adding any new scrolling features that the ScrollBar doesn't
offer. In fact, the ScrollViewer loses a few important features, like the
ScrollBar's usefull Scroll event, so make sure you pick the control that best
suits your needs.
As far as unique properties go, the ScrollBar exposes a few
important properties that enable you to control scrolling behavior. The
properties are very similar to those on the Slider control, such as Maximum, Minimum, LargeChange,
SmallChange, and Orientation.
The purpose of these properties should be pretty self-evident- set a ScrollBar
value range, the size of ScrollBar steps when clicked (large steps occur when
the track is clicked, small steps when the buttons are clicked), and the
Horizontal or Vertical orientation of the ScrollBar. More interesting is the ViewportSize property. This property allows you to tell the
ScrollBar how much of the scrollable "content" is visible so that the
"thumb" (the movable scrollbar) can be sized appropriately. The larger
that you make the ViewportSize value, the wider the thumb will be.
The ScrollBar also exposes two helpful events: OnScroll and OnValueChanged. Both of
these events allow you to respond to user interaction with the ScrollBar and
both are missing in the ScrollViewer control by default. There are ways to
"hack" these events in to the ScrollViewer, and future versions may
even expose these events by default, but for now this is one of the key
shortcomings of the ScrollViewer control.
Listing 18 shows a basic ScrollBar control with a few of its
"unique" properties set. Notice that the width of the ScrollBar's
thumb is wider than default thanks to the value supplied to ViewportSize.
Listing 18 - Silverlight ScrollBar
<ScrollBar Width="200" Orientation="Horizontal"
Maximum="200" Minimum="1" ViewportSize="50"
LargeChange="50" SmallChange="1" />
Meanwhile, the ScrollViewer control is specifically designed
to enable scrolling of content. Most Silverlight UI controls expose
ScrollViewer dependency properties, but you can also manually add a
ScrollViewer to your application. Since the ScrollViewer is dedicated to
scrolling content, it does not provide Minimum, Maximum, Large/SmallChange, or
Value properties. Instead, it provides Horizontal/VerticalScrollBarVisibility
properties that can be set to one of four values: Auto, Disabled, Hidden, or
Visible. Listing 19 shows the ScrollViewer in action with a TextBlock in the
Viewer's content area.
Listing 19 - Silverlight ScrollViewer
<ScrollViewer Width="200" Height="50"
VerticalScrollBarVisibility="Visible">
<ScrollViewer.Content>
<TextBlock TextWrapping="Wrap"
Text="Some text in a TextBlock in the ScrollViewer" />
</ScrollViewer.Content>
</ScrollViewer>
