Charts: Creating custom style for LineDataPoint

If you have ever created a Silverlight application to displaying statistics, you will know of the charting functionality in Silverlight – or rather the Silverlight Toolkit from Codeplex . You will also know that there is tons of things that can be changed through styles and more, this post will explain how to change the default style of a Data Point.

First I will show a screenshot of a sample DataPoint – showing the ToolTip:

What is shown in the picture above is tooltip for a LineDataPoint, the tooltip displays the individual DataPoints DependentValue. What we will do in this example is simply to modify the style of the LineDataPoint so we can display the IndependentValue as well. Also in this example the IndependentValue is a DateTime value, so we will be creating and implementing a converter into the style, so we can display the IndependentValue in the desired format.

Firstly we will show the code for the Converter, which will convert the DateTime to the desired format:

public class ChartDateTimeConverter : IValueConverter
{
   #region IValueConverter Members

   public object Convert(object value,System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
      DateTime thisdate = (DateTime)value;
      return thisdate.ToLongDateString();
   }

   // ConvertBack is not implemented
   public object ConvertBack(object value,System.Type targetType, object parameter,System.Globalization.CultureInfo culture)
   {
      throw new NotImplementedException();
   }
   #endregion
}

And here is the style, for the DataPoint:

<Style x:Key="DataPointStyle" TargetType="chartingToolkit:LineDataPoint">
    <Setter Property="Background" Value="#0077CC" />
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                <Grid x:Name="Root" Opacity="1">
                    <ToolTipService.ToolTip>
                        <StackPanel Margin="3">
                            <StackPanel.Resources>
                                <Converters:ChartDateTimeConverter x:Key="ChartDateConverter"/>
                            </StackPanel.Resources>
                            <dataInput:Label DataContext="{TemplateBinding IndependentValue}" Content="{Binding Converter={StaticResource ChartDateConverter}}"/>
                            <dataInput:Label Content="{TemplateBinding DependentValue}"/>
                        </StackPanel>
                    </ToolTipService.ToolTip>
                    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Finally here is the code for adding the style to a given LineSeries object:

Style dpStyle = Application.Current.Resources["DataPointStyle"] as Style;
lineSeries.DataPointStyle = dpStyle;

That is all, to finish up here is a screenshot of the new result:

The style can of course be made more complex – this example is only to show the use of the converter

Best Regards
/Peter

See larger image Silverlight 4 in Action (Paperback) By (author) Pete Brown List Price: $49.99 USD New From: $24.99 In Stock Used from: $19.75 In Stock