First Look: Silverlight 2.0 UI Controls
page 4 of 9
by Todd Anglin
Average Rating: 
Views (Total / Last 10 Days): 40934/ 104

Navigation Controls

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.


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="" 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" 
            <TextBlock TextWrapping="Wrap" 
               Text="Some text in a TextBlock in the ScrollViewer" />

View Entire Article

User Comments

Title: how to embbed images in canvas ?   
Name: andrew
Date: 2008-10-11 12:39:36 PM
Is there a way to put images in canvas based on logic ?

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-23 1:58:22 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search