This is a migrated thread and some comments may be shown as answers.

Legend for RadTreeMap with Marker Colors

2 Answers 53 Views
TreeMap and PivotMap
This is a migrated thread and some comments may be shown as answers.
Ernie S
Top achievements
Rank 1
Ernie S asked on 01 Aug 2014, 03:40 PM
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" />
13.                    <TextBlock Text="{Binding Title, TargetNullValue='{}{NONE}'}"
14.                               Margin="10,1,5,1"/>
16.                    <TextBlock Text="{Binding Presenter.Value, StringFormat='({0:C0})'}"
17.                               Margin="5,1" />
18.                </StackPanel>
19.            </ControlTemplate>
20.        </Button.Template>
21.    </Button>

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();
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.    })
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:

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

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


2 Answers, 1 is accepted

Sort by
Petar Marchev
Telerik team
answered on 05 Aug 2014, 08:32 AM
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.

Petar Marchev
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Ernie S
Top achievements
Rank 1
answered on 05 Aug 2014, 06:22 PM
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.
TreeMap and PivotMap
Asked by
Ernie S
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Ernie S
Top achievements
Rank 1
Share this question