Creating a Custom theme for Sparkline - Using the Telerik Approach

5 posts, 0 answers
  1. avinash
    avinash avatar
    3 posts
    Member since:
    May 2009

    Posted 14 Aug 2013 Link to this post

    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
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 16 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft banner
  4. avinash
    avinash avatar
    3 posts
    Member since:
    May 2009

    Posted 20 Aug 2013 Link to this post

    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



     


  5. avinash
    avinash avatar
    3 posts
    Member since:
    May 2009

    Posted 22 Aug 2013 Link to this post

    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
  6. Peshito
    Admin
    Peshito avatar
    496 posts

    Posted 26 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner