ScatterPointSeries - How to get series parent DataContext?

[Craig]

Hi,

I'm trying to create a solution based off the "Dynamic Number of Series" sample in the RadChartView documentation.  My xaml looks like this:

<telerik:RadCartesianChart x:Name="chart">
     <telerik:RadCartesianChart.HorizontalAxis>
           <telerik:LinearAxis Minimum="{Binding XAxisMin}" Maximum="{Binding XAxisMax}">
                <telerik:LinearAxis.LabelStyle>
                     <Style TargetType="TextBlock">
                          <Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
                     </Style>
                </telerik:LinearAxis.LabelStyle>
           </telerik:LinearAxis>
      </telerik:RadCartesianChart.HorizontalAxis>
      <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis Minimum="{Binding YAxisMin}" Maximum="{Binding YAxisMax}">
                 <telerik:LinearAxis.LabelStyle>
                      <Style TargetType="TextBlock">
                           <Setter Property="Foreground" Value="{DynamicResource MainForegroundColor}"/>
                       </Style>
                   </telerik:LinearAxis.LabelStyle>
               </telerik:LinearAxis>
           </telerik:RadCartesianChart.VerticalAxis>
           <telerik:RadCartesianChart.SeriesProvider>
               <telerik:ChartSeriesProvider Source="{Binding MyVMs}">
                   <telerik:ChartSeriesProvider.SeriesDescriptors>
                       <telerik:ScatterSeriesDescriptor ItemsSourcePath="PointVMs" XValuePath="XValue" YValuePath="YValue">
                           <telerik:ScatterSeriesDescriptor.Style>
                               <Style TargetType="telerik:ScatterPointSeries">
                                   <Setter Property="PointTemplate">
                                       <Setter.Value>
                                           <DataTemplate>
                                               <Ellipse Width="10" 
                                                        Height="10" 
                                                        Fill="{Binding Path=DataItem.HighlightColor, RelativeSource={RelativeSource AncestorType=telerik:ChartSeriesProvider}}" />                                                
                                           </DataTemplate>
                                       </Setter.Value>
                                   </Setter>
                               </Style>
                           </telerik:ScatterSeriesDescriptor.Style>
                       </telerik:ScatterSeriesDescriptor>
                   </telerik:ChartSeriesProvider.SeriesDescriptors>
               </telerik:ChartSeriesProvider>
           </telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>

I can't seem to find the right combination to gain access to the MyVM.HighlightColor so I can set the Fill in my DataTemplate.  Is there a way to do this or is it a case of having to add the color over and over again inside each PointVM?

Thanks for an guidance,

Craig

[Martin Ivanov]

Hello Craig,

As I understand you want to bind the color of the data point's to a property from the view model of the series. If so, you can use relative source binding to get the scatter point series and then get the HighlightColor from its DataContext.

<Setter Property="PointTemplate">
    <Setter.Value>
        <DataTemplate>
            <Ellipse Width="10"
                    Height="10"
                    Fill="{Binding Path=DataContext.HighlightColor, RelativeSource={RelativeSource AncestorType=telerik:ScatterPointSeries}}" />
        </DataTemplate>
    </Setter.Value>
</Setter>

Also, if you want to change only the size and color of the points I recommend you to use the PointSize and DefaultVisualStyle properties of the series. This way you will avoid creating the additional ContentPresenter for the element in the PointTemplate, thus improving the chart's performance.

<telerik:ScatterSeriesDescriptor.Style>
    <Style TargetType="telerik:ScatterPointSeries">
        <Setter Property="PointSize" Value="10 10" />
        <Setter Property="DefaultVisualStyle">
            <Setter.Value>
                <Style TargetType="Path">
                    <Setter Property="Fill" Value="{Binding HighlightColor}" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:ScatterSeriesDescriptor.Style>

Note that the data context passed into the style is the view model of the series, so you won't need to use relative source binding, but you can directly bind to the HighlightColor.

Regards,
Martin
Telerik by Progress

[Craig]

Thank you Martin, I implemented the style you provided and it works when the chart loads, it loads the correct color but if I change the value of the HighlightColor, it doesn't update immediately.  When I get new data, it updates the color correctly.  Is there a way to have the chart update when the value of HighlightColor changes or do I need to catch the HighlightColor property changed event and redraw my points?

Thanks again for your help,

Craig

[Martin Ivanov]

Hi Craig,

In order for the change in the HighlightColor property to be reflected on the UI, the model that holds the property should implement the INotifyPropertyChanged interface and raise the PropertyChanged event in the setter of HighlightColor.  You can read more about the interface in MSDN.

Regards,
Martin
Telerik by Progress

[Craig]

Hi Martin,

Yes, that is correct, we are using the galasoft MVVM light library which implements that for us:

public Color HighlightColor
{

get
{
return _highlightColor;
}
set
{
if ( _highlightColor != value )
{
_highlightColor = value;
RaisePropertyChanged( () => HighlightColor );
}
}
}

But when I select a different color in my U.I. it fires the event, I placed a breakpoint in the setter but the chart doesn't immediately update, it doesn't update until the next time I add a new point but the adding of a new point could take a minute or more and the user is still seeing the old color.

Thanks again for your help,

Craig

[Martin Ivanov]

Hi Craig,

Note that that the Fill property of the Path and Ellipse elements is of type Brush. You can try changing the type of the HighlightColor property from Color to Brush and see if this works on your side.

Regards,
Martin
Telerik by Progress