How to use palette color with point template

[Brendan]

I am trying to use a point template for my bar series however I can't figure out how to set the bar to the palette color. The user has the ability to change the palette so I want to be able to bind the color.

My data template is :

<DataTemplate x:Key="ChartBarTemplate">
    <Rectangle Stroke="Black" StrokeThickness="1" Stretch="Fill" />
</DataTemplate>

[Giuseppe]

Hello Brendan,

You can achieve the desired functionality like this:

<telerik:RadCartesianChart x:Name="RadChart1" Palette="Lilac">

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis />
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:BarSeries>
        <telerik:BarSeries.PointTemplate>
            <DataTemplate>
                <Rectangle Fill="{Binding ElementName=RadChart1, Path=Palette.GlobalEntries[0].Fill}"
                    Stroke="Black" StrokeThickness="1" Stretch="Fill" />
            </DataTemplate>
        </telerik:BarSeries.PointTemplate>

        <telerik:CategoricalDataPoint Category="C1" Value="10" />
        <telerik:CategoricalDataPoint Category="C2" Value="20" />
        <telerik:CategoricalDataPoint Category="C3" Value="30" />
        <telerik:CategoricalDataPoint Category="C4" Value="40" />
        <telerik:CategoricalDataPoint Category="C5" Value="50" />
    </telerik:BarSeries>

</telerik:RadCartesianChart>

Hope this helps.


Greetings,
Giuseppe
the Telerik team

[Brendan]

Thanks that gets me closer, however my series are very dynamic and the order may change - is there any way to determine the series index easily?

[Giuseppe]

Hello Brendan,

You can retrieve the series index in a dynamic scenario by implementing IValueConverter like this:

XAML

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:SilverlightApplication1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <local:PaletteConverter x:Key="paletteConverter" />
        </Grid.Resources>

        <telerik:RadCartesianChart x:Name="RadChart1" Palette="Lilac">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis />
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:BarSeries>
                <telerik:BarSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                   Stroke="Black"
                                   StrokeThickness="1"
                                   Stretch="Fill" />
                    </DataTemplate>
                </telerik:BarSeries.PointTemplate>

                <telerik:CategoricalDataPoint Category="C1" Value="10" />
                <telerik:CategoricalDataPoint Category="C2" Value="20" />
                <telerik:CategoricalDataPoint Category="C3" Value="30" />
                <telerik:CategoricalDataPoint Category="C4" Value="40" />
                <telerik:CategoricalDataPoint Category="C5" Value="50" />
            </telerik:BarSeries>

            <telerik:BarSeries>
                <telerik:BarSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                   Stroke="Black"
                                   StrokeThickness="1"
                                   Stretch="Fill" />
                    </DataTemplate>
                </telerik:BarSeries.PointTemplate>

                <telerik:CategoricalDataPoint Category="C1" Value="10" />
                <telerik:CategoricalDataPoint Category="C2" Value="10" />
                <telerik:CategoricalDataPoint Category="C3" Value="10" />
                <telerik:CategoricalDataPoint Category="C4" Value="20" />
                <telerik:CategoricalDataPoint Category="C5" Value="30" />
            </telerik:BarSeries>

            <telerik:BarSeries>
                <telerik:BarSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding Converter={StaticResource paletteConverter}}"
                                   Stroke="Black"
                                   StrokeThickness="1"
                                   Stretch="Fill" />
                    </DataTemplate>
                </telerik:BarSeries.PointTemplate>

                <telerik:CategoricalDataPoint Category="C1" Value="10" />
                <telerik:CategoricalDataPoint Category="C2" Value="20" />
                <telerik:CategoricalDataPoint Category="C3" Value="40" />
                <telerik:CategoricalDataPoint Category="C4" Value="40" />
                <telerik:CategoricalDataPoint Category="C5" Value="40" />
            </telerik:BarSeries>

        </telerik:RadCartesianChart>

    </Grid>
</UserControl>

C#

using System;
using System.Windows.Data;
using Telerik.Charting;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.ChartView;

namespace SilverlightApplication1
{
    public class PaletteConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            CategoricalDataPoint point = value as CategoricalDataPoint;
            BarSeries series = point.Presenter as BarSeries;
            RadCartesianChart chart = series.Chart as RadCartesianChart;

            int seriesIndex = chart.Series.IndexOf(series);

            return chart.Palette.GlobalEntries[seriesIndex].Fill;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Hope this helps.


Regards,
Giuseppe
the Telerik team

[Jaime Bula]

var dt = (DataTemplate)XamlReader.Load(String.Format(
          @"        <DataTemplate  xmlns=""http://schemas.microsoft.com/client/2007"">
                       <Ellipse Fill=""{0}"" Height=""10"" Width=""10""/>
                   </DataTemplate>", "{Binding ElementName=ChartNomina, Path=Palette.GlobalEntries[" + index + "].Fill}"));
           sNomina.PointTemplate = dt;

 

I found out this was quicker and easier.