How to Create a Custom Theme for C1Chart

The ComponentOne Chart for Silverlight and WPF comes with 12 unique themes out of the box. These themes can be applied by simply setting the Theme property. In addition to the 12 built-in themes, C1Chart is also supported in the several toolkit themes like Expression Dark, Shiny Blue, etc. But in many cases your requirements may dictate that you design a custom theme for the charts. In this blog post I will walk through creating a custom theme for C1Chart using Expression Blend 4. Here I have a WPF window containing a C1Chart. To create a custom theme it is recommended to start with one of the existing themes. The source XAML for the built-in themes ships alongside the C1Chart samples. You can find them here: C:\Users\Username\Documents\ComponentOne Samples\Studio for WPF\C1.WPF.C1Chart\Xaml\themes For Silverlight users the themes can be found at: C:\Program Files\ComponentOne\Studio for Silverlight\Help\generics.zip\C1.Silverlight.Chart\ThemesSL Add an existing theme's XAML file to your project. For example, select DuskBlue.xaml and add it to your project. Expression Blend will automatically recognize the file as a ResourceDictionary and add it to your Applications merged dictionaries collection (located in App.xaml). To apply this resource to the chart, simply assign it to the Theme property. You can easily modify the elements of the theme in the Resources tab. Expand the DuskBlue.xaml node and you'll see all of the various brushes and properties that make up this theme. This will act as a good starting point.

• C1Chart_Foreground_Brush
• C1Chart_Background_Brush
• C1Chart_Border_Brush
• C1Chart_LegendBackground_Brush
• C1Chart_LegendForeground_Brush
• C1Chart_ChartAreaBackground_Brush
• C1Chart_ChartAreaForeground_Brush
• C1Chart_ChartAreaBorder_Brush
• C1Chart_PlotAreaBackground_Brush
• C1Chart_CustomPalette (Collection of Brushes)
• C1Chart_AxisMajorGridStroke_Brush

For demonstration, let me modify the theme a little by setting the ChartAreaBackground brush to something different. To see your changes at design-time you should rebuild the project. A common part of the chart you will need to style is the color palette. This is the collection of brushes which define the plot elements. To provide your own collection of brushes simply open up the C1Chart_CustomPalette collection editor. You can define any type of Brush to be used as the custom palette items. You can use a SolidColorBrush or LinearGradientBrush for a simple design, or even use a VisualBrush for a more complex design.