DataBinding Issue with RadTreemap

5 posts, 0 answers
  1. Thien
    Thien avatar
    4 posts
    Member since:
    Mar 2012

    Posted 06 Nov 2012 Link to this post


    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);
            }
        }
    }



  2. Thien
    Thien avatar
    4 posts
    Member since:
    Mar 2012

    Posted 07 Nov 2012 Link to this post

    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?
  3. DevCraft banner
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 09 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Thien
    Thien avatar
    4 posts
    Member since:
    Mar 2012

    Posted 09 Nov 2012 Link to this post

    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?
  6. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Nov 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner