Scheduler for WPF and Silverlight | ComponentOne
Scheduler Components and Controls / Scheduler for Silverlight Appearance / C1Scheduler WPF Themes / Creating a Custom Theme / Creating the Theme Pack
In This Topic
    Creating the Theme Pack
    In This Topic

    To create your own theme pack, create a new Visual Studio 2008 project and include one or more theme ResourceDictionaries.

    1. From the File menu in Visual Studio 2008, select New Project. The New Project dialog box appears.
    2. Select WPF User Control Library from the list of Templates. Note that this option will appear for the Windows node of Visual Basic or C# Project types.  
    3. Enter a project location and name, C1SchedulerThemePack, for example, and click OK.
    4. In the SolutionExplorer, right click the UserControl1.xaml file, select Delete from the menu, and click OK.
    5. Add a reference to the C1.WPF.Schedule.dll assembly.
    6. In the SolutionExplorer, right click the project name, click Add | New Folder and name this folder themes.
    7. Right-click the themes folder and select Add | Resource Dictionary.
    8. Enter generic.xaml in the Name text box and click Add.
    9. Right-click the themes folder again and select Add | Resource Dictionary.
    10. Enter MyTheme.xaml in the Name text box and click Add.
    11. Open the MyTheme.xaml file and add namespace declarations inside the opening ResourceDictionary tag so it looks similar to the following:

      XAML
      Copy Code
      <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule"
      xmlns:storage="clr-namespace:C1.C1Schedule;assembly=C1.WPF.Schedule"
      xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="PresentationOptions">
      

    12. If you want to redefine only part of the default theme, add the source theme definition to your ResourceDictionary.MergedDictionaries collection like in the following XAML:

      XAML
      Copy Code
      <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary
      Source="/C1.WPF.C1Schedule;component/themes/SchedulerThemes/Office2007/Blue.xaml" />
      </ResourceDictionary.MergedDictionaries>
      

    13. Add the brush definitions you want to redefine. Add the brushes definitions you want to redefine. For example, use the following XAML:

      XAML
      Copy Code
      <SolidColorBrush x:Key="AlternateMonthBrush" Color="#08FFFFFF"
      PresentationOptions:Freeze="true"/>
      <SolidColorBrush x:Key="AllDayAreaBrush" Color="#11FFFFFF"
      PresentationOptions:Freeze="true"/>
      <SolidColorBrush x:Key="Background" Color="#FF111111" PresentationOptions:Freeze="true"/>
      <SolidColorBrush x:Key="BorderBrush" Color="#000B0B0B" PresentationOptions:Freeze="true"/>
      <SolidColorBrush x:Key="WorkHourBrush" Color="#FF303030" PresentationOptions:Freeze="true"/>
      

    14. Override styles and templates defined in the included dictionary. For example, use the following XAML:

      XAML
      Copy Code
      <!-- determines the style of the month grid header (week day names) -->
      <Style x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:C1Scheduler},
            ResourceId=MonthHeaderStyle}" TargetType="{x:Type ContentControl}">
            <Setter Property="Template">
                  <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ContentControl}">
                              <Grid>
                                    <Border BorderThickness="0,0,1px,0"
      BorderBrush="{Binding RelativeSource={RelativeSource
      AncestorType={x:Type local:C1Scheduler}},
                                          Path=Theme[ControlAreaLinesBrush]}"
      SnapsToDevicePixels="True"
      Background="{Binding RelativeSource={RelativeSource
      AncestorType={x:Type local:C1Scheduler}},
                                          Path=Theme[ControlAreaBrush]}" />
                                    <ContentPresenter TextBlock.Foreground="Red" Margin="0,2,0,2"
                                          Content="{TemplateBinding Content}"
                                          HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Grid>
                              </ControlTemplate>
                        </Setter.Value>
                  </Setter>
            </Style>
      

    15. Save your changes. Note that this XAML will not work correctly until the ComponentResourceKey for the new theme is added to the generic.xaml file in the following steps.
    16. Open generic.xaml file and add the following namespace declaration inside the opening ResourceDictionary tag:        
      xmlns:local="clr-namespace:C1.WPF.Schedule;assembly=C1.WPF.Schedule"
      
    17. Add the ComponentResourceKey for the new theme to the generic.xaml file using the following XAML:

      XAML
      Copy Code
      <ResourceDictionary x:Key="{ComponentResourceKey
      TypeInTargetAssembly={x:Type local:C1Scheduler}, ResourceId=MyTheme}"
      Source="/C1SchedulerThemePack;component/themes/MyTheme.xaml" />
      

    18. Save all changes and click select Build | Build C1SchedulerThemePack to build your theme assembly.        

      Tip: If you want to create a theme with a number of colors, such as Office 2007 Blue, Silver and Black, place the full theme definition into a single file and use this for one color. Then add this file as a merged resource dictionary into the ResourceDictionaries for the other colors, and redefine the colors (Brush resources) only. Create ComponentResourceKeys for each color in the generic.xaml file.