ScatterPointSeries - How to get series parent DataContext?

6 posts, 1 answers
  1. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 01 Sep Link to this post

    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

  2. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 05 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 05 Sep in reply to Martin Link to this post

    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

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 06 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 06 Sep in reply to Martin Link to this post

    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

  7. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 08 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for WPF is Visual Studio 2017 Ready