Version

Changing the Style of the Nodes

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.

Before You Begin

A custom template for the nodes must contain a NodesPanel element named “NodesPanel”. This element will hold the child nodes.

Creating a Style

  1. Create a project in Blend and add to it a xamTreemap control.

  2. Add NodeBinders to your xamTreemap.

  3. Highlight the NodeBinder which you will style:

xamTreemap Changing the Style of the Nodes 01.png

  1. Go to the Object menu – Object \ Edit Additional Templates \ Edit NodeStyle \ Edit a Copy…

xamTreemap Changing the Style of the Nodes 02.png

  1. Edit the template of your custom treemap node style:

xamTreemap Changing the Style of the Nodes 03.png

The DefaultStyle Property

When the xamTreemap control binds to data, it creates a root node which will contain the nodes from the data source.

xamTreemap Changing the Style of the Nodes 04.png

You can style this node by assigning a style to the DefaultStyle property of the xamTreemap control.

Default Node Template

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>