RadChart's series colors | Where can they be found?

15 posts, 0 answers
  1. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 13 Sep 2010 Link to this post

    Hello,

    In order to understand my problem better, please follow the instructions below.

    Goto --> http://demos.telerik.com/silverlight/#Chart/CustomPalette

    1. Select the windows7 Theme at the top.
    2. Click the clear button at the bottom right (on the colour palette).

    You will now see the windows7 theme colours being applied to each
    bar in the series.

    My question is, where can I find these colours so that I can reference them
    when defining my own series.
    The reason I need this is because we are standardising colours on our dashboards
    and we need to control the order in which series colours are displayed.
    We also wish to use the colours that RadChart has built in, as they are visually appealing.

    I have attempted to match the colours myself but they are slightly off contrast wise and noticably so.
    Do you know where I can find the built in RadChart colour collection used to represent each series in RadCharts?

    Thank you for your time.

     Llewellyn
  2. Sia
    Admin
    Sia avatar
    745 posts

    Posted 14 Sep 2010 Link to this post

    Hi Llewellyn,

    I am happy to hear that you like the windows 7 theme. Bars series consists of Fill, and two masks over it. The two masks can be found in the Bars' template:

    <LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
        <GradientStop Color="Transparent" Offset="0.2"/>
        <GradientStop Color="#CCFFFFFF" Offset="0.48"/>
        <GradientStop Color="Transparent" Offset="0.8"/>
        <GradientStop Color="White" Offset="0.5"/>
        <GradientStop Color="#CCFFFFFF" Offset="0.52"/>
    </LinearGradientBrush>
     
    <LinearGradientBrush x:Key="BarOpacityMaskBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#CCFFFFFF" Offset="1"/>
        <GradientStop Color="Transparent" Offset="0.4"/>
        <GradientStop Color="#7FFFFFFF" Offset="0.8"/>
        <GradientStop Color="#66FFFFFF" Offset="0.05"/>
    </LinearGradientBrush>
     
    <LinearGradientBrush x:Key="BarTopMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
        <GradientStop Color="#33FFFFFF" Offset="0.5"/>
        <GradientStop Color="Transparent"/>
        <GradientStop Color="Transparent" Offset="0.5"/>
        <GradientStop Color="#33FFFFFF" Offset="1"/>
        <GradientStop Color="Transparent" Offset="0.75"/>
    </LinearGradientBrush>
     
    <Style x:Key="CustomBar" TargetType="telerikCharting:Bar">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:Bar">
                    <Canvas Opacity="0"  x:Name="PART_MainContainer">
                        <Rectangle x:Name="PART_DefiningGeometry"                                   
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Style="{TemplateBinding ItemStyle}"
                            RadiusX="10"
                            RadiusY="10" />
                        <Rectangle Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            RadiusX="10"
                            RadiusY="10"
                            OpacityMask="{StaticResource BarOpacityMaskBrush}"
                            Fill="{StaticResource BarMaskBrush}"  />
                        <Rectangle x:Name="PART_SelectedState"
                                Height="{TemplateBinding ItemActualHeight}"
                                Width="{TemplateBinding ItemActualWidth}"
                                RadiusX="10"
                                RadiusY="10"
                                Fill="{StaticResource BarTopMaskBrush}" />
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                        </Canvas.RenderTransform>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="HoverStates">
                                <vsm:VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Hovered">
                                    <Storyboard>
                                        <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Hidden">
                                    <Storyboard>
                                        <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="SelectionStates">
                                <vsm:VisualState x:Name="Unselected">
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#B2000000" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <mscorlib:Double xmlns:mscorlib="clr-namespace:System;assembly=mscorlib">2</mscorlib:Double>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Regarding the main color palette, you can find all gradients for background and all strokes below:
    <Rectangle Stroke="stroke" RadiusX="2" RadiusY="2">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="second" Offset="0"/>
                <GradientStop Color="main" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    where you need to replace main, second and stroke with the following brushes:

    1. First main color
    <SolidColorBrush x:Key="main" Color="#FF87DAFF" />
    <SolidColorBrush x:Key="second" Color="#B287B1FF" />
    <SolidColorBrush x:Key="stroke" Color="#FF779EE8" />

    2. Second main color
    <SolidColorBrush x:Key="main" Color="#FFFF93DF" />
    <SolidColorBrush x:Key="second" Color="#B2FF93ED" />
    <SolidColorBrush x:Key="stroke" Color="#FFE274D0" />

    3. Third main color
    <SolidColorBrush x:Key="main" Color="#FFFFC378" />
    <SolidColorBrush x:Key="second" Color="#B2FFB578" />
    <SolidColorBrush x:Key="stroke" Color="#FFF2A667" />

    4. Fourth main color
    <SolidColorBrush x:Key="main" Color="#FFFF8470" />
    <SolidColorBrush x:Key="second" Color="#B2FF708C" />
    <SolidColorBrush x:Key="stroke" Color="#FFE4617B" />

    5. Fifth main color
    <SolidColorBrush x:Key="main" Color="#FF81FFE0" />
    <SolidColorBrush x:Key="second" Color="#B281E3FF" />
    <SolidColorBrush x:Key="stroke" Color="#FF4AD1F8" />

    6. Sixth main color
    <SolidColorBrush x:Key="main" Color="#FFD8FF74" />
    <SolidColorBrush x:Key="second" Color="#B283FF74" />
    <SolidColorBrush x:Key="stroke" Color="#FF6AE45C" />

    7. Seventh main color
    <SolidColorBrush x:Key="main" Color="#FFD37CFF" />
    <SolidColorBrush x:Key="second" Color="#B2957CFF" />
    <SolidColorBrush x:Key="stroke" Color="#FF8B72F2" />

    8. Eighth main color
    <SolidColorBrush x:Key="main" Color="#FFE6B0FE" />
    <SolidColorBrush x:Key="second" Color="#B2CFA3FF" />
    <SolidColorBrush x:Key="stroke" Color="#FFBB83F8" />

    9. Ninth main color
    <SolidColorBrush x:Key="main" Color="#FF9CB2C3" />
    <SolidColorBrush x:Key="second" Color="#B290979F" />
    <SolidColorBrush x:Key="stroke" Color="#FF828C98" />

    10. Tenth main color
    <SolidColorBrush x:Key="main" Color="#FFCDB08F" />
    <SolidColorBrush x:Key="second" Color="#B2B9A497" />
    <SolidColorBrush x:Key="stroke" Color="#FFA18B7E" />

    Hope this helps.

    Sincerely yours,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 15 Sep 2010 Link to this post

    Hello Sia,

    Thank you for posting the template and colours. I appreciate it.

    I put together a simple demo for anyone else who needs this with all the colours defined in the UserControl.Resources section for easy reference.
    Included is one example of how to assign the bar colours programatically in each SeriesDefinition.

    MainPage.xaml.cs
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using Telerik.Windows.Controls.Charting;
     
    namespace StackedBars_AxisXLabels
    {
      public partial class MainPage : UserControl
      {
        public MainPage()
        {
          InitializeComponent();
          //new Windows7Theme().IsApplicationTheme = true;
     
          #region chart data
     
          FillSampleChartData();
     
          var data = new List<User>();
          data.Add(new User("Stock Ordered", 20, 37, 56, 67));
          data.Add(new User("Stock Processed", 55, 120, 201, 33));
          data.Add(new User("Stock Shipped", 23, 49, 55, 66));
          data.Add(new User("Stock delivered", 47, 27, 103, 91));
     
          RadChart1.ItemsSource = data;
     
          #endregion
     
        }
     
        private void FillSampleChartData()
        {
          var sm1 = new SeriesMapping();
          var bar1 = new BarSeriesDefinition();
          bar1.StackGroupName = "Stack 1";
          bar1.ItemStyle = Resources["CustomBar"] as Style;
          sm1.SeriesDefinition = bar1;
     
          // easy way
          if (true)
          {
            sm1.SeriesDefinition.Appearance.Fill = Resources["Colour4"] as LinearGradientBrush;
            sm1.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke4"] as SolidColorBrush;
          }
            // same end result as above, but instead of defining our brushes in xaml, we programatically construct them.
          else
          {
            // define gradient for first default telerik chart colour (blue)
            var x = new GradientStopCollection
                      {
                        new GradientStop {Color = ColourHelper.HexColor("B287B1FF"), Offset = 0},
                        // second
                               
                        new GradientStop {Color = ColourHelper.HexColor("FF87DAFF"), Offset = 1} // main
                      };
     
            // set the linear gradient start/end points and suppy the gradient collection
            var gradientColour1 = new LinearGradientBrush(x, 0)
                                    {StartPoint = new Point(0.5, 0), EndPoint = new Point(0.5, 1)};
            sm1.SeriesDefinition.Appearance.Fill = gradientColour1;
     
            // set the stroke
            sm1.SeriesDefinition.Appearance.Stroke = new SolidColorBrush(ColourHelper.HexColor("FF779EE8"));
          }
     
     
          sm1.LegendLabel = "Value1";
     
     
          var im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.YValue;
          im1.FieldName = "Value1";
          sm1.ItemMappings.Add(im1);
          im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.XCategory;
          im1.FieldName = "Name";
          sm1.ItemMappings.Add(im1);
     
          var sm2 = new SeriesMapping();
          var bar2 = new BarSeriesDefinition {ItemLabelFormat = "#STSUM"};
          bar2.ItemStyle = Resources["CustomBar"] as Style;
          //bar2.StackGroupName = "Stack 1";
          sm2.SeriesDefinition = bar2;
          sm2.SeriesDefinition.Appearance.Fill = Resources["Colour3"] as LinearGradientBrush;
          sm2.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke3"] as SolidColorBrush;
          sm2.LegendLabel = "Value2";
          var im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.YValue;
          im2.FieldName = "Value2";
          sm2.ItemMappings.Add(im2);
          im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.XCategory;
          im2.FieldName = "Name";
          sm2.ItemMappings.Add(im2);
     
          var sm3 = new SeriesMapping();
          var bar3 = new BarSeriesDefinition();
          bar3.ItemStyle = Resources["CustomBar"] as Style;
          //bar3.StackGroupName = "Stack 1";
          sm3.SeriesDefinition = bar3;
          sm3.SeriesDefinition.Appearance.Fill = Resources["Colour2"] as LinearGradientBrush;
          sm3.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke2"] as SolidColorBrush;
          sm3.LegendLabel = "Value3";
          var im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.YValue;
          im3.FieldName = "Value3";
          sm3.ItemMappings.Add(im3);
          im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.XCategory;
          im3.FieldName = "Name";
          sm3.ItemMappings.Add(im3);
     
          var sm4 = new SeriesMapping();
          var bar4 = new BarSeriesDefinition();
          bar4.ItemStyle = Resources["CustomBar"] as Style;
          //bar4.StackGroupName = "Stack 2";
          sm4.SeriesDefinition = bar4;
          sm4.SeriesDefinition.Appearance.Fill = Resources["Colour1"] as LinearGradientBrush;
          sm4.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke1"] as SolidColorBrush;
          sm4.LegendLabel = "Value4";
          var im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.YValue;
          im4.FieldName = "Value4";
          sm4.ItemMappings.Add(im4);
          im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.XCategory;
          im4.FieldName = "Name";
          sm4.ItemMappings.Add(im4);
     
          RadChart1.SeriesMappings.Add(sm1);
          RadChart1.SeriesMappings.Add(sm2);
          RadChart1.SeriesMappings.Add(sm3);
          RadChart1.SeriesMappings.Add(sm4);
        }
     
        #region Nested type: User
     
        public class User
        {
          public User(string name, double value1, double value2, double value3, double value4)
          {
            Name = name;
            Value1 = value1;
            Value2 = value2;
            Value3 = value3;
            Value4 = value4;
          }
     
          public string Name { get; set; }
          public double Value1 { get; set; }
          public double Value2 { get; set; }
          public double Value3 { get; set; }
          public double Value4 { get; set; }
        }
     
        #endregion
      }
    }


    MainPage.xaml
    <UserControl x:Class="StackedBars_AxisXLabels.MainPage"
        mc:Ignorable="d"    >
         
        <UserControl.Resources>
     
            <!-- Bar Brushes: start-->
             
            <!-- this is our reference for the brushes below, match the main, second and stroke colours.
            <SolidColorBrush x:Key="main" Color="#FF87DAFF" />
            <SolidColorBrush x:Key="second" Color="#B287B1FF" />
            <SolidColorBrush x:Key="stroke" Color="#FF779EE8" />
            -->
             
            <!-- First Main Colour: (Blue) -->
            <LinearGradientBrush  x:Key="Colour1" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B287B1FF" Offset="0"/> <!-- second -->
                <GradientStop Color="#FF87DAFF" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke1" Color="#FF779EE8" /> <!-- stroke -->
     
             
            <!-- Second Main Colour: (Purple/Pink) -->
            <LinearGradientBrush  x:Key="Colour2" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FF93ED" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFFF93DF" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke2" Color="#FFE274D0" /> <!-- stroke -->
     
            <!-- Third Main Colour: (Orange) -->
            <LinearGradientBrush  x:Key="Colour3" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FFB578" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFFFC378" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke3" Color="#FFF2A667" /> <!-- stroke -->
     
            <!-- Fourth Main Colour: (Red) -->
            <LinearGradientBrush  x:Key="Colour4" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FF708C" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFFF8470" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke4" Color="#FFE4617B" /> <!-- stroke -->       
             
            <!-- Bar Brushes: end -->
             
            <!-- Fith Main Colour: (Cyan or green/blue) -->
            <LinearGradientBrush  x:Key="Colour5" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B281E3FF" Offset="0"/> <!-- second -->
                <GradientStop Color="#FF81FFE0" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke5" Color="#FF4AD1F8" /> <!-- stroke -->       
                     
            <!-- Sixth Main Colour: (yellow/green) -->
            <LinearGradientBrush  x:Key="Colour6" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B283FF74" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFD8FF74" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke6" Color="#FF6AE45C" /> <!-- stroke -->               
             
            <!-- Seventh Main Colour: (purple/blue) -->
            <LinearGradientBrush  x:Key="Colour7" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2957CFF" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFD37CFF" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke7" Color="#FF8B72F2" /> <!-- stroke -->
     
            <!-- Eighth Main Colour: (light faded purple) -->
            <LinearGradientBrush  x:Key="Colour8" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2CFA3FF" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFE6B0FE" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke8" Color="#FFBB83F8" /> <!-- stroke -->      
             
            <!-- Ninth Main Colour: (grey faded purple) -->
            <LinearGradientBrush  x:Key="Colour9" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B290979F" Offset="0"/> <!-- second -->
                <GradientStop Color="#FF9CB2C3" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke9" Color="#FF828C98" /> <!-- stroke -->             
             
            <!-- Tenth Main Colour: (brown) -->
            <LinearGradientBrush  x:Key="Colour10" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2B9A497" Offset="0"/> <!-- second -->
                <GradientStop Color="#FFCDB08F" Offset="1"/> <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke10" Color="#FFA18B7E" /> <!-- stroke -->                    
             
            <!-- Bar Brushes: end -->       
     
            <!-- Windows7 Bar template : start -->  
            <!-- Note: Use if Windows7 theme is not default theme -->
            <LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
                <GradientStop Color="Transparent" Offset="0.2"/>
                <GradientStop Color="#CCFFFFFF" Offset="0.48"/>
                <GradientStop Color="Transparent" Offset="0.8"/>
                <GradientStop Color="White" Offset="0.5"/>
                <GradientStop Color="#CCFFFFFF" Offset="0.52"/>
            </LinearGradientBrush>
     
            <LinearGradientBrush x:Key="BarOpacityMaskBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#CCFFFFFF" Offset="1"/>
                <GradientStop Color="Transparent" Offset="0.4"/>
                <GradientStop Color="#7FFFFFFF" Offset="0.8"/>
                <GradientStop Color="#66FFFFFF" Offset="0.05"/>
            </LinearGradientBrush>
     
            <LinearGradientBrush x:Key="BarTopMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">
                <GradientStop Color="#33FFFFFF" Offset="0.5"/>
                <GradientStop Color="Transparent"/>
                <GradientStop Color="Transparent" Offset="0.5"/>
                <GradientStop Color="#33FFFFFF" Offset="1"/>
                <GradientStop Color="Transparent" Offset="0.75"/>
            </LinearGradientBrush>
     
            <Style x:Key="CustomBar" TargetType="telerik:Bar">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:Bar">
                            <Canvas Opacity="0"  x:Name="PART_MainContainer">
                                <Rectangle x:Name="PART_DefiningGeometry"                                  
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Style="{TemplateBinding ItemStyle}"
                            RadiusX="10"
                            RadiusY="10" />
                                <Rectangle Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            RadiusX="10"
                            RadiusY="10"
                            OpacityMask="{StaticResource BarOpacityMaskBrush}"
                            Fill="{StaticResource BarMaskBrush}"  />
                                <Rectangle x:Name="PART_SelectedState"
                                Height="{TemplateBinding ItemActualHeight}"
                                Width="{TemplateBinding ItemActualWidth}"
                                RadiusX="10"
                                RadiusY="10"
                                Fill="{StaticResource BarTopMaskBrush}" />
                                <Canvas.RenderTransform>
                                    <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                                </Canvas.RenderTransform>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="HoverStates">
                                        <VisualState x:Name="Normal">
                                            <Storyboard>
                                                <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Hovered">
                                            <Storyboard>
                                                <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Hidden">
                                            <Storyboard>
                                                <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="#B2000000" />
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">
                                                    <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <mscorlib:Double xmlns:mscorlib="clr-namespace:System;assembly=mscorlib">2</mscorlib:Double>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- Windows7 Bar template : end -->
     
        </UserControl.Resources>
         
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadChart x:Name="RadChart1" />
        </Grid>
    </UserControl>

    cheers,

     Llewellyn
  4. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 16 Sep 2010 Link to this post

    Hello Sia,

    The colour template you gave me helped solve my problems with Bar Charts.
    I attempted to apply these to a LineSeriesDefinition(Line Chart) with a little success.
    I'm running into a problem in getting the LineSeries LegendItemMarker colour working using the BarSeries colour template you gave me.
    When using BarSeriesDefinitions the legend looks fine. So this tells me maybe the Gradient Template I'm using is incorrect for LineSeries...

    Previously you supplied me with a Gradient Template for the Bar Chart along with names(second,main)  to indicate where to place the colours.

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="second" Offset="0"/>
         <GradientStop Color="main" Offset="1"/>
     </LinearGradientBrush>

    Could you possibly also supply me with a Gradient Template for use with the Line chart?

    Best,

     Llewellyn
  5. Sia
    Admin
    Sia avatar
    745 posts

    Posted 21 Sep 2010 Link to this post

    Hi Llewellyn,

    You do not need to re-template a Line series in order to change its stroke. Please find attached a modified version of your project and let me know if this is what you want to achieve.

    Best wishes,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 22 Sep 2010 Link to this post

    Hello Sia,

    Thanks for getting back to me on this.

    The small problem I am having is with Telerik colours (you provided me with) when using a lineseries definition.
    When I apply custom colours to the lineseries they dont match 100% to the colours telerik uses.
    Yet, if I switch back to a BarSeriesDefinition on RadChart1 the colours are then identical. So it seems to me the LineSeriesDefinition needs the custom colours to maybe be defined in a different way...?

    I've slightly modified the code you sent me, simplified it a bit and added a second RadChart (RadChart2) to demonstrate better the differences between RadChart1 which uses manually assigned Telerik colours and RadChart2 which gets its colours from the Telerik default/theme brushes.

    Also, notice that when you switch RadChart1 over to using a BarSeriesDefinition, the colours match again with RadChart2.

    Here is the code. You can copy and replace the contents into the previous solution you sent me.
    Just remember to add a reference to the following theme:
    C:\Program Files\Telerik\RadControls for Silverlight Q1 2010 SP2\Binaries\Silverlight\Telerik.Windows.Themes.Windows7.dll

    MainPage.xaml
    <UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:mscorlib="clr-namespace:System;assembly=mscorlib" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
        <UserControl.Resources>
            <!-- Bar Brushes: start-->
     
            <!-- First Main Colour: (Blue) -->
            <LinearGradientBrush x:Key="Colour1" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B287B1FF" Offset="0" />
                <!-- second -->
                <GradientStop Color="#FF87DAFF" Offset="1" />
                <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke1" Color="#FF779EE8" />
            <!-- stroke -->
     
            <!-- Second Main Colour: (Purple/Pink) -->
            <LinearGradientBrush x:Key="Colour2" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FF93ED" Offset="0" />
                <!-- second -->
                <GradientStop Color="#FFFF93DF" Offset="1" />
                <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke2" Color="#FFE274D0" />
            <!-- stroke -->
     
            <!-- Third Main Colour: (Orange) -->
            <LinearGradientBrush x:Key="Colour3" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FFB578" Offset="0" />
                <!-- second -->
                <GradientStop Color="#FFFFC378" Offset="1" />
                <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke3" Color="#FFF2A667" />
            <!-- stroke -->
     
            <!-- Fourth Main Colour: (Red) -->
            <LinearGradientBrush x:Key="Colour4" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B2FF708C" Offset="0" />
                <!-- second -->
                <GradientStop Color="#FFFF8470" Offset="1" />
                <!-- main -->
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ColourStroke4" Color="#FFE4617B" />
            <!-- stroke -->
     
            <!-- Bar Brushes: end -->
     
     
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!--<Grid x:Name="ClipPanel">-->           
            <telerik:RadChart x:Name="RadChart1" Grid.Row="0" />
            <telerik:RadChart x:Name="RadChart2" Grid.Row="1" />
                 
            <!--</Grid>-->
        </Grid>
    </UserControl>


    MainPage.xaml.cs
    using System.Collections.Generic;
    using System.Windows.Controls;
    using System.Windows.Media;
    using Telerik.Windows.Controls;
    using Telerik.Windows.Controls.Charting;
     
    namespace SilverlightApplication1
    {
      public partial class MainPage : UserControl
      {
        public MainPage()
        {
          InitializeComponent();
     
          #region chart data
     
          FillRadchart1();
          FillRadchart2();
     
          var data = new List<User>();
          data.Add(new User("Stock Ordered", 20, 37, 56, 67));
          data.Add(new User("Stock Processed", 55, 120, 201, 33));
          data.Add(new User("Stock Shipped", 23, 49, 55, 66));
          data.Add(new User("Stock delivered", 47, 27, 103, 91));
     
          RadChart1.ItemsSource = data;
          RadChart2.ItemsSource = data;
     
          #endregion
     
          new Windows7Theme().IsApplicationTheme = true;
        }
     
        /// <summary>
        /// RadChart1 has custom colours set for it.
        /// Notice the colours dont match 100% those used by Telerik for RadChart2.
        /// Note that it does match if we change the seriesdefinition to barseries.
        /// </summary>
        private void FillRadchart1()
        {
          var sm1 = new SeriesMapping();
          var bar1 = new LineSeriesDefinition(); //var bar1 = new BarSeriesDefinition(); // note : change to bar series and the colours match RadChart2
          sm1.SeriesDefinition = bar1;
     
          sm1.SeriesDefinition.Appearance.Fill = Resources["Colour1"] as LinearGradientBrush;
          sm1.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke1"] as SolidColorBrush;
          sm1.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke1"] as SolidColorBrush;
          sm1.LegendLabel = "Value1";
          var im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.YValue;
          im1.FieldName = "Value1";
          sm1.ItemMappings.Add(im1);
          im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.XCategory;
          im1.FieldName = "Name";
          sm1.ItemMappings.Add(im1);
     
          var sm2 = new SeriesMapping();
          var bar2 = new LineSeriesDefinition {ItemLabelFormat = "#STSUM"};
          sm2.SeriesDefinition = bar2;
          sm2.SeriesDefinition.Appearance.Fill = Resources["Colour2"] as LinearGradientBrush;
          sm2.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke2"] as SolidColorBrush;
          sm2.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke2"] as SolidColorBrush;
          sm2.LegendLabel = "Value2";
          var im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.YValue;
          im2.FieldName = "Value2";
          sm2.ItemMappings.Add(im2);
          im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.XCategory;
          im2.FieldName = "Name";
          sm2.ItemMappings.Add(im2);
     
          var sm3 = new SeriesMapping();
          var bar3 = new LineSeriesDefinition();
          sm3.SeriesDefinition = bar3;
          sm3.SeriesDefinition.Appearance.Fill = Resources["Colour3"] as LinearGradientBrush;
          sm3.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke3"] as SolidColorBrush;
          sm3.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke3"] as SolidColorBrush;
          sm3.LegendLabel = "Value3";
          var im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.YValue;
          im3.FieldName = "Value3";
          sm3.ItemMappings.Add(im3);
          im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.XCategory;
          im3.FieldName = "Name";
          sm3.ItemMappings.Add(im3);
     
          var sm4 = new SeriesMapping();
          var bar4 = new LineSeriesDefinition();
          sm4.SeriesDefinition = bar4;
          sm4.SeriesDefinition.Appearance.Fill = Resources["Colour4"] as LinearGradientBrush;
          sm4.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke4"] as SolidColorBrush;
          sm4.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke4"] as SolidColorBrush;
          sm4.LegendLabel = "Value4";
          var im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.YValue;
          im4.FieldName = "Value4";
          sm4.ItemMappings.Add(im4);
          im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.XCategory;
          im4.FieldName = "Name";
          sm4.ItemMappings.Add(im4);
     
          RadChart1.SeriesMappings.Add(sm1);
          RadChart1.SeriesMappings.Add(sm2);
          RadChart1.SeriesMappings.Add(sm3);
          RadChart1.SeriesMappings.Add(sm4);
        }
     
     
        /// <summary>
        /// RadChart2 has no custom colours set for it. Telerik auto populates the colours.
        /// Notice the more natural tone of colours, especially for the legend item.
        /// </summary>
        private void FillRadchart2()
        {
          var sm1 = new SeriesMapping();
          var bar1 = new LineSeriesDefinition();
          sm1.SeriesDefinition = bar1;
          sm1.LegendLabel = "Value1";
          var im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.YValue;
          im1.FieldName = "Value1";
          sm1.ItemMappings.Add(im1);
          im1 = new ItemMapping();
          im1.DataPointMember = DataPointMember.XCategory;
          im1.FieldName = "Name";
          sm1.ItemMappings.Add(im1);
     
          var sm2 = new SeriesMapping();
          var bar2 = new LineSeriesDefinition {ItemLabelFormat = "#STSUM"};
          sm2.SeriesDefinition = bar2;
          sm2.LegendLabel = "Value2";
          var im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.YValue;
          im2.FieldName = "Value2";
          sm2.ItemMappings.Add(im2);
          im2 = new ItemMapping();
          im2.DataPointMember = DataPointMember.XCategory;
          im2.FieldName = "Name";
          sm2.ItemMappings.Add(im2);
     
          var sm3 = new SeriesMapping();
          var bar3 = new LineSeriesDefinition();
          sm3.SeriesDefinition = bar3;
          sm3.LegendLabel = "Value3";
          var im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.YValue;
          im3.FieldName = "Value3";
          sm3.ItemMappings.Add(im3);
          im3 = new ItemMapping();
          im3.DataPointMember = DataPointMember.XCategory;
          im3.FieldName = "Name";
          sm3.ItemMappings.Add(im3);
     
          var sm4 = new SeriesMapping();
          var bar4 = new LineSeriesDefinition();
          sm4.SeriesDefinition = bar4;
          sm4.LegendLabel = "Value4";
          var im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.YValue;
          im4.FieldName = "Value4";
          sm4.ItemMappings.Add(im4);
          im4 = new ItemMapping();
          im4.DataPointMember = DataPointMember.XCategory;
          im4.FieldName = "Name";
          sm4.ItemMappings.Add(im4);
     
          RadChart2.SeriesMappings.Add(sm1);
          RadChart2.SeriesMappings.Add(sm2);
          RadChart2.SeriesMappings.Add(sm3);
          RadChart2.SeriesMappings.Add(sm4);
        }
     
        #region Nested type: User
     
        public class User
        {
          public User(string name, double value1, double value2, double value3, double value4)
          {
            Name = name;
            Value1 = value1;
            Value2 = value2;
            Value3 = value3;
            Value4 = value4;
          }
     
          public string Name { get; set; }
          public double Value1 { get; set; }
          public double Value2 { get; set; }
          public double Value3 { get; set; }
          public double Value4 { get; set; }
        }
     
        #endregion
      }
    }


    Thanks,

     Llewellyn
  7. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 27 Sep 2010 Link to this post

    Hello Llewellyn,

    Thank you for contacting us.

    Generally the conversion of the "base" colors to the more natural colors displayed in the built-in theme is the result of a rather complex internal HSB mapping algorithm implemented in the RadChart control.

    It is possible to achieve the same color nuances in your application as well but you will need to replace the Appearance API setters in the code behind with a declaration of StyleBuilderData object instance that holds the necessary colors and mappings in the UserControl.Resources (the key should be "StyleBuilderData" so the control can pick the correct resource up).

    Attached is a modified version of the sample application so you can decide which approach you would like to stick to.

    Hope this helps.


    Best wishes,
    Freddie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 02 Oct 2010 Link to this post

    Hi Freddia,

    Thanks for the informative reply.

    The real problem I am facing is when I use a LineSeriesDefinition the line/legend colours are slightly off.
    This problem doesnt occurs only when I use the BarSeriesDefinition, only with the LineSeriesDefinition.

    To assist in understanding this problem better I've run the code provided in my previous post and taken a picture of the colours.

    The top RadChart uses the colours the Sia provided, those that Telerik RadChart is using by default (as I understand.)
    The Top RadChart will display these colours perfectly if I use a BarSeriesDefinition, but when I switch to LineSeriesDef the colours appear slightly off.

    The second RadChart (2) I added is there to show the differences between the colours.

    Any advice or ideas I follow up on to get the top RadChart1 (using LineSeriedDef) to match the Bottom RadChart2 will be very welcome.
    Just a reminder that when RadChart1's seriesmappings are configured to a BarSeriesDefinition, all the colours match those of RadChart2.

    Thanks,

     Llewellyn
  9. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 06 Oct 2010 Link to this post

    Hello Llewellyn,

    Could you confirm whether you have reviewed the sample project we sent you in our previous reply? We believe it demonstrates how to achieve the desired functionality for Line series as well (albeit the implementation is rather complex).


    Greetings,
    Freddie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 06 Oct 2010 Link to this post

    Hi Freddie,

    >> Could you confirm whether you have reviewed the sample project we sent you in our previous reply?
    >> We believe it demonstrates how to achieve the desired functionality for Line series as well (albeit the implementation is rather complex).

    Yes, when you first posted it I spent a few hours attempting to figure out how to use it. You are right, it is complex.
    I had trouble determining where exactly I had to set and use the StyleBuilderData template in the RadChart.

    Can you provide an example of how to implement/assign StyleBuilderData in RadChart?
    Also, if you know of an easier way, I'm all ears.

    Best,

     Llewellyn

  11. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 11 Oct 2010 Link to this post

    Hello Llewellyn,

    The sample application provided earlier demonstrates how to use the StyleBuilderData class -- you need only to make sure the resource is placed in the top level UserControl.Resources dictionary and its key is "StyleBuilderData" -- you cannot "set" it as a property as this functionality is generally not exposed publicly (the HSB algorithm and the specific theme mappings are normally part of the internal implementation).

    Unfortunately there is no easier way to achieve exactly the appearance of the Windows7 theme palette colors in the default Office_Black theme.


    Best wishes,
    Freddie
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  12. Llewellyn
    Llewellyn avatar
    11 posts
    Member since:
    Jun 2010

    Posted 15 Dec 2010 Link to this post

    Hi Freddie,

    I've taken a second look at your solution yesterday and indeed it works.
    I see by simply changing the order of the colours in the ResourceDictionaryCollection (XAML secton) that the RadChart reflects this change.

    I have one question on this solution and that is if multiple StyleBuilderData XAML definitions can be used to apply different colour orders for 2 or more radcharts?
    To explain it in different way, can I setup a stylebuilder for one RadChart and another for a second RadChart in my silverlight application?

    Best,

     Llewellyn
  13. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 16 Dec 2010 Link to this post

    Hi Llewellyn,

    Unfortunately this is currently not possible -- generally the StyleBuilderData object is not intended to be used as part of the public API and it is only associated with the RadChart control via preset "well-known" identifier (i.e. the x:Name "StyleBuilderData").


    Kind regards,
    Freddie
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  14. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 26 Aug 2011 Link to this post

    Hi all,

    This is working fine ..thanks

    But not working when the case of Grouping. why because in the case of grouping we are using only one seriesdeffination so we can not apply different colors to one series definition.

    ex:

                BarSeriesDefinition brc = new BarSeriesDefinition();

                SeriesMapping seriesMapping = new SeriesMapping();
                ItemMapping itemMapping = new ItemMapping();
                seriesMapping.SeriesDefinition = brc;

                seriesMapping.SeriesDefinition.Appearance.Fill = Resources[strcolor1] as LinearGradientBrush;
                seriesMapping.SeriesDefinition.Appearance.Stroke = Resources[strcolor2] as SolidColorBrush;
                seriesMapping.SeriesDefinition.Appearance.PointMark.Stroke = Resources[strcolor3] as SolidColorBrush;

                brc.ShowItemLabels = false;

                seriesMapping.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Level"));

                itemMapping = new ItemMapping();
                itemMapping.DataPointMember = DataPointMember.XCategory;
                itemMapping.FieldName = "Name";
                seriesMapping.ItemMappings.Add(itemMapping);

                itemMapping = new ItemMapping();
                itemMapping.DataPointMember = DataPointMember.YValue;
                itemMapping.FieldName = "Value";
                seriesMapping.ItemMappings.Add(itemMapping);

                seriesMapping.ChartArea = chartArea1;
                radChart.SeriesMappings.Add(seriesMapping);


    in above case all the bars are displaying same colors.because we are applying color to seriesdefinition.
    In this case how can i apply different colors to each bar.

    Thanks In advance
    -Vijay kommalapati

  15. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 31 Aug 2011 Link to this post

    Hello Vijay,

    There are two approaches which you can choose from to have different Colors for each of your bars:

    1. You can use the LegendDisplayMode property of the Series to DataPointLabel. This way they will appear with different colors(taken from the Theme). This is shown in our online documentation.
    2. You may review this help topic where it is described how to use the MVVM pattern to get a better control over the colors of the bars of a single series.

    All the best,
    Evgenia
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top