Applying Themes to Controls

You can easily 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, you’ll 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 should open with the MainPage.xaml file displayed in XAML view.
Place the mouse cursor between the <Grid> and</Grid> tags in XAML view. You will add the theme and control to the Grid in the next steps.

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

XAML	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>

XAML

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 will now be 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 will be added to the page and the control's tags will be added within the theme's tags in XAML view. The markup will appear similar to the following:

XAML	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>

XAML

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 you will need to add a panel, for example a Grid or StackPanel, within the theme 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.