Silverlight Toolkit Overview and Samples

Controls are where it’s at these days in the programming world. By using them you maximize re-use, enhance productivity and avoid building custom functionality. Plus, when you need a control to do something different you can always extend it rather than writing everything from scratch.

If you’ve used ASP.NET AJAX then you’ve likely used controls from toolkits such as the ASP.NET AJAX Control Toolkit in your applications. Microsoft has also released a Silverlight Toolkit with new controls and functionality that can be used in Silverlight 2 applications. The controls are grouped into “quality bands” with the existing controls currently fitting into either the “Preview” or “Stable” bands. Additional information about quality bands and the toolkit controls can be found on Shawn Burke’s blog.

Controls included in the Silverlight Toolkit include:

  • AutoCompleteBox
  • ButtonSpinner
  • Chart
  • DockPanel
  • Expander
  • HeaderedItemControl
  • HeaderedContentControl
  • ImplicitStyleManager
  • Label
  • NumericUpDown
  • TreeView
  • ViewBox
  • WrapPanel

The new controls live in the Microsoft.Windows.Controls.dll assembly which contains several namespaces such as Microsoft.Windows.Controls (where most of the controls live) and Microsoft.Windows.Controls.DataVisualization.Charting (where the charting control and related classes live). To get started using them you’ll need to reference the Microsoft.Windows.Controls assembly provided in the toolkit and then add the controls to your Visual Studio 2008 Toolbox by right-clicking on it and selecting “Choose Items”. Select the Silverlight Components tab, browse to the assembly and then check the checkbox next to the controls you’d like to add and then drag them into a Silverlight 2 XAML file. This will add the proper namespace onto the UserControl root element as shown next:


    

In this post I’ll discuss a few of the new controls that I personally find quite useful and show what they’re are capable of doing. Future posts will drill into different controls and demonstrate additional details about how they can be used.

Managing Silverlight Styles with ImplicitStyleManager

In a previous post I wrote about how styles can be defined and assigned to controls. While the default technique of defining and applying styles works, it certainly can be a pain to add Style=”{StaticResource YourStyleKey}” to all of the controls needing to pick-up a specific style in an application. WPF provides a way to “implicitly” apply styles to controls but this functionality isn’t available in Silverlight 2 unfortunately. Enter the ImplicitStyleManager provided by the Silverlight Toolkit. By using ImplicitStyleManager styles that target a specific control type can be applied without manually adding a Style attribute to each control. The class lives in the Microsoft.Windows.Controls.Theming namespace (Microsoft.Windows.Controls assembly) which needs to be referenced in the XAML file as shown next:

xmlns:theming="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming"
>

Here’s an example of using ImplicitStyleManager within a control that has styles defined locally within its Resources section:


    
        
            
            
        
        
            

This example applies the styles to the appropriate controls (a Button and a TextBox in this case) automatically. The theming:ImplicitStyleManager.ApplyMode attribute makes this possible. Looking at the control definitions in the StackPanel you’ll see that no Style attribute is added. Instead, the styles are “implicitly” applied based on the Style element’s TargetType. You may also note that no x:Key is defined on the Style elements since it’s not needed.

ImplicitStyleManager can also be used to apply styles defined in a theme file (a XAML file containing a ResourceDictionary section) as shown next:


    
        

A portion of the CustomTheme.xaml file referenced by the code above is shown next:


   
    


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP Like Button Plugin by Free WordPress Templates