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