CODEWITHSUNDEEP
silverlightchartssilverlight-toolkit
vinod8812
vinod8812

Reputation: 715

Datapoint style in Silverlight Chart Series(ColumnSeries/BarSeries/LineSeries)

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. Any suggestion is much appreciated.

Cheers!

Vinod

Upvotes: 1

Views: 3383

Answers (1)

Luke Woodward
Luke Woodward

Reputation: 64959

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.

Upvotes: 2

Related Questions