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>
- Chris Morris asked 8 months ago
- last edited 8 months ago
-
I guess one is using IAnnotation and the other IAnnotationViewModel. Is there an example of WPF Composite Annotation when using the IAnnotationViewModel approach?
-
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
-
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 login to post comments
Hello Chris,
I’ve investigated your question:
-
Annotations with Mvvm approach were designed to be used in Mvvm manner. What I mean:
if you’re creating your annotation like thisnew 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.
- Nathaniel D answered 8 months ago
- last edited 8 months ago
- You must login to post comments
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.
- You can leave your inner annotation in MyCompositeAnnotation.xaml
-
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.
-
Use the following style to get all other properties bindings set(like X1, Y1, X2, Y2, stroke, etc)
-
To have MvvmBoxAnnotationBaseStyle reachable please add this resource dictionary reference
<ResourceDictionary.MergedDictionaries>
</ResourceDictionary.MergedDictionaries>
-
Add your annotationViewModel as you did it before. it should work
- Nathaniel D answered 8 months ago
- You must login to post comments
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?
- Chris Morris answered 8 months ago
- last edited 7 months ago
- You must login to post comments
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.
-
Inside SciChartMvvmBindingsViewModel.cs there is method called InitializeAnnotations where I’m using the first approach of using custom CompositeAnnotation via Mvvm
-
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.
- Nathaniel D answered 7 months ago
- last edited 7 months ago
- You must login to post comments
Please login first to submit.