WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - Style a Series in MVVM
Worked Example - Style a Series in MVVM

Worked Example: Style Series in MVVM

Series can be styled in MVVM by registering a style in XAML and referencing it from the ViewModel.

To do this, you need to declare a Style (TargetType=FastLineRenderableSeries, or, your chosen series type) in XAML and give it a key. Next, set the LineRenderableSeriesViewModel.StyleKey property equal to the key in XAML. SciChart picks it up and applies the style automagically to the series!

View (XAML)

Style Series in MVVM
Copy Code 
<UserControl x:Class="WpfApplication3.HelloSciChartWorld"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
          xmlns:local="clr-namespace:WpfApplication3"
          mc:Ignorable="d"
          d:DesignHeight="400" d:DesignWidth="600">
   <UserControl.Resources>
      <local:HelloSciChartWorldViewModel x:Key="viewModel"/>

      <Style TargetType="s:FastLineRenderableSeries" x:Key="LineSeriesStyle0">
         <Setter Property="StrokeDashArray" Value="5 5"/>
         <Setter Property="StrokeThickness" Value="4"/>
         <Setter Property="Stroke" Value="Orange"/>
         <Setter Property="SelectedSeriesStyle">
            <Setter.Value>
               <Style TargetType="s:FastLineRenderableSeries">
                  <Setter Property="StrokeDashArray" Value="5 5"/>
                  <Setter Property="StrokeThickness" Value="3"/>
                  <Setter Property="Stroke" Value="White"/>
               </Style>
            </Setter.Value>
         </Setter>
      </Style>
     
   </UserControl.Resources>
  
   <Grid DataContext="{StaticResource viewModel}">
      <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}">
         <s:SciChartSurface.XAxis>
            <s:NumericAxis/>
         </s:SciChartSurface.XAxis>

         <s:SciChartSurface.YAxis>
            <s:NumericAxis GrowBy="0.1, 0.1"/>
         </s:SciChartSurface.YAxis>

      </s:SciChartSurface>
   </Grid>
</UserControl>

ViewModel

Style Series in MVVM
Copy Code 
public class HelloSciChartWorldViewModel : INotifyPropertyChanged
{
       private readonly ObservableCollection<IRenderableSeriesViewModel> _seriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();

       public event PropertyChangedEventHandler PropertyChanged;

       public HelloSciChartWorldViewModel()
       {
             var xyData = new XyDataSeries<double, double>();
             for (int i = 0; i < 100; i++)
             {
                    xyData.Append(i, Math.Sin(i * 0.2));
             }

             SeriesViewModels.Add(new LineRenderableSeriesViewModel()
             {
                    DataSeries = xyData,       
                    // Set the StyleKey equal to the x:Key in XAML
                    StyleKey = "LineSeriesStyle0"
             });
       }

       public ObservableCollection<IRenderableSeriesViewModel> SeriesViewModels
       {
             get { return _seriesViewModels; }
       }

       protected virtual void OnPropertyChanged(string propertyName)
       {
             var handler = PropertyChanged;
             if (handler != null)
             {
                    handler(this, new PropertyChangedEventArgs(propertyName));
             }           
       }
}