Version

Adding xamTreemap Using Expression Blend

This topic demonstrates how to create a xamTreemap™ using Expression Blend™.

The topic is organized as follows:

Preview

Following is a preview of the final result:

xamTreemap Adding Using Blend 01.png

Figure 1: A data bound Treemap with color mapping.

Requirements

  • Microsoft® WPF® project in Expression Blend™

  • Add the following NuGet package to your application:

    • Infragistics.WPF.Treemap

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  • This procedure uses a simple data model for binding the xamTreemap control’s DataContext property. It can be downloading from Manufacturer View Model.

Steps

  1. Add the ManufacturerViewModel class.

Right-click on your project in Blend and select Add Reference to add the required assemblies.

  1. Add the XamTreemap to your application and bind it to data.

    1. Drag the XamTreemap control from the Assets library to your application. (Figure 2)

xamTreemap Adding Using Blend 02.png

Figure 2: Blend’s Assets Library

  1. *Bind the DataContext property to the ManufacturerViewModel class.*In the Properties pane, go to Common Properties. For the DataContext property, create a new object and use the ManufacturerViewModel class. (Figure 3 and Figure 4)

xamTreemap Adding Using Blend 03.png

Figure 3: The Properties tab for xamTreemap

xamTreemap Adding Using Blend 04.png

Figure 4: Blend object browser

  1. Bind the ItemsSource property to the Manufacturers collection of the view model.

In the Properties pane, go to XamTreemap Properties and apply a Data Binding to the ItemsSource property using the Manufacturers collection of the view model (Figure 5 and Figure 6):

xamTreemap Adding Using Blend 05.png

Figure 5: Binding the ItemsSource

xamTreemap Adding Using Blend 06.png

Figure 6: Creating a Data Binding

  1. Create a new NodeBinders collection.

    1. In the XamTreemap Properties, go to NodeBinders and create a new collection. (Figure 7)

xamTreemap Adding Using Blend 07.png

Figure 7: Creating a new Node Binders collection

  1. Add a new Node Binder to the collection and set the following properties:

    • TargetTypeName = Manufacturer

    • TextPath = Name

    • ValuePath = Revenue

Note: Now that a Node Binder is added, notice how the xamTreemap displays its data. (Figure 8)

xamTreemap Adding Using Blend 08.png

Figure 8: A preview of the Treemap in Blend

  1. Create a new ValueMappers collection.

    1. In the XamTreemap Properties, go to ValueMappers and create a new collection. (Figure 9)

xamTreemap Adding Using Blend 09.png

Figure 9: Creating a new Value Mappers collection

  1. Add a new item to the collection and from the Select Object window, choose the ColorMapper class:

xamTreemap Adding Using Blend 10.png

Figure 10: Selecting ColorMapper

  1. After you create a new Value Mapper, set the following properties:

    • ValueTypeName = Manufacturer

    • TargetProperty = Fill

    • ValuePath = Revenue

  1. Set colors for the From and To properties.

Note: Now that a Color Mapper is added, notice how the xamTreemap displays its data. (Figure 11)

xamTreemap Adding Using Blend 11.png

Figure 11: A preview of the Treemap with Value Mappers in Blend

  1. Save your project.

  2. (Optional) Verify the result.

Run your application and if you have implemented the steps correctly, your Treemap should look as shown in Figure 1 above.