MVVM SeriesProvider with PointSeries, using BitmapRenderOptions. How to set the color of the points?

8 posts, 1 answers
  1. James
    James avatar
    7 posts
    Member since:
    Jul 2012

    Posted 03 Nov 2014 Link to this post

    I have implemented a chart which displays a dynamic set of series (displayed as points), using BitmapRenderOptions with a SeriesProvider in an MVVM environment.  However, I have been unable to figure out how to control the color of each series.  The color of the series lives in each DataObject instance in the ChartSeriesProvider Source collection.

    I have been able to set the color of the series based on this value if I chart the data as a LineSeries (by setting the Stroke property in the LineSeries style within the CategoricalSeriesDescriptor.Style declaration), but I haven't found a solution for PointSeries' yet.  In other charts in the project (that don't require a SeriesProvider), I have been able to set the color for the point series via PointSeries.DefaultVisualStyle.

    I am able to get each series to be a different color using a palette, but since I need the series to match a specific color, even a custom palette wouldn't work (as I have no way to link the correct color to the series).

    I know that I can't use a PointTemplate, as I want/need the BitmapRenderOptions, so how do I bind the color?  I know there must be a simple solution that I'm missing!

    Thanks
  2. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 04 Nov 2014 Link to this post

    Hi James,

    I think that the easiest way to go here is to use a converter. You need to again set the DefaultVisualStyle, as you have already done in your other projects. The little difference is that the style now depends on a brush that is in your series-view-model entity. So, you will need to use a converter:
    <telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data">
     <telerik:CategoricalSeriesDescriptor.Style>
      <Style TargetType="telerik:PointSeries">
       <Setter Property="DefaultVisualStyle" Value="{Binding PointFill, Converter={StaticResource FillToPathStyleConverter}}" />

    I have attached a small project to demonstrate this. I hope this helps.

    Regards,
    Petar Marchev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. James
    James avatar
    7 posts
    Member since:
    Jul 2012

    Posted 04 Nov 2014 in reply to Petar Marchev Link to this post

    Thanks, that did the trick, much appreciated!
  4. James
    James avatar
    7 posts
    Member since:
    Jul 2012

    Posted 04 Nov 2014 in reply to Petar Marchev Link to this post

    Thanks, that did the trick, much appreciated!
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 05 Nov 2014 Link to this post

    Hi James,

    We are glad that we were able to help. Don't forget to set the DefaultVisualsRenderMode property of the render options to Batch (information here).

    Regards,
    Petar Marchev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. li
    li avatar
    6 posts
    Member since:
    Feb 2016

    Posted 03 May in reply to Petar Marchev Link to this post

    Hello,Petar Marchev。 I am Li,i have a problem for Setting each  LineSeries' color when use SeriesProvider

    i download your example ,and change some:

    ###########my XAML:

     <telerik:ChartSeriesProvider Source="{Binding}">
                        <telerik:ChartSeriesProvider.SeriesDescriptors>
                            <telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data" TypePath="Type">
                                <telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="telerik:LineSeries">
                                        <Setter Property="StrokeThickness" Value="2"/>
                                        <Setter Property="RenderOptions" Value="{StaticResource BitmapRenderOptions}" />
                                        <Setter Property="DefaultVisualStyle" Value="{Binding PointFill, Converter={StaticResource FillToPathStyleConverter}}" />
                                         <Setter Property="TrackBallInfoTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <Border>
                                                        <StackPanel Orientation="Horizontal" >
                                                            <TextBlock Text="{Binding DataPoint.Presenter.DataContext.name,StringFormat='线名称: {0}'}"/>
                                                            <TextBlock Text="{Binding DataPoint.Value,StringFormat='输出参数: {0}'}"/>
                                                        </StackPanel>
                                                    </Border>
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </telerik:CategoricalSeriesDescriptor.Style>
                            </telerik:CategoricalSeriesDescriptor>
                        </telerik:ChartSeriesProvider.SeriesDescriptors>
                    </telerik:ChartSeriesProvider>

     

    ########

    but it cannot work in LineSeries, I don't know what to do,please give me some help. Thank you very much!

  7. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1352 posts

    Posted 08 May Link to this post

    Hello Li,

    The color of a LineSeries is determined by its Stroke property or the applied palette. On the other hand the DefaultVisualStyle is applied only on the visual element of the data points. In order to color each line in a different color I can suggest you couple approaches:
    • Use the chart's palettes. This way the series will be colored automatically based on their index in the Series collection of the chart and the entries in the palette. You can also create a custom palette and assign it to the chart.
    • Bind the Stroke property of the LineSeries. You can define a property of type Brush in the view model of the series. Then bind it using the series descriptor's Style. For example:
      <telerik:CategoricalSeriesDescriptor CategoryPath="XCat" ValuePath="YVal" ItemsSourcePath="Data" TypePath="Type">
          <telerik:CategoricalSeriesDescriptor.Style>
              <Style TargetType="telerik:LineSeries">
                  <Setter Property="Stroke" Value="{Binding PointFill}" />
                  <Setter Property="StrokeThickness" Value="2"/>
                  <!-- some other properties here -->
              </Style>
          </telerik:CategoricalSeriesDescriptor.Style>
      </telerik:CategoricalSeriesDescriptor>
    I hope this information helps.

    Regards,
    Martin
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. li
    li avatar
    6 posts
    Member since:
    Feb 2016

    Posted 08 May in reply to Martin Ivanov Link to this post

    Thanks, I found a clue from the Forum,use "StrokeShapeStyle"  and set its property  named "Stroke":

    <Setter Property="StrokeShapeStyle">
                                                <Setter.Value>
                                                    <Style TargetType="Path">
                                                        <Setter Property="Stroke" Value="{Binding LineSeriesFill}"/>
                                                    </Style>
                                                </Setter.Value>

     </Setter>

     

    Now I know  "Stroke"  is the key.   Thank you very much!

Back to Top