Custom Item Style

This feature allows you to create a custom style and apply it to a number of chart items. The feature is represented by a delegate which should create and return the desired style. This allows you to create custom styles for the individual chart items depending on your custom logic. To learn more read on.

The delegate accepts four parameters:

• Control item - represents the chart item that is currently processed. This could be either a derivative of the BaseChartItem ( Bar, Bubble, Pie, Stick, etc.), or a derivative of the SelfDrawingSeries ( LineSeries, SplineSeries, AreaSeries, SplineAreaSeries, etc). or a SeriesItemLabel, or a ChartLegendItem.

• Style style - represents the style that would be applied to the respective chart item by default. You can use it to set the Style.BasedOn property of the style created by the delegate.

• DataPoint dataPoint - represents the DataPoint associated with the processed chart item. Note that its value will be null if the chart item is of type SelfDrawingSeries.

• DataSeries dataSeries - represents the DataSeries associated with the chart item.

To set the delegate you have to use the CreateItemStyleDelegate property. Here is an example of how to set it.

The Style style argument will have the following TargetType depending on the different values of the Control item argument:

• BaseChartItem - Shape

• SelfDrawingSeries - SelfDrawingSeries

• SeriesItemLabel - SeriesitemLabel

• ChartLegendItem - Path

public Sample() 
{ 
    InitializeComponent(); 
    this.radChart.CreateItemStyleDelegate = this.BuildCustomItemStyle; 
} 
public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries ) 
{ 
    Style newStyle = new Style(); 
    newStyle.BasedOn = style; 
    return newStyle; 
} 

Public Sub New() 
    InitializeComponent() 
    Me.radChart.CreateItemStyleDelegate = AddressOf Me.BuildCustomItemStyle 
End Sub 
Public Function BuildCustomItemStyle(item As Control, style As Style, point As DataPoint, dataSeries As DataSeries) As Style 
    Dim newStyle As New Style() 
    newStyle.BasedOn = Style 
    Return Style 
End Function 

The following sample demonstrates a more complex logic inside the delegate - how to color the bars in a specific color, depending on their value. If the Bar's YValue is greater than 300 the Bar will be colored red, otherwise it should be green. Since changing the colors of the Bars won't affect their Labels (they will remain with the default color) another CustomItemStyle is used to color them accordingly. Finally the LegendItem's color is changed so that it corresponds to the Bar's colors.

public partial class MainPage : UserControl 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
        int maxItems = 10; 
        Random r = new Random(); 
 
        List<Company> sampleData = new List<Company>(); 
 
        for (int i = 0; i < maxItems; i++) 
        { 
            sampleData.Add(new Company(r.Next(200, 400))); 
        } 
 
        SeriesMapping seriesMapping = new SeriesMapping(); 
        seriesMapping.LegendLabel = "My Custom Bars"; 
        seriesMapping.SeriesDefinition = new BarSeriesDefinition(); 
        seriesMapping.ItemMappings.Add(new ItemMapping("PurchasePrice", DataPointMember.YValue)); 
 
        this.RadChart1.ItemsSource = sampleData; 
        this.RadChart1.SeriesMappings.Add(seriesMapping); 
 
        this.RadChart1.CreateItemStyleDelegate = BuildCustomItemStyle; 
 
    } 
 
    public class Company 
    { 
        public double PurchasePrice { get; set; } 
 
        public Company(double price) 
        { 
            PurchasePrice = price; 
        } 
    } 
 
    public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries) 
    { 
        Style newStyle = new Style(style.TargetType); 
        newStyle.BasedOn = style; 
        Brush brush; 
 
        if (item is BaseChartItem) 
        { 
            if (dataSeries[(item as BaseChartItem).CurrentIndex].YValue > 300) 
            { 
                brush = new SolidColorBrush(Colors.Red); 
            } 
            else 
            { 
                brush = new SolidColorBrush(Colors.Green); 
            } 
            newStyle.Setters.Add(new Setter(Shape.FillProperty, brush)); 
        } 
 
        if (item is SeriesItemLabel) 
        { 
            if ((item as SeriesItemLabel).DataPoint.YValue > 300) 
                brush = new SolidColorBrush(Colors.Red); 
            else 
                brush = new SolidColorBrush(Colors.Green); 
            newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, brush)); 
            newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, brush)); 
        } 
        if (item is ChartLegendItem) 
        { 
            brush = this.Resources["LegendItemStyle"] as Brush; 
            newStyle.Setters.Add(new Setter(Path.FillProperty, brush)); 
        } 
 
        return newStyle; 
    } 
} 

Partial Public Class MainPage 
    Inherits UserControl 
    Public Sub New() 
        InitializeComponent() 
        Dim maxItems As Integer = 10 
        Dim r As New Random() 
        Dim sampleData As New List(Of Company)() 
        For i As Integer = 0 To maxItems - 1 
            sampleData.Add(New Company(r.Next(200, 400))) 
        Next i 
        Dim seriesMapping As New SeriesMapping() 
        seriesMapping.LegendLabel = "My Custom Bars" 
        seriesMapping.SeriesDefinition = New BarSeriesDefinition() 
        seriesMapping.ItemMappings.Add(New ItemMapping("PurchasePrice", DataPointMember.YValue)) 
        RadChart1.ItemsSource = sampleData 
        RadChart1.SeriesMappings.Add(seriesMapping) 
        Me.RadChart1.CreateItemStyleDelegate = AddressOf BuildCustomItemStyle 
    End Sub 
    Public Class Company 
        Public Property PurchasePrice() As Double 
        Public Sub New(ByVal price As Double) 
            PurchasePrice = price 
        End Sub 
    End Class 
    Public Function BuildCustomItemStyle(ByVal item As Control, ByVal style As Style, ByVal point As DataPoint, ByVal dataSeries As DataSeries) As Style 
        Dim newStyle As New Style(style.TargetType) 
        newStyle.BasedOn = style 
        Dim brush As Brush 
        If TypeOf item Is BaseChartItem Then 
            If dataSeries((TryCast(item, BaseChartItem)).CurrentIndex).YValue > 300 Then 
                brush = New SolidColorBrush(Colors.Red) 
            Else 
                brush = New SolidColorBrush(Colors.Green) 
            End If 
            newStyle.Setters.Add(New Setter(Shape.FillProperty, brush)) 
        End If 
 
        If TypeOf item Is SeriesItemLabel Then 
            If (TryCast(item, SeriesItemLabel)).DataPoint.YValue > 300 Then 
                brush = New SolidColorBrush(Colors.Red) 
            Else 
                brush = New SolidColorBrush(Colors.Green) 
            End If 
            newStyle.Setters.Add(New Setter(SeriesItemLabel.FillProperty, brush)) 
            newStyle.Setters.Add(New Setter(SeriesItemLabel.StrokeProperty, brush)) 
        End If 
        If TypeOf item Is ChartLegendItem Then 
            brush = TryCast(Me.Resources("LegendItemStyle"), Brush) 
            newStyle.Setters.Add(New Setter(Path.FillProperty, brush)) 
        End If 
        Return newStyle 
    End Function 
End Class 

The LegendItemStyle used :

<LinearGradientBrush x:Key="LegendItemStyle" EndPoint="1,1" StartPoint="0,0"> 
<GradientStop Color="Red" Offset="0"/> 
<GradientStop Color="Red" Offset="0.5"/> 
<GradientStop Color="Green" Offset="0.51"/> 
<GradientStop Color="Green" Offset="1"/> 
</LinearGradientBrush> 

The picture below demonstrates the result: