WPF Charting Documentation - SciChart WPF Charts SDK v5.x
Creating a Custom Theme

Custom Theme

As well as built in themes provided by the ThemeManager, in SciChart you can also define your own custom theme.

Defining your own Theme ResourceDictionary

You will need to create a ResourceDictionary with the following brushes and colors.

NOTE: Ensure you have the x:Class= attribute. This is necessary to have a partial class in C# and allow you to create an instance of the ResourceDictionary.

 

Defining your own Theme ResourceDictionary
Copy Code
<ResourceDictionary x:Class="WpfApplication1.MyCustomTheme"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  *******************************************************  -->
    <!--  Colors and Brushes for SciChartv4Dark.xaml               -->
    <!--  *******************************************************  -->

    <!--  Chart Brushes  -->

    <SolidColorBrush x:Key="SciChartBackground" Color="#1c1c1e"/>
    <SolidColorBrush x:Key="GridBorderBrush" Color="#5a5b5b" />
    <Color x:Key="AxisBandsFill">#E1202123</Color>
    <SolidColorBrush x:Key="TickTextBrush" Color="#A6A7AC" />
    <SolidColorBrush x:Key="MajorGridLineBrush" Color="#323539" />
    <SolidColorBrush x:Key="MinorGridLineBrush" Color="#232426" />
    <SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent" />

    <!-- Modifier Brushes -->
    <SolidColorBrush x:Key="RolloverLineBrush" Color="#3342b649" />
    <SolidColorBrush x:Key="CursorLineBrush" Color="#9942b649" />
    <SolidColorBrush x:Key="RubberBandFill" Color="#3342b649" />
    <SolidColorBrush x:Key="RubberBandStrokeBrush" Color="#7742b649" />
   
    <!-- Legend Brushes -->
    <SolidColorBrush x:Key="LegendBackgroundBrush" Color="#1D2C35" />
    <SolidColorBrush x:Key="LabelBackgroundBrush" Color="#AA42b649" />
    <SolidColorBrush x:Key="LabelBorderBrush" Color="#FF42b649" />
    <SolidColorBrush x:Key="LabelForegroundBrush" Color="#EEEEEE" />

    <!-- Annotation Brushes -->
    <SolidColorBrush x:Key="TextAnnotationForeground" Color="#EEEEEE" />
    <SolidColorBrush x:Key="TextAnnotationBackground" Color="#AA42b649" />

    <!-- Scrollbar Brushes -->
    <Brush x:Key="OverviewFill">#BB262728</Brush>
    <Brush x:Key="ScrollbarBackgroundBrush">#262728</Brush>
    <Brush x:Key="ScrollbarBorderBrush">#121212</Brush>
    <Brush x:Key="ScrollbarGripsBackgroundBrush">#535353</Brush>
    <Brush x:Key="ScrollbarViewportBackgroundBrush">#222222</Brush>
    <Brush x:Key="ScrollbarViewportBorderBrush">#232323</Brush>
   
    <!--  Default Series Colors  -->
    <Color x:Key="UpWickColor">#FF52CC54</Color>
    <Color x:Key="DownWickColor">#FFE26565</Color>
    <SolidColorBrush x:Key="UpBodyBrush" Color="#A052CC54" />
    <SolidColorBrush x:Key="DownBodyBrush" Color="#D0E26565" />
    <Color x:Key="UpBandSeriesLineColor">#FF52CC54</Color>
    <Color x:Key="DownBandSeriesLineColor">#FFE26565</Color>
    <Color x:Key="UpBandSeriesFillColor">#9052CC54</Color>
    <Color x:Key="DownBandSeriesFillColor">#A0E26565</Color>
    <SolidColorBrush x:Key="MountainAreaBrush">#774083B7</SolidColorBrush>
    <Color x:Key="MountainLineColor">#FFC6E6FF</Color>
    <Color x:Key="LineSeriesColor">#FFC6E6FF</Color>
    <Color x:Key="ColumnLineColor">#FFFFFFFF</Color>
    <SolidColorBrush x:Key="ColumnFillBrush" Color="#FFFFFFFF"></SolidColorBrush>
    <LinearGradientBrush x:Key="DefaultColorMapBrush">
        <GradientStop Offset="0" Color="DarkBlue" />
        <GradientStop Offset="0.5" Color="CornflowerBlue" />
        <GradientStop Offset="1" Color="#FF22AA" />
    </LinearGradientBrush>

</ResourceDictionary>

Next, create a partial class and inherit from ResourceDictionary.

NOTE: The namespace and class name must match the x:Class attribute in the XAML Resource Dictionary

Defining your own Theme ResourceDictionary
Copy Code
namespace WpfApplication1
{
   public partial class MyCustomTheme : ResourceDictionary
   {
       public MyCustomTheme()
       {
           InitializeComponent();
       }
   }
}

Registering and Using your Custom Theme

After defining your ResourceDictionary and all of the keys mentioned above, you need to create a custom theme class and add it to ThemeManager:

Registering and Using your Custom Theme
Copy Code
// Register with ThemeManager before using
var customTheme = new MyCustomTheme();
ThemeManager.AddTheme("MyCustomTheme", customTheme);
Applying the Custom Theme in XAML

You can now apply the theme as you would any other theme.

Applying the Custom Theme
Copy Code
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/SciChart" -->
<s:SciChartSurface s:ThemeManager.Theme="MyCustomTheme">

   <!-- XAxis, YAxis, RenderableSeries omitted for brevity -->
  
</s:SciChartSurface>
Applying the Custom Theme in CODE
Applying the Custom Theme
Copy Code
var sciChartSurface = new SciChartSurface();
ThemeManager.SetTheme(sciChartSurface, "MyCustomTheme");

 

 


SCICHART ® is a Registered Trademark in the UK, US and EEC. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!