In this article you will learn how to change the style which a NodeBinder applies to the nodes. Each NodeBinder can apply a different style to the nodes.
A custom template for the nodes must contain a NodesPanel element named “NodesPanel”. This element will hold the child nodes.
Create a project in Blend and add to it a xamTreemap control.
Add NodeBinders to your xamTreemap.
Highlight the NodeBinder which you will style:
Go to the Object menu – Object \ Edit Additional Templates \ Edit NodeStyle \ Edit a Copy…
Edit the template of your custom treemap node style:
When the xamTreemap control binds to data, it creates a root node which will contain the nodes from the data source.
You can style this node by assigning a style to the DefaultStyle property of the xamTreemap control.
In XAML:
<Style TargetType="ig:TreemapNode"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType=" ig:TreemapNode"> <Border BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Fill}" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}"> <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>