none
TreeMap Control in Lightswitch Application RRS feed

  • Question

  • I have been able to implement a custom control using the Silverlight Toolkit's TreeMap control, but it will only display the first level of the hierarchy.  Below is the XAML for the treeMapControl in my custom control. 

     

            <datavis:TreeMap x:Name="treeMapControl" Grid.Row="0" ItemsSource="{Binding}">
    
                <datavis:TreeMap.ItemDefinitionSelector>
                    <local:AlternatingItemDefinitionSelector>
                        <datavis:TreeMapItemDefinition x:Name="treeMapControlItemDefinition1" ItemsSource="{Binding Converter={StaticResource LocalEntityCollectionValueConverter}, ConverterParameter=Children}" ValueBinding="{Binding Children.Count}" ChildItemPadding="5,20,5,5">
                            <DataTemplate>
                                <Border Background="#fff0c0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                                    <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                </Border>
                            </DataTemplate>
                        </datavis:TreeMapItemDefinition>
    
                        <datavis:TreeMapItemDefinition  x:Name="treeMapControlItemDefinition2" ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=Children}" ValueBinding="{Binding Children.Count}" ChildItemPadding="20,5,5,5">
                            <DataTemplate>
                                <Border Background="#ffc0f0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                                    <TextBlock x:Name="textBlk" Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" RenderTransformOrigin="0,1" VerticalAlignment="Top">
                                    </TextBlock>
                                </Border>
                            </DataTemplate>
                        </datavis:TreeMapItemDefinition>
    
                    </local:AlternatingItemDefinitionSelector>
                </datavis:TreeMap.ItemDefinitionSelector>
            </datavis:TreeMap>
    
    

    Here is the code for for the Convert function of LocalEntityCollectionValueConverter:

     

     

        Public Function Convert(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
            Dim entities As New ObservableCollection(Of IEntityObject)
            Try
                Dim entity As IEntityObject = value
                If entity Is Nothing Then
                    Throw New ArgumentException("The converter shoud be passed a lightswitch entity object.")
                End If
                Dim PropertyName As String = TryCast(parameter, String)
                If String.IsNullOrWhiteSpace(PropertyName) Then
                    Throw New ArgumentException("Converter parameter should be set to the property name that will serve as source of data.")
                End If
                Dim tempEntites As New List(Of IEntityObject)
    
    
                entity.Details.Dispatcher.BeginInvoke(Function()
                                                          Dim eCollection As IEntityCollection = TryCast(entity.Details.Properties(PropertyName).Value, IEntityCollection)
                                                          If eCollection Is Nothing Then
                                                              Debug.Assert(False, "The property " + PropertyName + " is not an entity collection.")
                                                              Return eCollection
                                                          End If
                                                          For Each e As IEntityObject In eCollection
                                                              tempEntites.Add(e)
                                                          Next
                                                          Microsoft.LightSwitch.Threading.Dispatchers.Main.BeginInvoke(Function()
                                                                                                                           For Each e As IEntityObject In tempEntites
                                                                                                                               entities.Add(e)
                                                                                                                           Next
                                                                                                                           Return entities
                                                                                                                       End Function)
                                                          Return eCollection
                                                      End Function)
    
    
            Catch ex As Exception
                Dim m = ex.Message
            End Try
            Return entities
        End Function
    
    

    The Return entities of the main function always returns a collection with zero (0) entities.  It does this before the code in the entity Dispatcher has a chance to execute in the debugger.  When the entity Dispather thread executes, the collections are built correctly, but they are not returned via the main function thread and it appears the TreeMap is never getting the ItemsSource for the TreeMapItemDefintions filled, thus causing only the root level of the hierarchy to display.  However, this same converter works fine with a treeview control in lightswitch.

     

    Has anyone successfully implemented a TreeMap in Lightswitch?

     

    Thanks,

    Dave

     

     RESOLVED!

    I finally was able to get the TreeMap to display multiple levels.  The trick was including a nested TreeMap inside each DataTemplate.  This XAML has 4 nested TreeMaps.

     

    <UserControl x:Class="SilverlightCustomControls.TreeMapFourLevel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
                 xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
                 xmlns:local="clr-namespace:SilverlightCustomControls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.Resources>
                <Style x:Key="ContainerStyle" TargetType="Panel">
                    <Setter Property="Margin" Value="8"/>
                </Style>
                <Style x:Key="TitleStyle" TargetType="TextBlock">
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="FontSize" Value="14"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Style>
                <LinearGradientBrush x:Key="GradientOverlay">
                    <GradientStop Color="#55ffffff" Offset="0"/>
                    <GradientStop Color="#00ffffff" Offset="1"/>
                </LinearGradientBrush>
                <local:LocalEntityCollectionValueConverter x:Key="LocalEntityCollectionValueConverter" />
                <local:EntityCollectionValueConverter x:Key="EntityCollectionValueConverter" />
                <local:RootEntityCollectionValueConverter x:Key="RootEntityCollectionValueConverter"/>
                <datavis:TreeMapItemDefinition x:Name="treeMapItemDefinition" ValuePath="SizeValue" ChildItemPadding="5,20,5,5">
                    <DataTemplate>
                        <Border Background="#fff0c0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30"/>
                                    <RowDefinition Height="30*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                <datavis:TreeMap Grid.Row="1" ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=Children}">
                                    <datavis:TreeMap.ItemDefinition>
                                        <datavis:TreeMapItemDefinition  ValuePath="SizeValue">
                                            <DataTemplate>
                                                <Border Background="#fff0c0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                                                    <Grid>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="30"/>
                                                            <RowDefinition Height="30*"/>
                                                        </Grid.RowDefinitions>
                                                        <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                                        <datavis:TreeMap Grid.Row="1" ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=Children}">
                                                            <datavis:TreeMap.ItemDefinition>
                                                                <datavis:TreeMapItemDefinition  ValuePath="SizeValue">
                                                                    <DataTemplate>
                                                                        <Border Background="#fff0c0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                                                                            <Grid>
                                                                                <Grid.RowDefinitions>
                                                                                    <RowDefinition Height="30"/>
                                                                                    <RowDefinition Height="30*"/>
                                                                                </Grid.RowDefinitions>
                                                                                <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                                                                <datavis:TreeMap Grid.Row="1" ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=Children}">
                                                                                    <datavis:TreeMap.ItemDefinition>
                                                                                        <datavis:TreeMapItemDefinition  ValuePath="SizeValue">
                                                                                            <DataTemplate>
                                                                                                <Border Background="#fff0c0c0" BorderBrush="Black" BorderThickness="1" CornerRadius="4" ToolTipService.ToolTip="{Binding Description}">
                                                                                                    <Grid>
                                                                                                        <Grid.RowDefinitions>
                                                                                                            <RowDefinition Height="30"/>
                                                                                                            <RowDefinition Height="30*"/>
                                                                                                        </Grid.RowDefinitions>
                                                                                                        <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                                                                                        <datavis:TreeMap Grid.Row="1" ItemsSource="{Binding Converter={StaticResource EntityCollectionValueConverter}, ConverterParameter=Children}">
                                                                                                            <datavis:TreeMap.ItemDefinition>
                                                                                                                <datavis:TreeMapItemDefinition  ValuePath="SizeValue">
                                                                                                                    <DataTemplate>
                                                                                                                        <Border BorderBrush="Gray" BorderThickness="1 1 0 0" ToolTipService.ToolTip="{Binding Description}">
                                                                                                                            <TextBlock Text="{Binding Name}" Margin="2,2,0,0" TextWrapping="Wrap" TextAlignment="Center"/>
                                                                                                                        </Border>
                                                                                                                    </DataTemplate>
                                                                                                                </datavis:TreeMapItemDefinition>
                                                                                                            </datavis:TreeMap.ItemDefinition>
                                                                                                        </datavis:TreeMap>
                                                                                                    </Grid>
                                                                                                </Border>
                                                                                            </DataTemplate>
                                                                                        </datavis:TreeMapItemDefinition>
                                                                                    </datavis:TreeMap.ItemDefinition>
                                                                                </datavis:TreeMap>
                                                                            </Grid>
                                                                        </Border>
                                                                    </DataTemplate>
                                                                </datavis:TreeMapItemDefinition>
                                                            </datavis:TreeMap.ItemDefinition>
                                                        </datavis:TreeMap>
                                                    </Grid>
                                                </Border>
                                            </DataTemplate>
                                        </datavis:TreeMapItemDefinition>
                                    </datavis:TreeMap.ItemDefinition>
                                </datavis:TreeMap>
                            </Grid>
                        </Border>
                    </DataTemplate>
    
                </datavis:TreeMapItemDefinition>
    
            </Grid.Resources>
            <datavis:TreeMap x:Name="treeMapControl" Grid.Row="0" ItemsSource="{Binding Path=Value}"  ItemDefinition="{StaticResource treeMapItemDefinition}">
            </datavis:TreeMap>
    
    
        </Grid>
    </UserControl>
    

     


    • Edited by DaveVanB Sunday, January 15, 2012 5:07 PM
    Thursday, January 12, 2012 3:28 PM

Answers