Tree Map Control In Silverlight 3

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.