Yesterday we talked about charting controls in Silverlight in our
31 Days of Silverlight series. These were part of the
Silverlight Toolkit, and today, we're going to focus on another useful feature of the Silverlight Toolkit, the AutoComplete TextBox. This will be a relatively short tutorial, only because it's simple to do, but I think this is one of the more useful things you can start using today in your applications.
Make sure you've got the Silverlight Toolkit
This is your last reminder. After today, you're on your own. :)
You can download the Silverlight 3 Toolkit here.
AutoComplete?
For those of you that might be unfamiliar with what an AutoComplete TextBox is, think of the little search box on your browser. When you type search terms in, it starts recommending choices that match what you have typed. This type of control is extremely valuable when you want the user to pick a specific value, but have way too many choices for a standard select list. An AutoCompleteBox allows a user the freedom of typing, while still choosing from a pre-determined list of values. This type of control is so important, I have also written an article on
Creating An AutoComplete TextBox with AJAX.
Our good friend User Input Form
He's back, and we're using him again. This time, I have swapped out the TextBox for City and State for an AutoCompleteBox control. You'll also notice that I had to add an extra namespace to the top of my XAML for this to be included: System.Windows.Controls. Here's the XAML:
<UserControl xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" x:Class="SilverlightAutoComplete.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="White" Height="300" Width="400">
<Grid.Projection>
<PlaneProjection CenterOfRotationX="0" CenterOfRotationY="0"/>
</Grid.Projection>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.445*" />
<ColumnDefinition Width="0.555*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<TextBlock Text="First Name:" Grid.Row="0" Style="{StaticResource FormLabel}" />
<TextBlock Text="Last Name:" Grid.Row="1" Style="{StaticResource FormLabel}" />
<TextBlock Text="Address:" Grid.Row="2" Style="{StaticResource FormLabel}" />
<TextBlock Text="City, State:" Grid.Row="3" Style="{StaticResource FormLabel}" />
<TextBlock Text="Email Address:" Grid.Row="4" Style="{StaticResource FormLabel}" FontWeight="Bold" />
<TextBox x:Name="FirstName" Text="Jeff" Grid.Row="0" Style="{StaticResource TextBox}" Margin="0,13,0,12" />
<TextBox x:Name="LastName" Text="Blankenburg" Grid.Row="1" Style="{StaticResource TextBox}" Margin="0,13,0,12" />
<TextBox x:Name="Address" Text="8800 Lyra Ave. #400" Grid.Row="2" Style="{StaticResource TextBox}" Margin="0,13,0,12" />
<input:AutoCompleteBox x:Name="CitiesBox" Text="" Grid.Row="3" HorizontalAlignment="Left" Height="25" Width="190" Grid.Column="1" Margin="0,13,0,12" />
<TextBox x:Name="Email" Text="" Grid.Row="4" Style="{StaticResource TextBox}" Margin="0,13,0,12" />
<Button x:Name="Clicky" Content="Submit" Grid.Column="1" Grid.Row="5" Height="25" Width="100" HorizontalAlignment="Left" Margin="0,13,0,12" d:LayoutOverrides="HorizontalAlignment" />
</Grid>
</UserControl>
Adding our "preset" options
Setting up a list of data for the AutoCompleteBox to use is as simple as it gets. Remember our data binding example from Day #13? We can do it that way. We can also do it from code, and to keep this simple, that's exactly what I will do in this example. I am just going to set the ItemsSource to an array of Strings. That's it. The control takes care of EVERYTHING else. Here's my code-behind:
using System;
using System.Windows.Controls;
namespace SilverlightAutoComplete
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
CitiesBox.ItemsSource = new String[]
{"Cleveland, OH", "Columbus, OH", "Cincinnati, OH", "Detroit, MI", "Grand Rapids, MI", "Lansing, MI", "Ann Arbor, MI", "Louisville, KY", "Lexington, KY", "Memphis, TN", "Nashville, TN", "Chattanooga, TN", "Knoxville, TN"};
}
}
}
Summary
It may seem simple, but I wanted to make sure that you were specifically aware of this option when building Silverlight applications. It's a highly useful, and highly user-friendly way to accept input. You could even go so far as to bind the list to a set of data returned from a web service. (See my AJAX example for that.) Our simple example is running below. Try typing the name of a major city from Michigan, Ohio, Kentucky, or Tennessee. If you can't see it, you can
click here to see the Silverlight AutoCompleteBox example.
You can also download the AutoCompleteBox example code here.
Labels: 31 days of Silverlight, Silverlight, tutorial
