Question

I am trying to customized my tooltip – PieDataPoint, however, palette’s are not working anymore. Is there anything that I’ve missed out?

It seems that when I add the below to PieDataPoint, the chart becomes red.

<Setter Property="Background" Value="Red"/>

Thanks!

<charting:PieSeries
        ItemsSource="{Binding}"
        DependentValueBinding="{Binding Length}"
        IndependentValueBinding="{Binding}">
            <charting:PieSeries.DataPointStyle>
                <Style TargetType="charting:PieDataPoint">
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="RatioStringFormat" Value="{}{0:p2}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="charting:PieDataPoint">
                                <Grid
                    x:Name="Root"
                    Opacity="0">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <DoubleAnimation
                                        Storyboard.TargetName="MouseOverHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Unselected"/>
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <DoubleAnimation
                                        Storyboard.TargetName="SelectionHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="RevealStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Shown">
                                                <Storyboard>
                                                    <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Hidden">
                                                <Storyboard>
                                                    <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Path
                        x:Name="Slice"
                        Data="{TemplateBinding Geometry}"
                        Fill="{TemplateBinding Background}"
                        Stroke="{TemplateBinding BorderBrush}"
                        StrokeMiterLimit="1">
                                        <ToolTipService.ToolTip>
                                            <StackPanel>
                                                <ContentControl Content="Test"/>
                                                <ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
                                                <ContentControl Content="{TemplateBinding FormattedRatio}"/>
                                            </StackPanel>
                                        </ToolTipService.ToolTip>
                                    </Path>
                                    <Path
                        x:Name="SelectionHighlight"
                        Data="{TemplateBinding GeometrySelection}"
                        Fill="Red"
                        StrokeMiterLimit="1"
                        IsHitTestVisible="False"
                        Opacity="0"/>
                                    <Path
                        x:Name="MouseOverHighlight"
                        Data="{TemplateBinding GeometryHighlight}"
                        Fill="White"
                        StrokeMiterLimit="1"
                        IsHitTestVisible="False"
                        Opacity="0"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </charting:PieSeries.DataPointStyle>
            <charting:PieSeries.Palette>
                <datavis:ResourceDictionaryCollection>

                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <GradientStop Color="#FFB8C0AC"/>
                            <GradientStop Color="#FF5F7143" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>

                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <GradientStop Color="#FFFDE79C"/>
                            <GradientStop Color="#FFF6BC0C" Offset="1"/>
                        </RadialGradientBrush>
                        <Style x:Key="DataPointStyle" TargetType="Control">
                            <Setter Property="Background" Value="{StaticResource Background}"/>
                        </Style>
                        <Style x:Key="DataShapeStyle" TargetType="Shape">
                            <Setter Property="Stroke" Value="{StaticResource Background}" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                            <Setter Property="Fill" Value="{StaticResource Background}" />
                        </Style>
                    </ResourceDictionary>
                </datavis:ResourceDictionaryCollection>
            </charting:PieSeries.Palette>
        </charting:PieSeries>

Answer 1

Fortunately, I solved this by putting some code in codebehind. However, my another question now is how to apply this one in MVVM?

In my XAML here’s my chart:

<charting:Chart  x:Name="tempChart"
        Title="Simple Palette Change"
        Grid.Column="0"
        Grid.Row="1">
        <charting:PieSeries
            ItemsSource="{Binding}"
            DependentValueBinding="{Binding Length}"
            IndependentValueBinding="{Binding}">
        </charting:PieSeries>
    </charting:Chart>

In my XAML resources here’s my datapoint template:

<ControlTemplate x:Key="pi" TargetType="charting:PieDataPoint">
        <Grid x:Name="Root" Opacity="0">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.1"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation
                                        Storyboard.TargetName="MouseOverHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="SelectionStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.1"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Unselected"/>
                    <VisualState x:Name="Selected">
                        <Storyboard>
                            <DoubleAnimation
                                        Storyboard.TargetName="SelectionHighlight"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.6"
                                        Duration="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="RevealStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0:0:0.5"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Shown">
                        <Storyboard>
                            <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Hidden">
                        <Storyboard>
                            <DoubleAnimation
                                        Storyboard.TargetName="Root"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Path x:Name="Slice"
                Data="{TemplateBinding Geometry}"
                Fill="{TemplateBinding Background}"
                Stroke="{TemplateBinding BorderBrush}"
                StrokeMiterLimit="1">
                <ToolTipService.ToolTip>
                    <StackPanel>
                        <ContentControl>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{TemplateBinding IndependentValue}" />
                                <TextBlock Text=" - "/>
                                <TextBlock Text="{TemplateBinding FormattedDependentValue}"/>
                            </StackPanel>
                        </ContentControl>
                        <ContentControl Content="{TemplateBinding FormattedRatio}"/>
                    </StackPanel>
                </ToolTipService.ToolTip>
            </Path>
            <Path x:Name="SelectionHighlight"
                Data="{TemplateBinding GeometrySelection}"
                Fill="Red"
                StrokeMiterLimit="1"
                IsHitTestVisible="False"
                Opacity="0"/>
            <Path x:Name="MouseOverHighlight"
                Data="{TemplateBinding GeometryHighlight}"
                Fill="White"
                StrokeMiterLimit="1"
                IsHitTestVisible="False"
                Opacity="0"/>
        </Grid>
    </ControlTemplate>

In my code behind:

ResourceDictionaryCollection palette = new ResourceDictionaryCollection();
        Random rom = new Random();
        for (int i = 0; i < 256; i++)
        {
            byte r = Convert.ToByte(rom.Next(256));
            byte g = Convert.ToByte(rom.Next(256));
            byte b = Convert.ToByte(rom.Next(256));
            Style style = new Style(typeof(Control));
            style.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Color.FromArgb(255, r, g, b))));
            style.Setters.Add(new Setter(TemplateProperty, this.Resources["pi"]));
            ResourceDictionary dictionary = new ResourceDictionary();
            dictionary.Add("DataPointStyle", style);
            palette.Add(dictionary);
        }

        tempChart.Palette = palette;

Here’s the output of my custom PieDataPoint with Palette: