MVVM Axis API | WPF Chart Documentation

MVVM Axis API

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

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.

Applying styles to Axis

Declaring Custom Axis with MVVM

Further Reading