WPF Charting Documentation - SciChart WPF Charts SDK v5.x
Worked Example - Bind Tooltip Templates or Attached Properties in MVVM

Worked Example: Bind Attached Properties in MVVM

A lot of customers ask us how to style various attached properties used in SciChart in the MVVM API. For example, the given following attached properties, how do we convert this to the MVVM API?

Attached properties used in SciChart
Copy Code
<s:SciChartSurface>
    <s:SciChartSurface.RenderableSeries>
        <s:FastLineRenderableSeries  s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate}" 
                                    s:TooltipModifier.IncludeSeries="True"
                                    s:SeriesValueModifier.IncludeSeries="False"/>
    </s:SciChartSurface.RenderableSeries>
    <s:SciChartSurface.XAxis>
        <s:NumericAxis/>
    </s:SciChartSurface.XAxis>
    <s:SciChartSurface.YAxis>
        <s:NumericAxis/>
    </s:SciChartSurface.YAxis>
    <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup>
            <s:TooltipModifier/>
            <s:SeriesSelectionModifier/>
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

The Solution: Use Series Styling in MVVM

The solution is simple, to use our method of Styling the RenderableSeries presented in Worked Example - Style a Series in MVVM.

Simply declare the attached properties and tooltip templates in a style in your View.

View (MVVM Version)
Copy Code
<Grid>
    <Grid.Resources>
        <Style TargetType="s:FastLineRenderableSeries" x:Key="PropertyStyles">
            <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}"/>
            <Setter Property="s:TooltipModifier.IncludeSeries" Value="True"/>
            <Setter Property="s:SeriesValueModifier.IncludeSeries" Value="False"/>
        </Style>
    </Grid.Resources>
    <s:SciChartSurface s:RenderableSeries="{Binding Series}">            
        <s:SciChartSurface.XAxis>
            <s:NumericAxis/>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis/>
        </s:SciChartSurface.YAxis>
        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:TooltipModifier/>
                <s:SeriesSelectionModifier/>
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>
    </s:SciChartSurface>
</Grid>

Now, apply the style using BaseRenderableSeriesViewModel.StyleKey property. SciChart will pick up the style and do the rest.  

ViewModel (MVVM Version)
Copy Code
public class MainViewModel : BindableObject
{
    public MainViewModel()
    {
        Series = new ObservableCollection<IRenderableSeriesViewModel>();
        Series.Add(new LineRenderableSeriesViewModel()
        {
            Stroke = Colors.Red,
            DataSeries = ... // todo 
            StyleKey = "PropertyStyles"
        });
    }
    public ObservableCollection<IRenderableSeriesViewModel> Series { get; private set; }
}

 

 

 

 


SCICHART ® is a Registered Trademark in the UK, US and EEC. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!