WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - Bind Tooltip Templates or Attached Properties in MVVM
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; }
}