DataBinding Issue with RadTreemap

[Thien]

Hi there,
I'm having an issue binding the data to RadTreeMap control. It just returned a blank page. I tried to copy the same code and data file  from the sample version which should render the data like in the attached file heatmapimage.png.
code in MainPage.xaml

<UserControl x:Class="TestHeatMap.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:example="clr-namespace:TestHeatMap"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.DataContext>
        <example:ExampleViewModel />
    </UserControl.DataContext>
    <UserControl.Resources>
        
        <DataTemplate x:Key="TransitionControlContentTemplate">
            <Border Background="#CCCCCC" BorderThickness="2" BorderBrush="#CCCCCC">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <TextBlock Text="General Information" FontFamily="Segoe UI Light"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                   FontSize="18" Margin="10,0,0,0"/>
                    <Grid Grid.Row="1" Background="White">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Image Source="{Binding ImagePath}"
                                   Stretch="Fill"
                                   Width="200" Height="200"
                                   Margin="5,20" />
                        <Border Grid.Row="1" BorderThickness="0,0,0,1" BorderBrush="#CCCCCC" Margin="10" Padding="0,0,0,5">
                            <TextBlock FontSize="20" FontFamily="Segoe UI" VerticalAlignment="Center" Text="{Binding Country}"/>
                        </Border>
                        <TextBlock Grid.Row="2" Margin="7,0,10,0" Text="{Binding Text}" FontFamily="Segoe UI" FontSize="13" Width="218" TextWrapping="Wrap"/>
                    </Grid>
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4.7*" />
            <ColumnDefinition Width="1.3*" />
        </Grid.ColumnDefinitions>
        <telerik:RadTreeMap Name="RadTreeMap" Grid.Column="0" ItemsSource="{Binding Data}"
                            IsSelectionEnabled="True" Loaded="RadTreeMap_Loaded"
                            LayoutStrategy="Squarified"
                            PreviewSelectionChanged="RadTreeMap_PreviewSelectionChanged" SelectionChanged="RadTreeMap_SelectionChanged">
            <telerik:RadTreeMap.TypeDefinitions>
                <telerik:TypeDefinition TargetTypeName="OilProducingInfo"                                      
                                        ValuePath="Oil"
                                        LabelPath="Country"
                                        ToolTipPath="Oil"
                                        ToolTipFormat="{}{0:N0} bbl/day" >
                    <telerik:TypeDefinition.Mappings>
                        <telerik:ValueGradientColorizer RangeMinimum="1011000" RangeMaximum="10120000">
                            <GradientStop Offset="0" Color="#C6E5A2" />
                            <GradientStop Offset="0.2" Color="#98C599" />
                            <GradientStop Offset="1" Color="#70AA92" />
                        </telerik:ValueGradientColorizer>
                    </telerik:TypeDefinition.Mappings>
                </telerik:TypeDefinition>
            </telerik:RadTreeMap.TypeDefinitions>
        </telerik:RadTreeMap>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="467"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <telerik:RadTransitionControl x:Name="TransitionWrapper" Duration="0:0:0" Margin="2,2,0,0"
                                          TransitionStatusChanged="TransitionWrapper_TransitionStatusChanged"
                                          ContentTemplate="{StaticResource TransitionControlContentTemplate}">
                <telerik:RadTransitionControl.Transition>
                    <telerik:SlideAndZoomTransition />
                </telerik:RadTransitionControl.Transition>
            </telerik:RadTransitionControl>
            <StackPanel Orientation="Horizontal" Grid.Row="1" Height="Auto" VerticalAlignment="Bottom">
                <Image Source="/Treemap;component/Images/Treemap/Selection/arrow.png" Stretch="None" Margin="2,2,0,0" VerticalAlignment="Center" />
                <TextBlock Text="choose another country from the treemap to view additional information" Width="210"
                           TextWrapping="Wrap" FontFamily="Segoe UI" Margin="5,0,15,0" FontSize="11" />
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>


code in MainPage.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.TransitionControl;
using Telerik.Windows.Controls.TreeMap;

using C = Telerik.Windows.Controls;
using P = Telerik.Windows.Controls.Primitives;
using Telerik.Windows;

namespace TestHeatMap
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void RadTreeMap_Loaded(object sender, RoutedEventArgs e)
        {
            RadTreeMapItem rootItem = this.RadTreeMap.FindChildByType<RadTreeMapItem>();
            if (rootItem != null)
            {
                if (rootItem.ItemContainerGenerator.Status == P.GeneratorStatus.ContainersGenerated)
                {
                    SelectItemFromGenerator(rootItem.ItemContainerGenerator);
                }
                else
                {
                    rootItem.ItemContainerGenerator.StatusChanged += this.RootItemItemContainerGenerator_StatusChanged;
                }
            }
        }

        private void RootItemItemContainerGenerator_StatusChanged(object sender, EventArgs e)
        {
            C.ItemContainerGenerator rootItemItemContainerGenerator = sender as C.ItemContainerGenerator;
            if (rootItemItemContainerGenerator.Status == P.GeneratorStatus.ContainersGenerated)
            {
                SelectItemFromGenerator(rootItemItemContainerGenerator);
            }
        }

        private void SelectItemFromGenerator(C.ItemContainerGenerator rootItemItemContainerGenerator)
        {
            RadTreeMapItem russiaContainer = rootItemItemContainerGenerator.ContainerFromIndex(0) as RadTreeMapItem;
            russiaContainer.IsSelected = true;
        }

        private void RadTreeMap_PreviewSelectionChanged(object sender, SelectionChangedRoutedEventArgs e)
        {
            if (e.SelectedItem == null)
                e.Cancel = true;
        }

        private void RadTreeMap_SelectionChanged(object sender, RadRoutedEventArgs e)
        {
            TransitionWrapper.Content = this.RadTreeMap.SelectedItem;
        }

        private void TransitionWrapper_TransitionStatusChanged(object sender, TransitionStatusChangedEventArgs e)
        {
            RadTransitionControl tc = (RadTransitionControl)sender;
            if (tc.Duration.TotalSeconds == 0)
            {
                tc.Dispatcher.BeginInvoke(new Action(ChangeDuration));
            }
        }

        private void ChangeDuration()
        {
            this.TransitionWrapper.Duration = new TimeSpan(0, 0, 1);
        }
    }
}

[Thien]

I got the RadTreeMap populated with static data, but when I binded the RadTreeMap to a Lightswitch query as DataContext, it returned empty map.  The binding to Lightswitch datacontext works for RadTreeListView, but not for RadTreeMap. I used TargetTypeName as HeatMaps which is the view in my Lightswitch datasource and was added in my lightswitch page where the custom control is. The property Type of the query is collectionView$HeatMap

 Here is my binding in the custom control.
 <telerik:RadTreeListView   Grid.Row="0"  ItemsSource="{Binding Value,Mode=TwoWay}"" x:Name="RadTreeListView1" >              
        </telerik:RadTreeListView>

        <telerik:RadTreeMap Name="RadTreeMap" BorderThickness="2" BorderBrush="#FF5F031C" Grid.Row="1" ItemsSource="{Binding Value,Mode=TwoWay}"  IsSelectionEnabled="True"
                            LayoutStrategy="Squarified"
                            Background="#FF7ECD8D">
                <telerik:RadTreeMap.TypeDefinitions>
                    <telerik:TypeDefinition TargetTypeName="HeatMap"                                      
                                        ValuePath="PCapture"
                                        LabelPath="PursuitName"
                                        ToolTipPath="PursuitName"
                                      >
                        <telerik:TypeDefinition.Mappings>
                        <telerik:BrushColorizer Brush="Red" />
                    </telerik:TypeDefinition.Mappings>
                    </telerik:TypeDefinition>
                </telerik:RadTreeMap.TypeDefinitions>
            </telerik:RadTreeMap>

The data is binded for RadTreeListView  , but not for RadTreeMap. Can you advise me how to bind the lightswitch datacontext to RadTreeMap?

[Ves]

Hi,

It seems you are using NO-XAML assemblies. RadControls are shipped in two versions -- with and without xaml included, the latter being optimized for size and therefore for download time. However, these assemblies require that you include the XAML for the controls you use manually. Please, find more details in this help topic.

Alternatively, you can update your project references to point to the assemblies found in Binaries/Silverlight subfolder of your local installation. The full path would look like this:

C:\Program Files (x86)\Telerik\RadControls for Silverlight Q3 2012\Binaries\Silverlight

Best regards,
Ves
the Telerik team

[Thien]

This is where I binded my telerik controls C:\Program Files (x86)\Telerik\RadControls for Silverlight Q3 2012\Binaries\Silverlight. I think there is no issue with the references because it's binding to the same datasource correctly for RadTreeListView  , but not for RadTreeMap. I wonder the way RadTreeMap binds to  lightswitch DataContext would be different? I have it binding like this for  RadTreeMap
  <telerik:RadTreeMap Name="RadTreeMap" BorderThickness="2" BorderBrush="#FF5F031C" Grid.Row="1" ItemsSource="{Binding Screen.HeatMaps,Mode=TwoWay}"  IsSelectionEnabled="True"
                            LayoutStrategy="Squarified"
                            Background="#FF7ECD8D">
                <telerik:RadTreeMap.TypeDefinitions>
                    <telerik:TypeDefinition TargetTypeName="HeatMap"                                      
                                        ValuePath="PCapture"
                                        LabelPath="PursuitName"
                                        ToolTipPath="PursuitName"
                                      >
                        <telerik:TypeDefinition.Mappings>
                        <telerik:BrushColorizer Brush="Red" />
                    </telerik:TypeDefinition.Mappings>
                    </telerik:TypeDefinition>
                </telerik:RadTreeMap.TypeDefinitions>
            </telerik:RadTreeMap>

So I wonder if I should write a HeatMap class in silverlight control . Can you give me an example of how RadTreeMap in a silverlight control binds to the datacontext in a Lightswitch app?

[Ves]

Hi,

The project you have attached to your initial post contains the following reference:

<Reference Include="Telerik.Windows.Controls.DataVisualization, Version=2012.3.1017.1050, Culture=neutral, PublicKeyToken=5803cfa389c90ce7, processorArchitecture=MSIL">
      <SpecificVersion>False</SpecificVersion>
      <HintPath>..\..\..\..\..\..\..\Program Files (x86)\Telerik\RadControls for Silverlight Q3 2012\Demos\lib\Silverlight\Telerik.Windows.Controls.DataVisualization.dll</HintPath>
    </Reference>

This points to the NoXaml version of DataVisualization.dll, used in our Quick Start Framework. Please, update the references to point to the xaml versions of the assemblies.

Best regards,
Ves
the Telerik team