New to Telerik UI for WPF? Start a free 30-day trial

How to Bind the Color of the TreeMapItems

Updated on Sep 15, 2025

This topic will show you how to bind the color of the TreeMapItems.

For the purpose of this example, we will create the following model.

Example 1: Create ItemInfo Model

	public class ItemInfo
	{
		public Brush Fill { get; set; }
		public string Label { get; set; }
		public double Value { get; set; }
		public ObservableCollection<ItemInfo> Children { get; set; }

		public ItemInfo()
		{
				
			this.Children = new ObservableCollection<ItemInfo>();
		}
	}

Next, we can go ahead and create sample data.

Example 2: Create Sample Data

	public class ViewModel
    {
        Random rnd = new Random();
        public ObservableCollection<ItemInfo> Data { get; set; }
        public ViewModel()
        {
            Data = GetData();
        }
        private ObservableCollection<ItemInfo> GetData()
        {
            var source = new ObservableCollection<ItemInfo>();
            for (int i = 0; i < 2; i++)
            {
                var level1Item = new ItemInfo()
                {
                    Value = rnd.Next(10, 100),
                    Label = "Level 1 Item - " + i,
                    Fill = new SolidColorBrush(Color.FromRgb((byte)rnd.Next(1, 255), (byte)rnd.Next(1, 255), (byte)rnd.Next(1, 233)))
                };

                for (int y = 0; y < 2; y++)
                {
                    var level2Item = new ItemInfo()
                    {
                        Value = rnd.Next(10, 100),
                        Label = "Level 2 Item - " + y,
                        Fill = new SolidColorBrush(Color.FromRgb((byte)rnd.Next(1, 255), (byte)rnd.Next(1, 255), (byte)rnd.Next(1, 233)))
                    };

                    for (int k = 0; k < 2; k++)
                    {
                        level2Item.Children.Add(new ItemInfo()
                        {
                            Value = rnd.Next(10, 100),
                            Label = "Level 3 Item - " + k,
                            Fill = new SolidColorBrush(Color.FromRgb((byte)rnd.Next(1, 255), (byte)rnd.Next(1, 255), (byte)rnd.Next(1, 233)))
                        });
                    }
                    level1Item.Children.Add(level2Item);
                }
                source.Add(level1Item);
            }
            return source;
        }
    }

Now, we can declare our RadTreeMap control in XAML. To bind the color of the items, we can use the ItemStyle of the TypeDefinition. This property is of type Style which targets RadTreeMapItem.

Example 3: Declare our RadTreeMap in XAML

XAML

	<telerik:RadTreeMap ItemsSource="{Binding Data}">
		<telerik:RadTreeMap.TypeDefinitions>
			<telerik:TypeDefinition TargetTypeName="ItemInfo" ValuePath="Value" ChildrenPath="Children" LabelPath="Label">
				<telerik:TypeDefinition.ItemStyle>
					<Style TargetType="telerik:RadTreeMapItem">
						<Setter Property="Background" Value="{Binding DataItem.Fill}" />
					</Style>
				</telerik:TypeDefinition.ItemStyle>
			</telerik:TypeDefinition>
		</telerik:RadTreeMap.TypeDefinitions>
	</telerik:RadTreeMap>

And finally, we need to set our DataContext to the ViewModel.

Example 4: Setting our DataContext

	public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();            
			this.DataContext = new ViewModel();
		}
	}

If you run the application now, the RadTreeMap should display the following structure:

Figure 1: RadTreeMap with bound colors

TreeMap Bind Color

How to Bind the Color of the TreeMapItems

Figure 1: RadTreeMap with bound colors

See Also