Styling RadChart for WPF and Silverlight gets easier

It’s been awhile since the Q1 SP1 2010 release, but let me introduce you to a couple of new approaches to styling, which we added and failed to openly manifest.

First, there is the ability to build your own palette of brushes, that will be applied to the RadChart:

<telerik:RadChart x:Name="radChart1"> <telerik:RadChart.PaletteBrushes> <SolidColorBrush Color="Magenta" /> <LinearGradientBrush StartPoint="0,0" EndPoint="0.75,1"> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="BlueViolet" Offset="0.5" /> <GradientStop Color="#af000000" Offset="1" /> </LinearGradientBrush> </telerik:RadChart.PaletteBrushes> </telerik:RadChart>

Here is the result:

Using images is as easy:

<telerik:RadChart x:Name="radChart1"> <telerik:RadChart.PaletteBrushes> <ImageBrush ImageSource="Desert.jpg" /> <ImageBrush ImageSource="Penguins.jpg" /> </telerik:RadChart.PaletteBrushes> </telerik:RadChart>

Up to now, changing each item’s appearance depending on it’s value required you to use the MVVM approach, which is very powerful, but needs a lot of work. Now, we introduce new API to allow easier customization without using intermediate objects or placing appearance properties in your data layer. It is a delegate in the RadChart, that handles the generation of styles.

XAML:

<telerik:RadChart x:Name="radChart1"> <telerik:RadChart.PaletteBrushes> <LinearGradientBrush StartPoint="1,0" EndPoint="0,1"> <GradientStop Offset="0" Color="White" /> <GradientStop Offset="1" Color="Black" /> </LinearGradientBrush> </telerik:RadChart.PaletteBrushes> </telerik:RadChart>

C# code-behind:

public MainPage()
{
    Random d = new Random(0xa00a);

    InitializeComponent();

    this.radChart1.CreateItemStyleDelegate = CreateItemStyle;
}

private Style CreateItemStyle(Control control, Style baseStyle, DataPoint dataPoint, DataSeries dataSeries)
{
    // Do not change the style of the legend item if (control is ChartLegendItem)
        return baseStyle;

    if (dataPoint == null)
        return baseStyle;

    // Create a new style, do not use the one that is provided as parameter.
    Style newStyle = new Style(baseStyle.TargetType);
    newStyle.BasedOn = baseStyle;

    // Values over 50 will be in red, otherwise - green
    Brush brush = new SolidColorBrush(dataPoint.YValue <= 50 ? Colors.Green : Colors.Red);

    if (control is BaseChartItem2D)
        newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));

    return newStyle;
}

private DataSeries Create(ISeriesDefinition def, Random g, int count)
{
    Random r = new Random(0x0a0c);

    return DataSeriesHelper.CreateDataSeries(def, x => r.Next(0, 100) + g.Next(-5, 5), count);
}

And the result is