Creating a Custom theme for Sparkline - Using the Telerik Approach

[avinash]

Hi,

 I am trying to use customised theme for sparkline chart using the telerik approach.I am able to cusomise the slider by following the steps specified in the link http://www.telerik.com/help/silverlight/common-styling-apperance-themes-custom-theme-project-telerik-approach.html

but dont know why sparkline chart is not getting reflected with the customised theme.

Any help will be much appreciated

[Evgenia]

Hi,

 I'm perplexed by your post. Could you please provide more details on what have you tried and which theme would you like to customize? Also since the RadSparkline control is an information graphic, it
 does not have slider in its default styles/templates by default ( this might come from their wrapper control - gridview, timebar, etc. ). So could you be more specific on your exact scenario and what would you like to be customized?

Regards,
Evgenia
Telerik

[avinash]

Hi ,

 Let me elaborate what i am trying to achieve.The below link explains how to apply custom theme globally(basically setting  background color to red) for Radslider using telerik approach
http://www.telerik.com/help/silverlight/common-styling-apperance-themes-custom-theme-project-telerik-approach.html
Following the above approach using Mytheme object created in above process,adding Slider.XAML with required theming(color combination by setting <SolidColorBrush x:Key="SliderBackgroundTrack" Color="Red" /> )
 and setting the  theme
 Telerik.Windows.Controls.StyleManager.ApplicationTheme = new MyTheme.MyTheme(); 
in APP.Xaml file give me the slider with back ground color Red .this theme will get applied to all the RadSlider added in Project implicitly

Now i want to achive the similar output for RadAreaSparkline.(where my positive point background is red ,negative  point background blue)using telerik Approach
This is what i have followed
1)  create a new Silverlight Application. Name the project CustomSparklineThemeDemo.
2) Add a new Silverlight class library project to your solution, named MyTheme.
3) In the MyTheme project add references to the Telerik assemblies containing the sparkline control( like   Telerik.Windows.Controls.Charting, Telerik.Windows.Controls.DataVisualization, Telerik.Windows.Data)
4) In the MyTheme project, add a new folder named Themes.   the original Vista theme for the RadSparkline control is copied from the RadControls installation folder (~RadControls Installation Folder\Themes\Vista\Themes\Vista\RadSparkline.xaml) and pasted in the Themes folder of the MyTheme project.
5) Add a new ResourceDictionary to the Themes folder. Name it Telerik.Windows.Controls.xaml. Use Telerik.Windows.Controls.xaml as a Resource Dictionary which contains Merged Resource Dictionaries 
XAML

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/MyTheme;component/Themes/RadSparkline.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
6) open the RadSparkline.xaml file and modify the positive background color to Red.negative 
7) Add a new class named MyTheme in the MyTheme project. The class should derive from the 
Telerik.Windows.Controls.Theme base class. 
In the constructor set the source to point to a non-existent Generic.xaml file. Mark the class with the
 ThemeLocation attribute.
C#
using System;
using Telerik.Windows.Controls;
namespace Silverlight.Help.RadCommon
{
    [ThemeLocation( ThemeLocation.BuiltIn )]
    public class MyTheme : Theme
    {
        public MyTheme()
        {
            this.Source = new Uri( "/MyTheme;component/themes/Generic.xaml", UriKind.RelativeOrAbsolute );
        }
    }
}
8)The next step is to apply the custom theme. In the Silverlight client project 
(CustomSparklineThemeDemo), add a reference to the project containing custom theme
 (in this case this is the MyTheme project).
9)Open the App.xaml.cs file and add the following code in the constructor. This will be enough to 
apply the theme globally to all RadControls.
C#
Telerik.Windows.Controls.StyleManager.ApplicationTheme = new MyTheme.MyTheme();

10) Add a Sparkline chart with some sample data in Mainpage.XAML and the theme should be get applied 
automatically .

Issue:- The RadAreaSparline chart will not reflect the colors specified in the RadSparkline.Xaml (theme)
instead it shows the default color. .

Hope i have exaplained all the steps and what i want to achieve by using the telerik Approach.Let me know
if you need some more info.

Any help will be much Appreciated

[avinash]

Hi Evgenia ,
 
  I have uploaded the sample code here
https://skydrive.live.com/redir?resid=FF75454B393A1C19!115

 you can see that the RadSlider reflects the theme color(SliderBackgroundTrack with RED color)specified in the slider.Xaml file
where as the RadAreaSpakline is not reflecting the theme colors instead it shows the default color.

Hope the code in the link helps you to understand the issue.

Regards,
Avinash

[Peshito]

Hi Avinash,

Thank you for the explanation and the code provided. I have downloaded and ran the sample project. Excuse me if I am mistaken but the colors seems to be properly applied. Please take a look at the attached pictures.

sparkline_colors.png shows the result I see and the sparkline_colors_default shows the default colors when I removed the applying of the theme in App.Xaml.cs.

Could you please double check to see if the colors are properly applied at your end once again.

Thank you for the cooperation.

Regards,
Peshito
Telerik