Pre loader

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

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
1
0

When using an ObservableCollection of IAnnotationViewModel for Annotations I can add Custom annotations (using CustomAnnotationForMvvm) but not been able to use CompositeAnnotationForMvvm in my view.

I have seen the MeasureXAnnotation example in SciChart_CompositeAnnotations but that is not using mvvm pattern.

MyCompositeAnnotation View

    <s:CompositeAnnotationForMvvm x:Class="MyCompositeAnnotation"
s:CompositeAnnotationForMvvm.Annotations>
    <s:LineAnnotationForMvvm X1="0.5"
                           X2="0"
                           Y1="0.5"
                           Y2="0.5"
                           CoordinateMode = "Relative"
                           DragDirections = "XYDirection"
                           ResizeDirections = "XDirection"
                           StrokeThickness = "1"
                           Stroke ="White"
                           IsEditable = "False"/>

MyCompositeAnnotation view Behind code

  public partial class MyCompositeAnnotation : CompositeAnnotationForMvvm
    {
        public MyCompositeAnnotation()
        {
            this.InitializeComponent();
        }
}

MyCompositeAnnotation ViewModel

public class MyCompositeAnnotationViewModel : CompositeAnnotationViewModel
{
    public override Type ViewType => typeof(MyCompositeAnnotation);
}

Main View Model

public ObservableCollection<IAnnotationViewModel> Annotations { get; set; } = new ObservableCollection<IAnnotationViewModel>();

private void OnAddAnnotation()
        {
            var min = ((TimeSpan)this.sourceRange.Min).Ticks;

            this.Annotations.Add(new MyCompositeAnnotationViewModel ()
            {
            X1 = min + ((TimeSpan)this.sourceRange.Diff).Ticks * 0.1,
            X2 = min + ((TimeSpan)this.sourceRange.Diff).Ticks * 0.3,
            Y1 = 0.1,
            Y2 = 0.3,
            CoordinateMode = AnnotationCoordinateMode.Absolute,
            DragDirections = XyDirection.XYDirection,
            ResizeDirections = XyDirection.XYDirection,
            //                StyleKey = "LineArrowAnnotationStyle", 
            IsEditable = true
        });

Do I need to set the style so the annotation are hooked up correctly? I tried this but it did not work:

 <Style BasedOn="{StaticResource MvvmCompositeAnnotationStyle}"   TargetType="{x:Type annotations:MyCompositeAnnotationViewModel}">
   <Setter Property="s:CompositeAnnotation.Annotations" Value="{s:AnnotationsBinding Annotations}"/>
                                            </Style>
Version
6.6.0.26505
  • Chris Morris
    I guess one is using IAnnotation and the other IAnnotationViewModel. Is there an example of WPF Composite Annotation when using the IAnnotationViewModel approach?
  • Lex
    • Lex
    • 5 months ago
    Hi Chris, Thanks for your inquiry. I am going to discuss this with our team and will get back to you as soon as I have an update. With best regards, Lex, SciChart Technical Support Engineer
  • Lex
    • Lex
    • 5 months ago
    Hi Chris, Just a small update from our side. We discussed your inquiry and logged it in our tracking system for further investigation. With best regards, Lex, SciChart Technical Support Engineer
  • You must to post comments
Best Answer
0
0

Hello Chris,

I’ve investigated your question:

  1. Annotations with Mvvm approach were designed to be used in Mvvm manner. What I mean:
    if you’re creating your annotation like this

    new MyCompositeAnnotationViewModel ()
    {
    X1 = min + ((TimeSpan)this.sourceRange.Diff).Ticks * 0.1,
    X2 = min + ((TimeSpan)this.sourceRange.Diff).Ticks * 0.3,
    Y1 = 0.1,
    Y2 = 0.3,
    CoordinateMode = AnnotationCoordinateMode.Absolute,
    DragDirections = XyDirection.XYDirection,
    ResizeDirections = XyDirection.XYDirection,
    // StyleKey = “LineArrowAnnotationStyle”,
    IsEditable = true
    }

you also have to initialize inner annotation\annotations as viewModels something like this:

var myAnnVM = new MyCompositeAnnotationViewModel ()
{
    X1 = 1,
    X2 = 8,
    Y1 = 2,
    Y2 = 4,
    CoordinateMode = AnnotationCoordinateMode.Absolute,
    DragDirections = XyDirection.XYDirection,
    ResizeDirections = XyDirection.XYDirection,
};
myAnnVM.Annotations.Add(new LineAnnotationViewModel
{
    X1 = 0,
    X2 = 1,
    Y1 = 0.5,
    Y2 = 0.5,
    CoordinateMode = AnnotationCoordinateMode.Relative,
    Stroke = Colors.Red,
});

AnnotationViewModels.Add(myAnnVM);

Because there is a style that is used for CompositeAnnotationsForMvvm where we have binding to ‘Annotations’ property with ‘TwoWay’ mode. And in your case you’re creating your ‘MyCompositeAnnotationViewModel’ which has an EMPTY ObservableCollection assigned to ‘Annotations’ property. So it results in not having any inner annotation.

**** Don’t forget to remove your inner annotation in MyCompositeAnnotation.xaml

Please try this, it should help.

  • You must to post comments
1
0

I’m strongly recommend to use First approach, but there also is another one.
I recommend this solution less because it’s overrides default style, and actually is kind of mix btw Mvvm and non Mvvm annotation.

  1. You can leave your inner annotation in MyCompositeAnnotation.xaml
  2. You have to add this into your MyCompositeAnnotation.xaml.cs

    DefaultStyleKey = typeof(MyCompositeAnnotation);
    this.Annotations = new ObservableCollection();

First line = we’re resetting defaultStyle;
Second line = we’re reinitializing Annotations property(as it’s default value is ‘null’, and after re-setting default style it will be re-setted to null.

  1. Use the following style to get all other properties bindings set(like X1, Y1, X2, Y2, stroke, etc)

  2. To have MvvmBoxAnnotationBaseStyle reachable please add this resource dictionary reference

    <ResourceDictionary.MergedDictionaries>

    </ResourceDictionary.MergedDictionaries>

  3. Add your annotationViewModel as you did it before. it should work

  • You must to post comments
0
0

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?

  • You must to post comments
0
0

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.

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.