PointSeries Path Fill Bindable Value

[Gareth]

I have the following XAML code I'm using to generate my Series and Graphs.

<telerik:RadCartesianChart x:Name="Chart"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch">
    <telerik:RadCartesianChart.ContextMenu>
        <ContextMenu>
            <MenuItem Header="Export to Image" Click="MenuItem_Click" />
        </ContextMenu>
    </telerik:RadCartesianChart.ContextMenu>

    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartPanAndZoomBehavior DragMode="Zoom" ZoomMode="Horizontal" />
    </telerik:RadCartesianChart.Behaviors>

    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
    </telerik:RadCartesianChart.Grid>

    <telerik:RadCartesianChart.Resources>
        <Style TargetType="telerik:LineSeries">
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Stroke" Value="{Binding ValueColour}" />
            <Setter Property="RenderOptions" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}, Path=DataContext.RenderOptions, Mode=OneWay}" />
            <Setter Property="LegendSettings">
                <Setter.Value>
                    <telerik:SeriesLegendSettings>
                        <telerik:SeriesLegendSettings.Title>
                            <MultiBinding Converter="{StaticResource MultiBindingStringConverter}">
                                <Binding Path="ValueName" />
                                <Binding Path="Unit" />
                            </MultiBinding>
                        </telerik:SeriesLegendSettings.Title>
                    </telerik:SeriesLegendSettings>
                </Setter.Value>
            </Setter>
            <Setter Property="ShowLabels" Value="False" />
            <Setter Property="VerticalAxis">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource UnitToVerticalAxisConverter}">
                        <Binding Path="ValueName" />
                        <Binding Path="Unit" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="telerik:PointSeries">
            <Setter Property="DefaultVisualStyle">
                <Setter.Value>
                    <Style TargetType="Path">
                        <Setter Property="Fill" Value="{Binding ValueColour, Converter={StaticResource StringToSolidColorBrushConverter}}" /> <!-- CAUSES AN INVALID CAST EXCEPTION -->
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="RenderOptions" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}, Path=DataContext.RenderOptions, Mode=OneWay}" />
            <Setter Property="LegendSettings">
                <Setter.Value>
                    <telerik:SeriesLegendSettings>
                        <telerik:SeriesLegendSettings.Title>
                            <MultiBinding Converter="{StaticResource MultiBindingStringConverter}">
                                <Binding Path="ValueName" />
                                <Binding Path="Unit" />
                            </MultiBinding>
                        </telerik:SeriesLegendSettings.Title>
                    </telerik:SeriesLegendSettings>
                </Setter.Value>
            </Setter>
            <Setter Property="ShowLabels" Value="False" />
            <Setter Property="VerticalAxis">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource UnitToVerticalAxisConverter}">
                        <Binding Path="ValueName" />
                        <Binding Path="Unit" />
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadCartesianChart.Resources>

    <telerik:RadCartesianChart.SeriesProvider>
        <telerik:ChartSeriesProvider Source="{Binding Series}">
            <telerik:ChartSeriesProvider.SeriesDescriptors>
                <telerik:CategoricalSeriesDescriptor ItemsSourcePath="Data.Collection" TypePath="SeriesType" CategoryPath="Time" ValuePath="Value" />
            </telerik:ChartSeriesProvider.SeriesDescriptors>
        </telerik:ChartSeriesProvider>
    </telerik:RadCartesianChart.SeriesProvider>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeContinuousAxis
                                    MajorStepUnit="Minute"
                                    LabelInterval="4"
                                    FontFamily="Segoe UI"
                                    PlotMode="OnTicks"  LabelFitMode="MultiLine">
            <telerik:DateTimeContinuousAxis.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Converter={StaticResource MultiLineDateTimeConverter}}" />
                </DataTemplate>
            </telerik:DateTimeContinuousAxis.LabelTemplate>
        </telerik:DateTimeContinuousAxis>
    </telerik:RadCartesianChart.HorizontalAxis>
</telerik:RadCartesianChart>

 

Unfortunately when I try to bind the "ValueColour" property on my PointSeries style, for the Path style's Fill property, I get an invalid cast exception.

My ValueColour Property is of type String and I have tried using converters for both String to Color and String to SolidColorBrush and neither of them are working.  The cast exception I get says:

Additional information: Unable to cast object of type 'System.Windows.Data.Binding' to type 'System.Windows.Media.Brush'.

However it works if I hard-code the colour with the value "Red" for example.

 How do I make this data-bindable?

[Ivan]

Hi Gareth,

Due the fact that we do not have the code of your converter and view model/data context we cannot be sure what could be the issue.

However, we suggest you try to set the Value in the setter of the Fill property where you get the exception to:

<Style TargetType="telerik:PointSeries">
    <Setter Property="DefaultVisualStyle">
        <Setter.Value>
            <Style TargetType="Path">
                <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag.DataItem, Converter={StaticResource StringToSolidColorBrushConverter}}" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>

Note that the context passed in the DefaultVisualStyle of PointSeries is the DataContext of series itself. In order to get a property from the view model of the data points you can use the Tag property of the visual element.

In case this doesn't work we suggest you send us a sample project demonstrating the issue, so we can debug your view model and converter.

Regards,
Ivan
Telerik

[Gareth]

Hi Ivan,

Thanks for getting back to me.

The property "ValueColour" which I'm trying to bind to, is a property on the ViewModel I'm using for the Series.  And as such should be the DataContext for the DefaultVisualStyle.

The code for the latest Converter I tried is as follows:

01.public class StringToBrushConverter : IValueConverter
02.{
03.    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
04.    {
05.        Brush b = (Brush)new BrushConverter().ConvertFromString((string)value);
06.        if (b != null)
07.        {
08.            return b;
09.        }
10.        return null;
11.    }
12.
13.    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
14.    {
15.        throw new NotImplementedException();
16.    }
17.}

 

An unhandled exception of type 'System.InvalidCastException' occurred in Telerik.Windows.Controls.Chart.dll

Additional information: Unable to cast object of type 'System.Windows.Data.Binding' to type 'System.Windows.Media.Brush'.

 

So it looks like the InvalidCastException is occurring in the telerik code somewhere.

 

As you can see in the previous code snippet, the ValueColour variable binds successfully for the LineSeries's Stroke Value, but not the PointSeries Path Fill.

[Ivan]

Hello Gareth,

We could not reproduce this exception. Please test the attached project which demonstrates a chart set up and converter based on the code that you have provided us. As you can see the converting is performed successfully.

About the context, you are correct that with your set up the data context of the DefaultVisualStyle is the view model of the series.

In case the attached project is not enough to solve your issue, can you please provide us a sample project demonstrating it so we can give you more specific assistance?

Regards,
Ivan
Telerik

[Gareth]

Thanks Ivan, I managed to pinpoint the problem to the RenderOptions I'm using.

If I set up your example to use BitmapRendering, then the problem occurs.  If however I chose another type of RenderingOption, it does not occur.

I'll try changing the RenderOptions of my application to something other than Bitmap and monitor the performance!

[Ivan]

Hi Gareth,

This is a limitation on the ChartView control. In order to avoid the exception you can either use RenderingOption different from BitmapRenderOptions and Direct2DRenderOptions or avoid using binding for the Fill property.

If you have further questions about this let us know.

Regards,
Ivan
Telerik

[Fabian]

Please add this information to https://docs.telerik.com/devtools/wpf/controls/radchartview/populating-with-data/binding-the-color-of-series-items, would have saved me some time... Thanks.

[Martin Ivanov]

Thank you for the feedback. We included a note about this in the article. The change will go live with the next upload of the documentation website.