Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Adding xamTreemap Using XAML Code

Before You Begin

This topic describes the basic steps required for adding the xamTreemap™ control to your application using XAML. The control needs a data object model to be mapped to its DataContext property - the topic will provide a simple data object model, but you can create your own and use it instead.

What You Will Accomplish

You will add an instance of the xamTreemap control with simple data binding to your application .

Follow these Steps

Note: This sample uses a simple data model for binding the xamTreemap control’s DataContext property. You can download it from Manufacturer View Model and use it in your project while working through this sample.

  1. Create a Microsoft® WPF™ application.

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

  1. Add the following XML namespace declarations:

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:models="clr-namespace:DATA_MODEL_NAMESPACE"

  1. Add an instance of the xamTreemap control with a DataContext bound to the ManufacturerViewModel and an ItemsSource bound to the Manufacturers property of the view model.

In XAML:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <!--Add Node Binders-->
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <!--Add Value Mappers-->
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>

  1. Add Node Binders to the control’s NodeBinders collection.

In XAML:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <ig:NodeBinder TargetTypeName="Manufacturer"
                       ValuePath="Revenue"
                       TextPath="Name" />
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <!--Add Value Mappers-->
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>
xamTreemap Adding xamTreemap Using Xaml Procedural Code 01.png

  1. Add Value Mappers to the control’s ValueMappers collection.

In XAML:

<ig:XamTreemap ItemsSource="{Binding Manufacturers}">
    <ig:XamTreemap.DataContext>
        <models:ManufacturerViewModel />
    </ig:XamTreemap.DataContext>
    <ig:XamTreemap.NodeBinders>
        <ig:NodeBinder TargetTypeName="Manufacturer"
                       ValuePath="Revenue"
                       TextPath="Name" />
    </ig:XamTreemap.NodeBinders>
    <ig:XamTreemap.ValueMappers>
        <ig:ColorMapper ValueTypeName="Manufacturer"
                        TargetProperty="Fill"
                        ValuePath="Revenue"
                        From="#90FF0000"
                        To="#90008000"/>
    </ig:XamTreemap.ValueMappers>
</ig:XamTreemap>
xamTreemap Adding xamTreemap Using Xaml Procedural Code 02.png

  1. Save and run your application.

Related Topics