How to set the pointtemplate 's fill color of lineseries when use ChartSeriesProvider

[Nannan]

The code is here.

                        <telerik:RadCartesianChart Zoom="10,1" MaxZoom="20,1000" PanOffset="-10000,0" x:Name="CurveCartesianChart" Palette="Flower" Margin="10" MouseRightButtonDown="CurveCartesianChart_MouseRightButtonDown">
                            <telerik:RadCartesianChart.HorizontalAxis>
                                <telerik:CategoricalAxis ShowLabels="True" LabelInterval="5"></telerik:CategoricalAxis>
                            </telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:RadCartesianChart.VerticalAxis>
                                <telerik:LinearAxis ShowLabels="True"></telerik:LinearAxis>
                            </telerik:RadCartesianChart.VerticalAxis>
                            <telerik:RadCartesianChart.SeriesProvider>
                                <telerik:ChartSeriesProvider Source="{Binding CurveDataDicList}">
                                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                                        <telerik:CategoricalSeriesDescriptor CategoryPath="XValue"
                                                             ValuePath="YValue"
                                                             ItemsSourcePath="Points">
                                            <telerik:CategoricalSeriesDescriptor.Style>
                                                <Style TargetType="telerik:LineSeries">
                                                    <Setter Property="StrokeThickness" Value="2"/>
                                                    <Setter Property="PointTemplate">
                                                        <Setter.Value>
                                                            <DataTemplate>
                                                                <Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding LineStroke, Mode=TwoWay}"/>
                                                            </DataTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                    <Setter Property="LegendSettings">
                                                        <Setter.Value>
                                                            <telerik:SeriesLegendSettings Title="{Binding Name}" />
                                                        </Setter.Value>
                                                    </Setter>
                                                           
                                                </Style>
                                            </telerik:CategoricalSeriesDescriptor.Style>
                                        </telerik:CategoricalSeriesDescriptor>
                                    </telerik:ChartSeriesProvider.SeriesDescriptors>                                   
                                </telerik:ChartSeriesProvider>
                               
                            </telerik:RadCartesianChart.SeriesProvider>                          
                           
                        </telerik:RadCartesianChart>

I want the LineStroke here in the pointtemplate is the line's color, but I can't get it.

[Martin Ivanov]

Hi Nannan,

The data context passed in the PointTemplate of the chart's series is an object of type that derives from the DataPoint class. For example, the LineSeries uses CategoricalDataPoint objects and the ScatterLineSeries, ScatterDataPoint. This model describes the data point (size, position, presenter, etc.) and it expose a property that holds its view model - the DataItem proeprty. If the LineStroke property is defined in the view model of the data points you can use the following syntax to get it in the PointTemplate:

<Setter Property="PointTemplate">
    <Setter.Value>
        <DataTemplate>
            <Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding DataItem.LineStroke, Mode=TwoWay}"/>
        </DataTemplate>
    </Setter.Value>
</Setter>

However, if LineStroke is a property of the series view model you can use the Presenter property (which points to the series) to get the model.

<Ellipse Height="7" Width="7" Stroke="White" Fill="{Binding Presenter.DataContext.LineStroke, Mode=TwoWay}"/>

Please try this and let me know if it works for you.

Regards,
Martin
Telerik

[Nannan]

Martin, Thank you for you Reply, I have tried the both solution, But it doesn't work , I didn't defined the line's color in my viewmodel, I want use the line color in Palette  to fill the line's DataPoint, Is I make it clear enough

Add the Source of  defined ChartSeriesProvider here, hope you can help me again,

    blic ObservableCollection<CurveDataUnit> CurveDataDicList { get; set; }
    public class CurveDataUnit
    {
        public string Name { get; set; }
        public ObservableCollection<PointPairData> Points { get; set; }
    }

    public class PointPairData
    {
        public int CurCycle { get; set; }
        public int CycleOffset { get; set; } 
        public string XName { get; set; } 
        public string YName { get; set; } 
        public int XValue { get; set; } 
        public int YValue { get; set; } 
        public int XValueBackUp { get; set; } 
        public string XNameBackUp { get; set; }
        public VarInfo var { get; set; }
    }

[Martin Ivanov]

Hello Nannan,

Correct me if I am wrong - you have a palette defined for the chart and you want to bind the fill of the data point visual (the ellipse) to the stroke of the series line that comes from the palette? If so, you can use an IValueConverter and the chart Palette's GetEntry() method. Here is an example for this approach:

<Setter Property="PointTemplate">
    <Setter.Value>
        <DataTemplate>
            <Ellipse Width="7" Height="7" Fill="{Binding Presenter, Converter={StaticResource seriesToPaletteColorConverter}}" />
        </DataTemplate>
    </Setter.Value>
</Setter>

public class SeriesToPaletteColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var series = (CartesianSeries)value;
        var chart = (RadCartesianChart)series.Chart;
        var seriesIndex = chart.Series.IndexOf(series);

        var entry = chart.Palette.GetEntry(series, seriesIndex);

        if (entry.HasValue)
        {
            return entry.Value.Stroke ?? entry.Value.Fill;
        }
        return null;
    }

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

Please give this approach a try and let me know if it works for you.

Regards,
Martin
Telerik

[Nannan]

Hello Martin, I have tried your solution, it worked. thank you very much for your help. please recieve my sincere gratitude. Hope to have more chances to consult you in the future.