Hello mtatgl,

Another approach is to add a Color property to the Tag class and use a custom style for the nodes of the Treemap - the Background of the TreemapNode will bind to the Color property.

The Tag class:

public class Tag
{
    public string Name { get; set; }
    public int Count { get; set; }
    public List<Tag> Children { get; set; }

    //The color of each tag.
    public Color Color { get; set; }
}

The custom style:

    <ig:XamTreemap x:Name="Treemap">        
        
        <ig:XamTreemap.NodeBinders>
            
            <ig:NodeBinder TargetTypeName="Tag" TextPath="Name" ValuePath="Value" ItemsSourcePath="Children">
                <ig:NodeBinder.NodeStyle>
                    <Style TargetType="ig:TreemapNode">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ig:TreemapNode">
                                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                                            CornerRadius="{TemplateBinding CornerRadius}"
                                            BorderBrush="{TemplateBinding BorderBrush}">
                                        
                                        <!--Bind to the Color property of the Tag object-->
                                        <Border.Background>
                                            <SolidColorBrush Color="{Binding Color}" />
                                        </Border.Background>
                                        
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <TextBlock Text="{TemplateBinding Text}"
                                                       HorizontalAlignment="Center" />
                                            <ig:NodesPanel x:Name="NodesPanel"
                                                              Grid.Row="1" />
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ig:NodeBinder.NodeStyle>
                
            </ig:NodeBinder>
            
        </ig:XamTreemap.NodeBinders>
        
    </ig:XamTreemap>

Hi, mtatgl ,

In order to obtain alternate colors you may use custom color mapper. Let's say you have your class like that

public class Tag

{

public string Name { get; set; }

public int Count { get; set; }

       public List<Tag> Children { get; set; }

       public int Level { get; set; }

}

(level might be some kind of bool , does not matter, showing if the tag's level is even or odd).

The custom color mapper might be like that

public class AlterateColorMapper : ValueMapper

    {

        public override void MapValue(TreemapNode node)

        {

            Tag data = node.DataContext as Tag;

            if (data != null)

            {

                if (data.Level % 2 == 0)

                {

                    node.Fill = new SolidColorBrush() { Color = Colors.Blue };

                }

                else

                {

                    node.Fill = new SolidColorBrush() { Color = Colors.Red };

                }

            }

        }

        public override void ResetValue(TreemapNode node)

        {

        }

    }

 The treemap should be instanced in the following way

<igTreemap:XamTreemap x:Name="treemap">

            <igTreemap:XamTreemap.NodeBinders>

                <igTreemap:NodeBinder TargetTypeName="Tag" ValuePath="Count" ItemsSourcePath="Children" TextPath="Name"></igTreemap:NodeBinder>

            </igTreemap:XamTreemap.NodeBinders>

            <igTreemap:XamTreemap.ValueMappers>

                <local:AlterateColorMapper ></local:AlterateColorMapper>

            </igTreemap:XamTreemap.ValueMappers>

        </igTreemap:XamTreemap>

I have attached a sample showing the usage of this mapper too.

Thanks,

Miroslav