First Look: Silverlight 2.0 UI Controls
page 3 of 9
by Todd Anglin
Average Rating: 
Views (Total / Last 10 Days): 41456/ 106

Input Controls

After layout controls, some of the most essential controls in any "real world" application are input controls. They are so common and so often used that we tend to forget their essential utility until they are missing. Such is the case with Silverlight 1.0, where even basic controls like buttons and textboxes are absent. Fortuantely, Silverlight 2.0 beta 1 solves that problem.

In the current beta, there is a near complete collection of input controls, including: Button, Calendar, CheckBox, DatePicker, ListBox, RadioButton, Slider, TexBox, ToggleButton, and even a WatermarkedTextBox. While this is a great start, the list is missing notable input controls common in other Microsoft platforms like a dropdownlist/combobox, rich textbox, image button, and upload control. While some of these may be added in subsequent betas, you can fully bet the 3rd party component makers, like Telerik, will fill-in the gaps.

Most of the new input controls included in Silverlight are fairly standard and will feel just like their ASP.NET and WinForms counterparts. Nonetheless, let's take a look at each so you can see what the markup looks like how each control renders in the browser.

Button & ToggleButton

One of the most basic and fundamental input controls is the button. Many applications would be rendered useless without at least one button doing something, so you'll probably end-up using this control (or controls derived from it) a lot. Listing 10 shows the basic XAML required to add a button to your Silverlight application and shows the default rendering.

Listing 10 - Default button


<Button Width="80" Content="Push Me"></Button>

Notice that the button's text is set via the Content property, not a "Text" property. This change was made to reflect the concept that a Button (or almost any Silverlight control) can render more than simple text strings. You can render almost anything on a button, including images, videos, and, of course, simple text- thus the generic "Content" property. If you want to render more complex content to a button, you can use the button's ContentTemplate, which allows you to add a layout control to the button's content area and take full control of the rendered output. This helps overcome the absence of controls like image buttons. Listing 11 shows a more complex Silverlight button implementation that uses the ContentTemplate to add a shape and some text to the button.

Listing 11 - Button ContentTemplate

<Button Width="150">
                              <ColumnDefinition Width="30"></ColumnDefinition>
                              <ColumnDefinition Width="*"></ColumnDefinition>
                              <RowDefinition Height="30"></RowDefinition>
                        <Ellipse Fill="Green" Width="15" Height="15" 
                           Grid.Column="0" Grid.Row="0"></Ellipse>
                        <TextBlock Text="Push Me" Grid.Column="1" 
                           VerticalAlignment="Center" HorizontalAlignment="Center" 

The Button control, like most Silverlight controls, also provides a ClickMode property that lets you define when a click event fires: mouse hover, mouse down, or mouse up. It's a new way for web developers to think, but familiar territory for Windows developers.

Meanwhile, the ToggleButton is simply a tri-state button control. That means it has a normal state, a clicked state, and an in-between "toggled" state. It's not very common in standard web applications, but the concept is simple to grasp. All features of the regular Silverlight Button are supported by the ToggleButton.

Calendar & DatePicker

A little more complex than a basic button, the Calendar control serves the universal purpose of helping users visualize and provide DateTime information. And directly related, the DatePicker control simply takes a Calendar and automatically attaches it to a Textbox so that it's easy for you to collect date input. The Calendar/DatePicker in Silverlight more closely resemble the rendering and features of an ASP.NET calendar than the terrible default calendar than comes with WinForms, so this territory will be more familiar for web developers than Windows developers.

The Calendar control has a number of unique properties that customize the control's behavior, including AreDatesInPastSelectable, DisplayDateEnd/Start, DisplayMode, FirstDayOfWeek, IsTodayHighlighted, and SelectableDateEnd/Start. Most of these properties expose their behavior through their naming, so little explanation is needed. The Calendar control is not as full featured as most 3rd party calendar controls currently available for other Microsoft platforms, but is a much better "basic" starting point than Microsoft has provided in the past.

Listing 12 shows a basic Silverlight Calendar in both Month and Year DisplayModes. Also shown is the Silverlight DatePicker in both collapsed and expanded states.

Listing 12 - Basic Silverlight Calendar


<Calendar DisplayMode="Month" FirstDayOfWeek="Monday"></Calendar>

<DatePicker Width="150"></DatePicker>

CheckBox & RadioButton

CheckBoxes and RadioButtons are universally recognized, common in many applications, and essential parts of the Silverlight UI control set. The Checkbox and RadioButton in Silverlight very closely resemble their HTML/ASP.NET counterparts, both in functionality and property naming. The controls share the Content property for defining the elements that will be rendered next to the checkbox/radiobutton and also share the IsThreeState property. The IsThreeState property enables the CheckBox and RadioButton to operate as tri-state controls, similar to the functionality of the ToggleButton.

The CheckBox has one unique property called IsChecked. Just as in ASP.NET, this property enables you to programmatically set the checkbox's selected state. Meanwhile, the RadioButton has the unique GroupName property, which is used to define which radiobuttons will be toggled when a selection is made. Listing 13 shows both of these controls and their default rendering.

Listing 13 - Silverlight CheckBox and RadioButton

<CheckBox IsChecked="True" IsThreeState="True" Content="Checkbox" />
<RadioButton GroupName="rb" Content="RadioBtn1" />
<RadioButton GroupName="rb" Content="RadioBtn2" />


The ListBox control is a very flexible UI control in Silverlight that makes it easy to display lists of data. It is similar to the ASP.NET ListBox, but much more flexible thanks to Silverlight's XAML underpinnings that allow anything to be rendered in each list item (via the ContentTemplate property). The ListBox accepts a collection of ListBoxItems to define items, and it will automatically render scrollbars if the content is larger than the ListBox dimensions. Listing 14 shows the ListBox in action.

Listing 14 - Silverlight ListBox

<ListBox Width="150" Height="80">
      <ListBoxItem Content="Item 1" />
      <ListBoxItem Content="Item 2" />
      <ListBoxItem Content="Item 3" />
      <ListBoxItem Content="Item 4" />
      <ListBoxItem Content="Item 5" />
      <ListBoxItem Content="Item 6" />

If you are binding data to your ListBox control, you bing the collection to the ItemSource property (similar to the DataSource property on ASP.NET controls). The collection can be anything that implements IEnumerable, so the binding support is very flexible. You can also use the SelectedItem and SelectedIndex properties to identify items that users select.


Slider is not a standard control in the ASP.NET developers default toolbox, though many free and 3rd party implementations exist to fill the gap. With Silverlight, the tool is built-in to the platform and immediately at your disposal.

As far as the implementation goes, it's a pretty standard control with support for vertical and horizontal rendering, setting minor and major ticks, and setting slider range values. The most serious missing "feature" is support for the mouse scroll wheel, though technically, that's a Silverlight platform problem (Silverlight doesn't currently support the scroll wheel, though workarounds do exist). Hopefully future versions of the platform will fix this problem. In the mean time, keyboard support abounds and the control's rich event model will enable you to do a lot of fun things in the browser.

Listing 15 shows the default Slider control rendering. You can click and drag the slider, click anywhere on the slider "bar", or use the keyboard to change the slider's value.


Listing 15 - Silverlight Slider

<Slider IsDirectionReversed="True" Width="200" 
      SmallChange="10" LargeChange="20" 
      Minimum="0" Maximum="100" />

Some of the Slider's unique properties are illustrated in Listing 15, such as SmallChange, LargeChange, Minimum, and Maximum. The Min and Max properties obviously set the value range that the slider represents, and the Change properties dictate how many units the slider will move per interaction. Clicking on the Slider track will trigger a "large" change; using the keyboard will trigger "small" changes.

TextBox & WatermarkedTextBox

Controls don't get much more basic than a TextBox (a rectangle that accepts text), and Silverlight doesn't do much to innovate on the tried and true basic. There are two flavors of TextBox in Silverlight 2 beta 1: regular and watermarked. Both share the exact same feature set with the key exception that the WatermarkedTextBox has an extra Watermark property.

The only unique feature of the current TextBox is that it now supports line breaks, so you can employ a simple multi-line textbox. Other than that, there is no rich text editing support provided with the current textbox controls. This could present a real challenge for web scenarios where developers are used to working with formatted HTML.

Listing 16 shows both variants of the Silverlight textboxes and the required XAML.

Listing 16 - Silverlight Textbox and WatermarkedTextBox

<TextBox Text="Some text" Width="200" />
<WatermarkedTextBox Watermark="Enter text" Width="200" />

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-02-25 3:44:49 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search