Tree Map Control In Silverlight 3 Application

Introduction

In this article we will explore on TreeMap Control.The TreeMap is a control which displays hierarchical data as a collection of nested rectangles whose area (and other properties) are proportional to selected metrics within that data. TreeMap control comes with Silverlight 3 Toolkit.

Creating Silverlight Project
 

Fire up Blend 3 and create a Silverlight Application. Name it as TreeMapInSL3. 

Go ahead and find the control in Asset Library. You will get the below result. 

Add this control to your application.
We need sample data for displaying in TreeMap so add a class named DriveData.cs. 

Now add the code to the Class you just created.
 

public class DriveData
    {
        public string DataType { set; get; }
        public double SizeOccupied { set; get; }
        public string ToolTip
        {
            get
            {
                return DataType + ": " + SizeOccupied + " GB";
            }
        }
    }

Now add a DataGrid to your application, it has nothing to do with TreeMap. DataGrid is for displaying the sample data only.

<data:DataGrid x:Name="MyDataGrid" AutoGenerateColumns="False" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="200">
<data:DataGrid.Columns>
        <data:DataGridTextColumn IsReadOnly="True" Header="DataType" Binding="{Binding DataType}"/>
        <data:DataGridTextColumn IsReadOnly="True" Header="SizeOccupied" Binding="{Binding SizeOccupied}"/>
 </data:DataGrid.Columns>
</data:DataGrid>

As you see from above xaml code, the columns are bind to the Properties.

Now we will do the same for the TreeMap follow the below xaml:

<visualizationToolkit:TreeMap x:Name="MyTreeMap" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Grid.Column="1" Width="300" Height="300">
            <visualizationToolkit:TreeMap.ItemDefinition>
                <visualizationToolkit:TreeMapItemDefinition ValuePath="SizeOccupied">
                    <DataTemplate>
                        <Border Background="LightYellow" BorderBrush="Black" BorderThickness="1" ToolTipService.ToolTip="{Binding ToolTip}">
                            <TextBlock Text="{Binding DataType}" VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap"/>
                        </Border>
                    </DataTemplate>
                </visualizationToolkit:TreeMapItemDefinition>
            </visualizationToolkit:TreeMap.ItemDefinition>
        </visualizationToolkit:TreeMap>

Now that we have bind everything those are required, we will give some data to the DataGrid and TreeMap.

Add the following code:
 

List<DriveData> myList = new List<DriveData> 
            { 
                new DriveData{ DataType="Image", SizeOccupied=1.2},
                new DriveData{ DataType="PDF", SizeOccupied=0.3},
                new DriveData{ DataType="Word", SizeOccupied=0.5},
                new DriveData{ DataType="Movies", SizeOccupied=4.5},
                new DriveData{ DataType="XPS", SizeOccupied=0.6},
                new DriveData{ DataType="EXE", SizeOccupied=12.5},
            };
            MyDataGrid.ItemsSource = myList;
            MyTreeMap.ItemsSource = myList;

Everything is done. Now run your application to see the output: 

Now if you mouse hover any TreeMap Content you will get the tooltip as follows: 

That’s it you have successfully used the TreeMap control. Play with it more to know more.

Enjoy Coding.