Wahlin on .NET

Silverlight 2 User Input Controls

Dan shows you the basics of using Silverlight's user input controls to give users a richer experience when they enter data.

• By Dan Wahlin
• 09/15/2008

The question I'm often asked with regard to Silverlight 2's input controls is, "Why are they needed?" After all, HTML already has user input capabilities and there are plenty of applications that can be built to run directly on an end user's machine using Windows Forms or WPF.

If you're satisfied with what HTML controls give you, then stick with them. There's no reason to move to a new technology if you don't currently have a problem to solve. However, if you're looking to deploy rich, desktop-style applications without requiring the .NET Framework on a client machine, then the controls Silverlight 2 offers will get the job done in many cases. By deploying Silverlight 2 applications, you can minimize deployment headaches while still providing end users with a rich data input application.

Silverlight 2 provides several different types of controls for collecting and working with user input:

• TextBox Control
• PasswordBox Control
• Button Control
• HyperLinkButton Control
• Checkbox Control
• RadioButton Control
• RepeatButton Control
• Slider Control
• Calendar Control
• DatePicker Control

In addition to the standard user input controls, several types of "items" controls are also available such a DataGrid and ComboBox. The ComboBox control is similar to the ASP.NET DropDownList control. All of the controls can be defined declaratively in XAML or programmatically using C# or VB.NET.

Capturing Data with the TextBox Control
The TextBox control looks and acts much like the TextBox control found in ASP.NET and Windows Forms. An example of using a TextBlock and TextBox together is shown below:

<TextBlock Text="City" Margin="7,5,0,0"
  Grid.Row="0" Grid.Column="0" />
<TextBox x:Name="txtCity" Text="Phoenix"
SelectionForeground="White" 
  SelectionBackground="Navy" FontFamily="Arial" 
  Width="200" Height="20"   
  Margin="5" Grid.Row="0" Grid.Column="1"
  HorizontalAlignment="Left" />

This code places the TextBlock control (a type of label control) into a Grid's first column and first row while the TextBox is placed in the Grid control's second column and first row. Additional details about using the Grid control can be found here.

The TextBox control can also accept carriage returns and act like the standard HTML TextArea tag by setting its AcceptsReturn property to true and its VerticalScrollBarVisibility property to Visible:

<TextBox x:Name="tbComments" AcceptsReturn="True"   
  VerticalScrollBarVisibility="Visible" 
  FontFamily="Arial" Width="300" 
     Height="100" Margin="5" />

In cases where users need to log in to a Silverlight application, the PasswordTextBox control can be used:

<PasswordBox x:Name=
      "pbPassword" MaxLength="64" 
  PasswordChar="*" PasswordChanged=
      "PasswordChangedHandler"  />

While I would've preferred to have a masking property added to the standard TextBox control, releasing the PasswordTextBox control for Silverlight 2 keeps it in line with WPF, which is a smart move in the long-run.

Fixed Value Selection Controls
In addition to TextArea and TextBox controls, Silverlight 2 also provides several fixed value selection controls such as the CheckBox, RadioButton and Slider controls. Each of these controls acts like you would expect by restricting end user selection to specific values. An example of using multiple RadioButton controls is shown here:

<StackPanel Orientation="Horizontal"
   Grid.Row="2" Grid.Column="1">
    <RadioButton x:Name="rdoMale" 
      Content="Male"  Margin="5" />
    <RadioButton x:Name="rdoFemale" 
      Content="Female"  />
</StackPanel>

A Slider control is also quite simple to define in XAML:

<Slider  x:Name="slider" Orientation="Vertical"
   Minimum="0" Maximum="3" 
 Margin="5"  Width="150" ValueChanged=
   "slider_ValueChanged" />

As the Slider control's value changes, an event handler named slider_ValueChanged is called that updates a TextBlock, as shown here:

private void slider_ValueChanged(object sender, 
  RoutedPropertyChangedEventArgs<double> e)
{
    int rating = (int)Math.Round(e.NewValue);
    this.tbSliderVal.Text = 
    Convert.ToString((Rating)rating);
}

This example, taken from the upcoming Professional Silverlight 2 for ASP.NET Developers, rounds the value in the event argument parameter's NewValue property using the Math.Round method (note that the OldValue property can also be accessed in cases where you need to know the previous value). It then converts the value to a Rating enumeration member and displays the result in a TextBlock. The Rating enumeration is shown here:

public enum Rating
{
    Bad,
    Average,
    Good,
    Excellent
}

Figure 1 shows an example of the Slider control in action.

Date Selection
Selecting dates is common in many applications. While selecting dates from a calendar isn't built into HTML, that functionality can be added quite easily using a variety of AJAX-enabled objects available on the Web such as the ASP.NET AJAX Toolkit's Calendar control.

Silverlight 2 has built-in date selection capabilities exposed through the Calendar and DatePicker controls. Although I'll provide additional details about these controls in future articles, an example of using the Calendar control is shown next:

<my:Calendar x:Name="calBizWeek" 
  SelectionMode="SingleRange" 
  HorizontalAlignment="Left" />

The output rendered by Silverlight is shown in Figure 2.

The Calendar control resides in the System.Windows.Controls assembly which isn't automatically included in Silverlight applications. After referencing the assembly in a Silverlight project, it can be used in a XAML file by defining a custom XML namespace at the top of the file as shown next.

<UserControl 
  xmlns:my="clr-namespace:System.Windows.Controls;
  assembly=System.Windows.Controls. Extended"  
  x:Class="UserInputControls.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/
   xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
>

</UserControl>

The "my" namespace shown here references the Calendar control's namespace as well as assembly.

Last But Not Least...
No application would be complete without a button! Silverlight 2 provides a built-in Button control that can be used to submit forms or perform other actions. The Button control can be defined much like an ASP.NET Button control:

<Button x:Name="btnSubmit" Click="btnSubmit_Click" 
   Content="Submit" 
 Height="30" Width="75" Margin="7" />

Notice that the Button's text value is defined using the Content property as opposed to the Text property used in ASP.NET. That subtle change takes a little time to get used to when you first start with Silverlight (at least, it did for me) but is consistent with WPF. As with any Button, an event handler can be defined to handle the Click event. Here's an example of an event handler named btnSubmit_Click:

private void btnSubmit_Click(object sender, 
   RoutedEventArgs e)
{
    //Perform action here
}

In this article you've seen a few of the user input controls that Silverlight 2 provides. In future articles I'll provide additional details about using some of these controls.