Getting Started with ComponentOne Studio WPF Edition
Theming / Applying Themes to Controls
In This Topic
    Applying Themes to Controls
    In This Topic

    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:

    1. In Visual Studio, select File | New Project.
    2. 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.
    3. 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.

    1. Add a reference to the theme.       
    1. Place your cursor between the <my:C1ShinyBlue> and </my:C1ShinyBlue> tags.
    2. 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>
    

     

    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.

    See Also