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


Top 5 Contributors of the Month
david stephan

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.

TreeMapImg1.gif

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

TreeMapImg2.gif

Add this control to your application.

We need sample data for displaying in TreeMap so add a class named DriveData.cs.

TreeMapImg3.gif


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.



  
  
 


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:

TreeMapImg4.gif

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

TreeMapImg5.gif

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:

Responses

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