Knowledgebase: RenderableSeries API
Series Selection and Selected Series Styling
Posted by Admin - on 21 March 2014 11:19 AM

BaseRenderableSeries.IsSelected

Each BaseRenderableSeries has an IsSelected property. When set to True, two things happen:

  1. The Series Z-order is modified, any selected series are drawn last (highest Z-order)
  2. A BaseRenderableSeries.SelectedSeriesStyle is applied to the series.

This allows us to do some things to change the visual appearance of RenderableSeries when selected.

Styling the Selected Series

To set a SelectedSeriesStyle on a renderable-series, use the following XAML:

<s:FastLineRenderableSeries>
    <s:FastLineRenderableSeries.SelectedSeriesStyle>
        <!-- When a series is selected, apply this style -->
        <!-- Changes SeriesColor to white on click -->
        <!-- Applies a PointMarker -->
        <Style TargetType="s:FastLineRenderableSeries">
            <Setter Property="SeriesColor" Value="White" />
            <Setter Property="PointMarkerTemplate">
                <Setter.Value>
                    <!-- This is how we do PointMarkerTemplates in Scichart v2.0. You can either declare an EllipsePointMarker inline, -->
                    <!-- or, if temmplating (because you are sharing a style across many series), then use a ControlTemplate with a BasePointMarker, -->
                    <!-- or UIElement to replicate across each data-point -->
                    <ControlTemplate>
                        <s:EllipsePointMarker Fill="#FF00DC" Stroke="White" Width="7" Height="7"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </s:FastLineRenderableSeries.SelectedSeriesStyle>
</s:FastLineRenderableSeries>

Now, whenever the IsSelected property is set on this RenderableSeries, then the SelectedSeriesStyle above will be applied, in this case, changing its SeriesColor and applying a PointMarker.

Using the SeriesSelectionModifier

Also it is possible to set the style only once in the SeriesSelectionModifier using the SelectedSeriesStyle property in more general cases (it will be applied to all series):

<s:SeriesSelectionModifier>
    <s:SeriesSelectionModifier.SelectedSeriesStyle>
        <!-- This style will be applied to all RenderableSeries -->
        <Style TargetType="s:BaseRenderableSeries">
            <Setter Property="SeriesColor" Value="White" />
        </Style>
    </s:SeriesSelectionModifier.SelectedSeriesStyle>
</s:SeriesSelectionModifier>

Notice, that SelectedSeriesStyle from modifier has lower priority than its counterpart from the RenderableSeries, so any style explicitly set on the RenderableSeries will override the one from modifier.

This will result in the following visual appearance when a series is selected:

Complete Example on SeriesSelectionModifier

There is an example in the SciChart Silverlight Examples suite which shows how to combine the SeriesSelectionModifier with the BaseRenderableSeries.SelectedSeriesStyle property to automatically enable mouse-click selection.

If you want to create your own ChartModifier to perform selection, e.g. on mouse-over, then you can use our Hit-Test API (next)!

(0 vote(s))
Helpful
Not helpful

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725