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