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.

Crating 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.