.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Tree Map Control In Silverlight Application Tutorial

Posted By:Diptimaya Patra       Posted Date: April 02, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Tree Map Control In Silverlight Application Tutorial. In this we will explore on TreeMap Control how to used it in a simple way.

The TreeMap is a control that displays hierarchical data as a collection of nested rectangles whose area (and other properties) is proportional to selected metrics within that data. TreeMap control shipts 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
  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.


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:


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

List myList = new List
  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. You can donwload the sample code used in the above example from below download link.

Enjoy Coding.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend