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">
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<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"
Margin="5"></TextBlock>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
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" />
ListBox
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" />
</ListBox>
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
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" />
