How to Change the Color of PivotMap Groups
This topic will show you how to change the colors of the PivotMap groups.
For the purpose of this example, we will create the following model.
Example 1: Create MovieInfo Model
public class MovieInfo
{
public string Genre { get; set; }
public string Title { get; set; }
public double GrossSales { get; set; }
}
Example 2: Create Sample Data
public class MainViewModel
{
public ObservableCollection<MovieInfo> Data { get; set; }
public MainViewModel()
{
Data = GetData();
}
public ObservableCollection<MovieInfo> GetData()
{
ObservableCollection<MovieInfo> movies = new ObservableCollection<MovieInfo>()
{
new MovieInfo() { Genre = "Adventure", Title = "Toy Story 3", GrossSales = 415004880 },
new MovieInfo() { Genre = "Adventure", Title = "Iron Man 3", GrossSales = 409013994 },
new MovieInfo() { Genre = "Adventure", Title = "Tangled", GrossSales = 200821936 },
new MovieInfo() { Genre = "Adventure", Title = "The Karate Kid", GrossSales = 176591618 },
new MovieInfo() { Genre = "Action", Title = "Avatar", GrossSales = 760507625 },
new MovieInfo() { Genre = "Action", Title = "Sherlock Holmes", GrossSales = 186848418 },
new MovieInfo() { Genre = "Action", Title = "Red", GrossSales = 130380162 },
new MovieInfo() { Genre = "Comedy", Title = "Despicable Me 3", GrossSales = 264624300 },
new MovieInfo() { Genre = "Comedy", Title = "Easy A", GrossSales = 158401464 },
new MovieInfo() { Genre = "Comedy", Title = "Superbad", GrossSales = 61979680 },
new MovieInfo() { Genre = "Comedy", Title = "Date Night", GrossSales = 121463226 },
new MovieInfo() { Genre = "Horror", Title = "The Ring", GrossSales = 129128133 },
new MovieInfo() { Genre = "Horror", Title = "The Grudge", GrossSales = 110359362 },
};
return movies;
}
}
Example 3: Declare our RadTreeMap in XAML
<Window.Resources>
<local:MyConverter x:Key="MyConverter"/>
</Window.Resources>
<Grid>
<telerik:RadPivotMap x:Name="radPivotMap"
ValuePath="GrossSales"
LabelPath="GrossSales"
ItemsSource="{Binding Data}"
LabelFormat="{}{0:C0}">
<telerik:RadPivotMap.GroupDefinitions>
<telerik:GroupDefinition Member="Genre" >
<telerik:GroupDefinition.ItemStyle>
<Style TargetType="telerik:RadTreeMapItem">
<Setter Property="Background" Value="{Binding DataItem,Converter={StaticResource MyConverter}}" />
</Style>
</telerik:GroupDefinition.ItemStyle>
</telerik:GroupDefinition>
</telerik:RadPivotMap.GroupDefinitions>
</telerik:RadPivotMap>
</Grid>
Example 4: Create custom IValueConverter
public class MyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var group = value as GroupingImpl<string,MovieInfo>;
if(group != null)
{
if (group.Name.ToString() == "Adventure")
{
return Brushes.Bisque;
}
else if (group.Name.ToString() == "Action")
{
return Brushes.SkyBlue;
}
else if (group.Name.ToString() == "Comedy")
{
return Brushes.MediumTurquoise;
}
else if (group.Name.ToString() == "Horror")
{
return Brushes.IndianRed;
}
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Example 4: Setting our DataContext
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}