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"
          d:DesignHeight="400" d:DesignWidth="600">
      <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">
               <Style TargetType="s:FastLineRenderableSeries">
                  <Setter Property="StrokeDashArray" Value="5 5"/>
                  <Setter Property="StrokeThickness" Value="3"/>
                  <Setter Property="Stroke" Value="White"/>
   <Grid DataContext="{StaticResource viewModel}">
      <s:SciChartSurface RenderableSeries="{s:SeriesBinding SeriesViewModels}">

            <s:NumericAxis GrowBy="0.1, 0.1"/>



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));