Net
pala
ntir

When I first saw the new Silverlight Application (JetPack) themes I immediately tried to applied them, as they are supposed to allow to customize the appearance of Silverlight with little effort and consistent result.

Unfortunately, documentation on the topic is shamelessly scarce, so it is quite difficult to figure out how to actually use them.

Other resources:

• Download page at Microsoft
• JetPack live preview
• Other styles included in the package

There are two ways to do so: one is the pre-packaged templates for Visual Studio and Blend. This is easy enough. But how about applying a theme to an existing project without breaking anything?

Here are the steps I followed to do it.

1. Download the assets

Get the assets files and unpack them on any directory on your disk.

Or just get the templates (you know you will need them on any future projects, so it's not wasted space!) and install them as the instructions in the package say. Then create a new project using the appropriate template and copy the assets from there. A bonus is that if something does not quite compile, you can have a look at a working example and try to spot the differences.

2. Copy assets

Create an Assets directory on the top level of your Silverlight project, and copy the assets there. You should have the following files in the Assets directory: Brushesh.xaml, CoreStyles.xaml, Fonts.xaml, SDKStyles.xaml, Styles.xaml and Toolkit.xaml.

3. Setup App.xaml

Now open App.xaml in markup mode. You will need to check it in two points: the initial namespaces and the Resources. Here is what I ended up with:

<Application   
  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" 
  x:Class="Picinque.App"
  mc:Ignorable="d">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Assets/Brushes.xaml"/>
        <ResourceDictionary Source="Assets/Fonts.xaml"/>
        <ResourceDictionary Source="Assets/CoreStyles.xaml"/>
        <ResourceDictionary Source="Assets/Styles.xaml"/>
        <ResourceDictionary Source="Assets/SdkStyles.xaml"/>
        <ResourceDictionary Source="Assets/ToolkitStyles.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

4. Check References

Now you need to get all the references right. You need to have the following ones for this to work:

• System.Windows.Controls
• System.Windows.Controls.Data
• System.Windows.Controls.Data.DataForm.Toolkit
• System.Windows.Controls.Data.Input
• System.Windows.Controls.Data.Tolkit
• System.Windows.Controls.DataVisualization.Toolkit
• System.Windows.Controls.Input
• System.Windows.Controls.Input.Toolkit
• System.Windows.Controls.Layout.Toolkit
• System.Windows.Controls.Navigation
• System.Windows.Controls.Theming.Toolkit
• System.Windows.Controls.Toolkit
• System.Windows.Controls.Toolkit.Internals

Not all of them may be necessary, but if you get messages similar to the following one, then you are missing references and you should check them: "Error 1 The tag 'ButtonSpinner' does not exist in XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit'.";

5. Compile it

For this to be reliable, use Build - Rebuild solution.

6. Style it

Some of the controls will already have the new styles, but some others will not. Now it is the time to style everything. Here are some things to keep in mind:

* The theme provides a lot of resources for you to use in brushes, colors and styles.

* To apply a brush, select the color parameter you want to change, and select the last tab of the brush editor, which lists local brush resources. This will give you consistency in colors. Try using only those, and keep custom colors to a minimum.

* To apply a style resource, you select the element (eg. a TextBox), and click on the square next to the Style property in the Miscellaneous section of the Properties window, then you select Local Resource: all the styles that can be applied to that type are listed here.

* TextBoxes come in two flavors, the light one (default) and the dark one. To have a TextBox appear dark, you can either use the DarkTextBox control from the toolbar, or apply the DarkTextBox style.

* Buttons come in several flavors (normal, green, orange, ...) and the way to apply them is the same.

* If you want to set the default fonts for the entire application without having to apply the styles for the basic layout elements, it is sufficient to select the UserControl of the MainPage, navigate to the Text section of the properties window and bind the font and the font size to the DefaultFontFamily and DefaultFontSize Local Resources In the next episode, we'll be taking about expanding this app to use the Navigation pattern. Stay tuned!