How to reuse Legend definition

[Cedric]

Hi,
I want to use the same legend on several graph without duplicate xaml everywhere but when i do this the legend is displayed only in one chart :

the definition of my legend:

<telerik:ChartLegend x:Uid="ClassificationLegend"
                         x:Key="ClassificationLegend"
                         Name="ClassificationLegend"
                         Visibility="Visible"
                         Header=""
                         Padding="0,0,5,0"
                         HorizontalContentAlignment="Right"
                         VerticalAlignment="Center"
                         BorderThickness="0"
                         Background="Transparent"
                         UseAutoGeneratedItems="False">
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_1"
                                 Label="Success"
                                 MarkerFill="{x:Static sim:ClassificationStatusColors.SuccessBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_2"
                                 Label="Hesitation"
                                 MarkerFill="{x:Static sim:ClassificationStatusColors.HesitationBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_3"
                                 Label="Unknown"
                                 MarkerFill="{x:Static sim:ClassificationStatusColors.UnknownBrush}" />
        <telerik:ChartLegendItem x:Uid="telerik:ChartLegendItem_4"
                                 Label="Misrecognition"
                                 MarkerFill="{x:Static sim:ClassificationStatusColors.MisrecognitionBrush}" />
    </telerik:ChartLegend>

The way i use it:

<telerik:RadChart Name="chartStrategyPerformanceMax"
Background="Transparent"
BorderThickness="0"
IsTabStop="False"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadFluidContentControl, Mode=FindAncestor},  Path=DataContext}"
ItemsSource="{Binding StatusGroup}"
PaletteBrushes="{Binding BrushPalette}">
<telerik:RadChart.SeriesMappings>
<!-- snip -->
</telerik:RadChart.SeriesMappings>

<telerik:RadChart.DefaultView>
<telerik:ChartDefaultView ChartLegend="{StaticResource ClassificationLegend}">
<telerik:ChartDefaultView.ChartArea>
<telerik:ChartArea LegendName="ClassificationLegend"
        SmartLabelsEnabled="True" />
</telerik:ChartDefaultView.ChartArea>
</telerik:ChartDefaultView>
</telerik:RadChart.DefaultView>
</telerik:RadChart>

and same in another chart:

<telerik:RadChart ItemsSource="{Binding DocumentsClassificationScore}"
            PaletteBrushes="{x:Static sim:ClassificationStatusColors.ClassificationPalette}">
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView ChartLegend="{StaticResource ClassificationLegend}">
                <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea LegendName="ClassificationLegend"/>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
...

I think because of the staticResource only one instance of the legend is created and this instance can only be owned by one chartarea (am i right ?).
But there is no LegendStyle and even i don't know a way to add LegendItem by style so, is there a way to not copy/paste the same lines in all my graph. A way in declarative xaml of course and without code behind...

- Cedric -

[Yavor]

Hello Cedric,

RadChart support setting style for your legend through the LegendStyle property as explained in this topic in our help system. Currently you can't add items directly in the style using a setter, but you can add an EventSetter and attach the Loaded event of the legend to a method in your code behind that can add the items. Here is some sample code:

<Window.Resources>
    <Style x:Key="legendStyle" TargetType="telerik:ChartLegend">
        <Setter Property="Padding" Value="0,0,5,0" />
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="UseAutoGeneratedItems" Value="False" />
        <EventSetter Event="Loaded" Handler="ChartLegend_Loaded" />
    </Style>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <telerik:RadChart Name="chart1" LegendStyle="{StaticResource legendStyle}" Grid.Column="0" />
    <telerik:RadChart Name="chart2" LegendStyle="{StaticResource legendStyle}" Grid.Column="1" />
</Grid>

And the ChartLegend_Loaded method:

void ChartLegend_Loaded(object sender, RoutedEventArgs e)
{
    ChartLegend legend = sender as ChartLegend;
    legend.Items.Add(new ChartLegendItem() { Label = "Success" });
    legend.Items.Add(new ChartLegendItem() { Label = "Hesitation" });
    legend.Items.Add(new ChartLegendItem() { Label = "Unknown" });
    legend.Items.Add(new ChartLegendItem() { Label = "Misrecognition" });
}

I have attached a sample project that demonstrates the mentioned approach. Feel free to modify it as you please.

Hope this helps!

All the best,
Yavor Ivanov
the Telerik team

[Cedric]

Thanks a lot !!!

- Cedric -