Hi There,
I am using a TreeMap to show a representation of my tree. The structure that I am using has the same type at each level e.g.:
class Tag
{
public string Name { get; set;}
public int Count { get; set;}
public List<Tag> Children { get; set; }
}
So I have setup a node template to show the tag, however I was hoping to be able to have the colours at each level on the tree alternate (i.e. have two styles for the same class type). I can easily put a flag in the class to say what colour to use, but not sure I can bind this.
Is there any way to do this?
Thanks
Hi,
That approach worked perfectly for what I needed.
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 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