Any examples on how to use CompositeAnnotation using the mvvm pattern?

Adding the annotation in the view model does work – I add the inner annotation view models in the constructor of my new composite annotation:

public class MyCompositeAnnotationViewModel : CompositeAnnotationViewModel
{
public MyCompositeAnnotationViewModel()
{
this.ResizeDirections = XyDirection.XDirection;
this.DragDirections = XyDirection.XYDirection;
this.CoordinateMode = AnnotationCoordinateMode.Absolute;

this.Annotations.Add(new LineArrowAnnotationViewModel()
{
X1 = 0.5, X2 = 0, Y1 = 0.5, Y2 = 0.5,
CoordinateMode = AnnotationCoordinateMode.Relative, DragDirections = XyDirection.XYDirection,
ResizeDirections = XyDirection.XDirection, IsEditable = false
});
...

I can then use my MyCompositeAnnotationViewModel with the AnnotationCreationModifierMVVM.

Note however there seems to be an issue when using the AnnotationCreationModifierMVVM that is will set the X1 and X2 of MyCompositeAnnotationViewModel as double and not as Timespan when using a TimeSpanAxis.Is there a way to fix this?

Hello Chris,

I’ve double checked my previous suggestion with the setting internal annotations in ViewModel and they seems to work.

Also I’ve checked AnnotationCreationModifierMVVM with this custom annotation type and it also seems to be working.

I’ve modified SciChart => “Annotations and Axis binding” to be used with your custom CompositeAnnotation type in both ways MVVM and AnnotationCreationModifier’s one.

1. Inside SciChartMvvmBindingsViewModel.cs there is method called InitializeAnnotations where I’m using the first approach of using custom CompositeAnnotation via Mvvm

2. SciChartMvvmBindingsView.xaml => here I’ve added the following code

 <s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
          <s:AnnotationCreationModifierMVVM AnnotationViewModelType="{x:Type
  

mycustom:MyCompositeAnnotationViewModel}”
AnnotationViewModelsCollection=”{Binding AnnotationViewModels}”
XAxisId=”DateTimeAxis”
YAxisId=”TimeSpanAxis”>
<i:Interaction.Behaviors>

</i:Interaction.Behaviors>

</s:SciChartSurface.ChartModifier>

It adds annotationCreation Modifier, it also sets the corresponding annotation type and ViewModelCollection.
*** Please note: I’m setting XAxisId and YAxisId. In this example there are two X-Axes(numeric and dateTime) and two Y-Axes(numeric and TimeSpan), and I’m picking not the numeric ones to show that ThisModifier works well with different types of Axes.

**** Main magic is done in Behavior where I’m binding a command AnnotationCreatedCommand to be fired on AnnotationCreated event;

In SciChartMvvmBindingsViewModel.cs there is an ICommandProperty that looks like this:

public ICommand AnnotationCreatedCommand => new ActionCommand(e =>
{
var annotation = e.NewAnnotationViewModel;

if (annotation != null && annotation is MyCompositeAnnotationViewModel myCA)
{
    myCA.Annotations.Add(new LineAnnotationViewModel
    {
        X1 = 0,
        X2 = 1,
        Y1 = 0.5,
        Y2 = 0.5,
        CoordinateMode = AnnotationCoordinateMode.Relative,
        Stroke = Colors.Red,
    });

    annotation.IsEditable = true;
    annotation.CanEditText = true;
    annotation.IsSelected = true;
}

});

*** Again I’m adding inner annotation here.
Please find it attached the mentioned modified example.