Applying Themes to Controls

You can easily customize your application by applying one of the themes to your ComponentOne WPF control. Each of the themes is based on the WPF Toolkit theme. For information about each of the themes, see Available Themes. In this example, you’ll add the ShinyBlue theme to the C1DropDown control on a page.

To apply the theme, follow these 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 WPF Application. Enter a Name and Location for your project and click OK.
In the New WPF Application dialog box, leave the default settings and click OK.

A new application will be created and should open with the MainPage.xaml file displayed in XAML view.

Add a reference to the theme.

Place your cursor between the <my:C1ShinyBlue> and </my:C1ShinyBlue> tags.
In the Toolbox, double-click the C1DropDown icon to add the control to the project. The C1.WPF 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.WPF;assembly=C1.WPF" xmlns:my="clr-namespace:C1.WPF.Theming.ShinyBlue;assembly=C1.WPF.Theming.ShinyBlue"x:Class="C1WPF.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:C1ShinyBlue> <c1:C1DropDown Width="100" Height="30"></c1:C1DropDown> </my:C1ShinyBlue> </Grid> </UserControl>

XAML

Copy Code

<UserControl xmlns:c1="clr-namespace:C1.WPF;assembly=C1.WPF"
             xmlns:my="clr-namespace:C1.WPF.Theming.ShinyBlue;assembly=C1.WPF.Theming.ShinyBlue"x:Class="C1WPF.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:C1ShinyBlue>
         <c1:C1DropDown Width="100" Height="30"></c1:C1DropDown>
         </my:C1ShinyBlue>
         </Grid>
</UserControl>

What You’ve Accomplished

Run your project and observe that the C1DropDown control now appears in the ShinyBlue 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.