Wednesday, July 11, 2012

DataPoint style in Chart with default Background Color


I have a very wierd issue with style of Silverlight Charting controls. When I create a DataPointStyle for anyseries It ignore the existing default color combination. It starts showing me same(orange) color for everything even I haven't set anything in the background of DataPointStyle.
What I want is to create some custom tooltip and leave the background as it is. But its not working for me. 
Here is the solution for this problem.
I think the trick is not to apply the data-point style to the chart itself, but rather to the individual colours that make up the palette.

I started with the following, which uses a PieChart. The same principles should apply when using other types of chart:

<UserControl x:Class="ChartPaletteDemo.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"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Key="pointStyle" TargetType="toolkit:DataPoint">
            <Setter Property="DependentValueStringFormat"
                    Value="The value is {0:N0}" />
            <Setter Property="RatioStringFormat" Value="" />
        </Style>
    </UserControl.Resources>

    <toolkit:Chart>
        <toolkit:Chart.Series>
            <toolkit:PieSeries ItemsSource="{Binding Path=Data}"
                               IndependentValueBinding="{Binding Path=Key}"
                               DependentValueBinding="{Binding Path=Value}"
                               DataPointStyle="{StaticResource pointStyle}" />
        </toolkit:Chart.Series>
    </toolkit:Chart>
</UserControl>
This gave me a pie chart with the customised tooltip text but with all segments orange.

The next step is to set a custom palette. A palette used by the Silverlight Toolkit charts is a ResourceDictionaryCollection, with each contained ResourceDictionary representing a colour within the palette. You can find the 'default' palette for the chart within Themes\generic.xaml in the assembly System.Windows.Controls.DataVisualization.Toolkit. You can use a tool such as Blend or ILSpy to get at this palette.

I took this 'default' palette, and:

removed all of the setters for the DataShapeStyle (I'm not sure they're necessary, but you can keep them if you wish),
changed the TargetType of each DataPointStyle from Control to toolkit:DataPoint, and
added BasedOn="{StaticResource pointStyle}" to each DataPointStyle.
This last point is what sets up the custom tooltip format with each palette entry.

This left me with something like the following, which I added to <UserControl.Resources>:

    <toolkit:ResourceDictionaryCollection x:Key="chartPalette">
        <!-- Blue -->
        <ResourceDictionary>
            <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"
                                 Center="0.075,0.015" RadiusX="1.05"
                                 RadiusY="0.9">
                <GradientStop Color="#FFB9D6F7" />
                <GradientStop Color="#FF284B70" Offset="1" />
            </RadialGradientBrush>
            <Style x:Key="DataPointStyle" TargetType="toolkit:DataPoint"
                   BasedOn="{StaticResource pointStyle}">
                <Setter Property="Background"
                        Value="{StaticResource Background}" />
            </Style>
        </ResourceDictionary>
        <!-- other styles copied similarly, but omitted for brevity -->
   </toolkit:ResourceDictionaryCollection>
I then removed DataPointStyle="{StaticResource pointStyle}" from the PieSeries and added Palette="{StaticResource chartPalette}" to the <toolkit:Chart> element instead. When I ran the application I got the four segments of the pie to use different colours.

Acknowledgement: most of this has been taken from atomlinson's post on the Silverlight forums at http://forums.silverlight.net/post/330170.aspx.

No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog