Legend for RadTreeMap with Marker Colors

[Ernie S]

I have an MVVM setup that is using both PieCharts and TreeMaps.  I am able to bind the RadLegend directly to the PieChart without issue.  I can apply a template that, among other things, can consume the Marker Symbol / Color the pies are drawn with in the Legend using a template like so:

01.<DataTemplate x:Key="LegendItemButtonDataTemplate">
02.    <Button HorizontalAlignment="Stretch"
03.            VerticalAlignment="Center"
04.            Command="{Binding DataContext.ShowDataCommand, RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}"
05.            CommandParameter="{Binding }">
06.        <Button.Template>
07.            <ControlTemplate>
08.                <StackPanel Orientation="Horizontal"
09.                            Background="Transparent">
10.                    <Rectangle Fill="{Binding MarkerFill}"
11.                               Width="10" Height="10" />
12.
13.                    <TextBlock Text="{Binding Title, TargetNullValue='{}{NONE}'}"
14.                               Margin="10,1,5,1"/>
15.
16.                    <TextBlock Text="{Binding Presenter.Value, StringFormat='({0:C0})'}"
17.                               Margin="5,1" />
18.                </StackPanel>
19.            </ControlTemplate>
20.        </Button.Template>
21.    </Button>
22.</DataTemplate>

Ignoring everything else, line 10 shows the binding so that the custom template shows the color of the pie in the legend.

I would like to reproduce this ability for the RadTreeMap which, as far as I know, does NOT support directly binding to the Legend.  So I created a Collection in the ViewModel of IEnumerable LegendItems and manually fill it like so:

1.<telerikControl:RadLegend Items="{Binding LegendItems}"
2.                          ItemTemplate="{StaticResource LegendItemButtonDataTemplate}"
3.                          Foreground="White"
4.                          Margin="10"
5.                          HorizontalAlignment="Left"
6.                          VerticalAlignment="Top"
7.                          HoverMode="FadeOtherItems"/>

01.var legenditems = new LegendItemCollection();
02.legenditems.AddRange(
03.    distinctlist.Select(ci =>
04.    {
05.        var legenditem = new LegendItem
06.        {
07.            Title = ci.Label,
08.            MarkerFill = ????????,
09.            Presenter = ci
10.        };
11.        return legenditem;
12.    })
13.);
14.
15.LegendItems = legenditems;

Line 8 is the problem in that last section.  ci are the objects in the VM that contain the label and value data.  But since the TreeMap generates the colors in XAML like this:

01.<telerik:RadTreeMap.TypeDefinitions>
02.    <telerik:TypeDefinition TargetTypeName="ChartItem"
03.                            LabelPath="Label"
04.                            ValuePath="Value"
05.                            ToolTipPath="Value"
06.                            ToolTipFormat="{}{0:#,###.00}"
07.                            ItemTemplate="{StaticResource itemTemplate}">
08.
09.        <telerik:TypeDefinition.Mappings>
10.
11.            <telerik:RelativeValueGradientColorizer>
12.                <GradientStop Offset="0" Color="DarkGreen" />
13.                <GradientStop Offset="1" Color="LightGreen" />
14.            </telerik:RelativeValueGradientColorizer>
15.
16.        </telerik:TypeDefinition.Mappings>
17.
18.    </telerik:TypeDefinition>
19.</telerik:RadTreeMap.TypeDefinitions>

how do I access the the color used in the ViewModel?  I do not see an obvious way in the RadLegend members. 

Thanks
Ernie

[Petar Marchev]

Hi Ernie,

You are absolutely correct, the only control that currently generates legend items is the chart view and the tree map does not have built-in integration with the LegendItems.

You will not be able to set the marker fill in such a way, because you are creating the legend items based on the model items, which have no knowledge of the visual items, hence no knowledge of the brushes. I suggest you go with an attached-property approach. You can create a boolean property to force the treemap to generate legend items. The legend items can be set to a second attached property, which the legend can get and use. I have attached a small project demonstrating this.

<telerik:RadTreeMap x:Name="treeMap1" local:TreeMapUtilities.IsLegendItemsGenerator="True" />

<telerik:RadLegend Items="{Binding (local:TreeMapUtilities.LegendItems), ElementName=treeMap1}" />

Let us know if this is the desired effect and if you can apply this approach to your actual application.

Regards,
Petar Marchev
Telerik

 

 

[Ernie S]

Thanks Petar.  That is very helpful!

Based on what you provided I ended up creating a Behavior and using the Layout Update event associated with the TreeMap called by a dependency object to avoid using the dispatcher call but the end result is the same and works great.

Appreciate the help.
Ernie