Applying Themes to Controls

Customize your application by applying one of the built-in themes to your ComponentOne Silverlight control. Each of the built-in themes is based on a Silverlight Toolkit theme. For information about each of the built-in themes, see Available Themes. In this example, we add the RainierOrange theme to the C1DropDown control on a page.

To apply the theme, complete the following steps:

In Visual Studio, select File | New Project.
In the New Project dialog box, select the language in the left pane, and in the right-pane select Silverlight Application.
Enter a Name and Location for your project and click OK.
In the New Silverlight Application dialog box, leave the default settings and click OK.
A new application is created and opens with the MainPage.xaml file displayed in XAML view.
Place the mouse cursor between the <Grid> and</Grid> tags in XAML view.

Navigate to the Visual Studio Toolbox and double-click on the C1ThemeRanierOrange icon to declare the theme. The theme's namespace is added to the page and the theme's tags are added to the Grid in XAML view. The markup appears similar to the following:

	Copy Code
<UserControl xmlns:my="clr-namespace:C1.Silverlight.Theming.RainierOrange;assembly=C1.Silverlight.Theming.RainierOrange" x:Class="C1Silverlight.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"> <my:C1ThemeRainierOrange></my:C1ThemeRainierOrange> </Grid> </UserControl>

Copy Code

<UserControl
xmlns:my="clr-namespace:C1.Silverlight.Theming.RainierOrange;assembly=C1.Silverlight.Theming.RainierOrange" 
x:Class="C1Silverlight.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"> 
 <my:C1ThemeRainierOrange></my:C1ThemeRainierOrange> 
   </Grid> 
 </UserControl>

Any controls that you add within the theme's tags are themed.

Place your cursor between the <my:C1ThemeRanierOrange> and </my:C1ThemeRanierOrange> tags.

In the Toolbox, double-click the C1DropDown icon to add the control to the project. The C1.Silverlight namespace is added to the page and the control's tags are added within the theme's tags in XAML view. The markup appears similar to the following:

	Copy Code
<UserControl xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" xmlns:my="clr-namespace:C1.Silverlight.Theming.RainierOrange;assembly=C1.Silverlight.Theming.RainierOrange" x:Class="C1Silverlight.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"> <my:C1ThemeRainierOrange> <c1:C1DropDown Width="100" Height="30"></c1:C1DropDown> </my:C1ThemeRainierOrange> </Grid> </UserControl>

Copy Code

<UserControl 
xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" 
xmlns:my="clr-namespace:C1.Silverlight.Theming.RainierOrange;assembly=C1.Silverlight.Theming.RainierOrange" 
x:Class="C1Silverlight.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"> 
 <my:C1ThemeRainierOrange> 
     <c1:C1DropDown Width="100" Height="30"></c1:C1DropDown> 
 </my:C1ThemeRainierOrange> 
   </Grid> 
 </UserControl>

What You’ve Accomplished

Run your project and observe that the C1DropDown control now appears in the RainierOrange theme. Note that you can only set the Content property on the theme once, so to theme multiple controls using this method, add a panel within the theme, for example a Grid or StackPanel, and then add multiple controls within the panel.

You can also use the ImplicitStyleManager to theme all controls of a particular type. For more information, see Using the ImplicitStyleManager.