AutoCompleteBox
The AutoCompleteBox is another interesting control that can add some very appealing style points to your application. The prototypical example of where to use an AutoCompleteBox is a textbox which represents either the departure or destination airport on an airline website. Naturally the airline doesn't want to permit users to select an airport to which it doesn't fly, so it compiles a list of valid airports from its route map. For a regional airline this list may be short enough to be contained in a ComboBox but for one of the majors (or for a consolidator such as Travelocity or Expedia), the excessive number of entries in a ComboBox can result in a highly sub-optimal user experience. This is where the AutoCompleteBox can come to the rescue.

An AutoCompleteBox generally looks like a textbox but it can be styled to look like a ComboBox.

Figure 8. An AutoCompleteBox styled to look like a ComboBox.

The AutoCompleteBox has an ItemsSource property which can be set to the collection of valid values from which the user is permitted to choose. The AutoCompleteBox can even use a Web Service call to generate a context sensitive list of alternatives to present to the user. One example illustrated in the Silverlight Toolkit Sample Collection (discussed below) involves a Web Service call to Microsoft Live Search.

In either case, once the user begins to type, a list of acceptable options appears in a drop down list. This list can be styled in any fashion that you prefer. Using multiple elements in the drop down list, as shown in the following screenshot, can be accommodated by setting the ItemTemplate property with a DataTemplate containing multiple XAML elements.

Figure 9. This screenshot shows an example of an AutoCompleteBox styled drop down list.

Not only can the AutoCompleteBox facilitate user selection from a fixed list of valid responses but it can also reduce the user's required typing if the IsTextCompletionEnabled property is set to True (the default). This option affords the familiar down arrow and tab completion procedure.

The AutoCompleteBox supports three different SearchMode options: Contains, StartsWith (the default) and StartsWithCaseSensitive. If the SearchMode property is set to Contains, matching text in the drop down list of acceptable alternatives can be styled to highlight the user entered text.

Theming
The Silverlight Toolkit introduces support for theming. There are six themes included with the first release and since the theming structure is extensible, third parties can add other themes as well.

Figure 10. Screenshot of a theming sample application.

Each theme is essentially a large XAML file containing custom modifications of the default styles and templates for many of the Silverlight controls: Button, Slider, etc. Although the raw XAML for the individual themes is available in a collection of resource dictionaries, developers normally would simply use the pre-built assemblies containing a specific theme.

You can apply a theme to anything from a single control up to your entire application element tree. Since the theme classes are ContentControls, you apply them by making the target element(s) the content of a theme instance.

The theming system is implemented using the new ImplicitStyleManager (ISM) static class. ISM mimics the implicit styling behavior built into WPF, but not yet directly implemented in Silverlight. Essentially ISM walks an element's tree of logical descendents applying a given set of styles. Since the style of a Silverlight element can only be set once in an element's lifetime, if you want to change themes dynamically at runtime, you need to recreate a fresh copy of the element tree or subtree to which the theme is applied.

Another characteristic of ISM is that it will not apply a style inside any nested UserControls that it encounters. This is demonstrated in the theming screenshot, above, where in each case the nested UserControl retains its blue border and gold background. This is because the nested UserControl lives in its own separate namescope outside the logical tree to which ISM is applying styles. Although the UserControl is in the parent's visual tree, it is not in its logical tree. If desired, one way to apply theming to a nested UserControl would be to set an additional theming container around the nested UserControl.

The Silverlight Toolkit Help File and Sample Collections
The Silverlight Toolkit download package includes a standalone help file (Silverlight Toolkit.chm). Since at any given time the Silverlight Toolkit will likely contain a significant percentage of controls which have not yet advanced to the Mature (i.e. released) state, help regarding all of these controls will not be available in the Visual Studio integrated help system. Accordingly, developers are advised to keep this standalone help file handy for convenient reference. It will also allow you to stay informed regarding new releases of the Silverlight Toolkit in order to ensure using only the most up to date help content (and of course the controls themselves).

As most experienced developers well know, one of the most efficient techniques for writing code is to mark up a good piece of sample code to tailor it to the specifics of the current task. For this reason, the authors of the Silverlight Toolkit have included a very large set of sample applications.

Figure 11. Screenshot of the Silverlight Toolkit Control Sample Collection.

This sample collection includes a lot of explanatory text in addition to extensive code examples. The sample collection is exposed both in the form of a compiled Silverlight application and as a multi-project Visual Studio solution. The compiled application is the most convenient format for learning about the various controls as the application is structured to explain each of the key elements for included controls. For additional details not described by the compiled application, one can refer to the underlying project. Overall, the sample collection represents an enormously useful structure for learning about and using the Silverlight Toolkit controls.

There is also a second collection of samples in the Silverlight Toolkit, this one devoted to charting samples.

Figure 12. Screenshot of the Silverlight Toolkit Charting Sample Collection.

The charting sample collection is organized in the same manner as the sample collection for the other Silverlight Toolkit controls.

There exists another important resource for Silverlight charting, namely the ChartBuilder application available from David Anson's Blog. This application affords a structure which allows you to experiment with different properties of the various Silverlight Toolkit charts. With live feedback, you can change a value and see exactly what impact this change has on your chart.

Figure 13. Screenshot of the ChartBuilder application illustrating how a change in any of the three textboxes on the left will be immediately reflected in the TextBlocks in the application. Of course, the same is true of the chart data as well.

Notice too how the textbox in the lower right corner of the ChartBuilder application (below the chart itself), contains the XAML which corresponds to the property value selections which you have made. Once you have designed the chart in the manner that you want, you can copy and paste the generated XAML into your own application.

Summary
The Silverlight Toolkit contains a large selection of new controls for developing Silverlight applications. Each of these controls includes full source code and an extensive set of sample applications illustrating their use.

None of the controls contained in the first release of the Silverlight Toolkit are yet in release to web (RTW) condition. A key goal of the Silverlight Toolkit is to make unfinished controls available to Silverlight developers at an early stage in order to solicit comments, suggestions and bug reports. The hope is that this will result in both a shorter development cycle and better quality controls.

While some of the controls in the Silverlight Toolkit are not particularly exciting (e.g. Label, NumericUpDown) others such as those highlighted in this article (TreeView, Charting and AutoCompleteBox) are actually very impressive. In addition, the Silverlight Toolkit includes theming support which can be very easily applied to all or any portion of Silverlight content.

Links

* This article was commissioned by and prepared for Microsoft Corporation. This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.