In addition to the SeriesBinding MarkupExtension for binding a SciChartSurface to a collection of Viewmodels representing chart series, SciChart also features the AxesBinding MarkupExtension: for binding to a collection of AxisViewModels.
To use this API, do the following:
AxisBinding View |
Copy Code
|
---|---|
<s:SciChartSurface YAxes="{s:AxesBinding YAxes}" XAxes="{s:AxesBinding XAxes}"> </s:SciChartSurface> |
Now in the ViewModel we need collections for the YAxes and XAxes. We update our MainViewModel like this:
AxisBinding ViewModel |
Copy Code
|
---|---|
public class MainViewModel : BindableObject { private ObservableCollection<IAxisViewModel> _yAxes = new ObservableCollection<IAxisViewModel>(); private ObservableCollection<IAxisViewModel> _xAxes = new ObservableCollection<IAxisViewModel>(); public MainViewModel() { YAxes.Add(new NumericAxisViewModel() { AutoRange = AutoRange.Always, AxisTitle = "Left YAxis", Id = "LeftYAxis", AxisAlignment = AxisAlignment.Left, }); YAxes.Add(new NumericAxisViewModel() { AutoRange = AutoRange.Always, AxisTitle = "Right YAxis", AxisAlignment = AxisAlignment.Right, }); XAxes.Add(new NumericAxisViewModel() { AutoRange = AutoRange.Always, AxisTitle = "XAxis", AxisAlignment = AxisAlignment.Bottom, }); } public ObservableCollection<IAxisViewModel> YAxes { get { return _yAxes; } } public ObservableCollection<IAxisViewModel> XAxes { get { return _xAxes; } } } |
Applying styles to Axis
Axis may be styled using a similar technique to the one presented for RenderableSeries. Simply declare a Style in XAML with a stylekey and set AxisBaseViewModel.StyleKey property.
Declaring Custom Axis with MVVM
Similar to Series, you can declare a custom class inheriting AxisBaseViewModel. Next override the ViewType property to declare the type of Axis to create when this ViewModel is discovered. Finally, make sure you declare a style in your view based on our default styles to apply to it.
Further Reading
For further reading on how to use the Axis MVVM API, as well as a code sample, see our Adding Multiple Axis in MVVM Tutorial.