Silverlight PieSeries custom LegendItem with Buttons (and FormattedRatio percentage)

Question

For my PieSeries, I'd like to have the legend with buttons which have the Fill colour of the relevant slice, I would also like the buttons to have the percentage as shown in the tooltip using the FormattedRatio. Here's what I have so far:

Unfortunately, as can be seen all the slices have now gone orange, which forums have said is a standard problem but provide no obvious reason, also "FormattedRatio" is not available to the LegendItem. (I would like it to say Example B : 10.17%.)

Does anyone know how I can get colours back and how I can use the percentage in the legendItem?

Edit:

Have been able to change the background of the slices using this answer but the LegentItems don't change according to the new colour scheme.

The colours are correct - I'm using test data which is wrong.

Answer 1

There is an easy way to change colors: redefine the Palette property. I already answered a similar question about colors, here is it: https://stackoverflow.com/a/5626435/427225

As to the legend items, it is not possible to access the FormattedRatio property, because the toolkit library contains lot of bugs, but you can display properties of bound items, and I will show you an example.

At first, you need to create the style for the LegendItem class. It is the same as the default one, except of 2 changes: your own ContentTemplate which I named testItemTemplate, and changed binding of the Content property to {Binding DataContext} instead of the previous one.

<UserControl.Resources>
    <Style x:Key="testLegendItemStyle" TargetType="chart:LegendItem">
        <Setter Property="ContentTemplate" Value="{StaticResource testItemTemplate}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chart:LegendItem">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="1" Margin="0,0,3,0"/>
                            <datavis:Title Content="{Binding DataContext}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<chart:Chart>
    <chart:PieSeries ItemsSource="{Binding Items}" IndependentValuePath="Title" DependentValuePath="Value" LegendItemStyle="{StaticResource testLegendItemStyle}" />
</chart:Chart>

Next, you need to write the previously mentioned testItemTemplate according to your models, here is the example.

C# view models

var items = new[] {
    new ItemViewModel(){ Title = "Apples", Value = 35, CalculatedAndFormattedValue = "1%" },
    new ItemViewModel(){ Title = "Bananas", Value = 43, CalculatedAndFormattedValue = "4%"  },
    new ItemViewModel(){ Title = "Oranges", Value = 29, CalculatedAndFormattedValue = "3%"  },
    new ItemViewModel(){ Title = "Cherries", Value = 51, CalculatedAndFormattedValue = "2%"  },
    new ItemViewModel(){ Title = "Lemons", Value = 31, CalculatedAndFormattedValue = "5%"  },
};

Xaml DataTemplate

<DataTemplate x:Key="testItemTemplate">
    <TextBlock>
        <Run Text="{Binding Title}" />
        <Run Text=" - " />
        <Run Text="{Binding CalculatedAndFormattedValue}" />
    </TextBlock>
</DataTemplate>

Needless to say, that you should calculate percents by yourself