Legend for RadTreeMap with Marker Colors

3 posts, 1 answers
  1. Ernie S
    Ernie S avatar
    33 posts
    Member since:
    Apr 2014

    Posted 01 Aug 2014 Link to this post

    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
  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 05 Aug 2014 Link to this post

    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
     
    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.
     
  3. DevCraft banner
  4. Ernie S
    Ernie S avatar
    33 posts
    Member since:
    Apr 2014

    Posted 05 Aug 2014 in reply to Petar Marchev Link to this post

    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
Back to Top