Pre loader

resizing a custom annotation

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


I’ve created a custom annotation and have set it’s .IsEditable property in code so the user can reposition it. I have two issues:
1.I want the user to be able to resize the “PPZLine” in the X direction, but I can’t figure out how to get the anchor points to appear.

  1. I want to be able to see the chart data that the annotation is covering. I tried setting AnnotationCanvas = BelowChart, but then I couldn’t move the annotation or get any annotation mouse handlers to trigger.

Here’s the annoation’s xaml:

<s:CustomAnnotation x:Class="CinchV2DemoWPF.Views.SciChart.PPZView"

             X1="{Binding X1}"
             Y1="{Binding Y1}"
             d:DesignHeight="300" d:DesignWidth="300">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

    <!-- price line must use margin 0,0 or obj will not be visible-->
        <s:BoxAnnotation Name="LongEntryMarker" Grid.Row="0"
                       Width="20"    Height="10"  Background="DarkViolet" Margin="0,0"  VerticalAlignment="Top" 

        <!-- long marker line MouseRightButtonDown="LongEntryMarker_OnMouseRightButtonDown"-->
        <s:BoxAnnotation Name="PPZLine" Grid.Row="1"
                       Width="150"    Height="5"  Background="red" Margin="0,0"  VerticalAlignment="Top" 
  • You must to post comments

I’ve got the following retemplated resizable boxannotation working! The box annotation is composed of 2 rectangles.
The new template in App.xaml is:

 &lt;!--  Annotations ************************************************************************************* --&gt;
&lt;Style x:Key=&quot;AnnotationBaseStyle&quot; TargetType=&quot;s:AnnotationBase&quot;&gt;
        &lt;Setter Property=&quot;IsTabStop&quot; Value=&quot;False&quot; /&gt;

&lt;!--  BoxAnnotation - applies to all BoxAnnotations, since there is no x:key --&gt;
&lt;Style BasedOn=&quot;{StaticResource AnnotationBaseStyle}&quot;  x:Key=&quot;PPZBox&quot; TargetType=&quot;s:BoxAnnotation&quot;&gt;
    &lt;Setter Property=&quot;Template&quot;&gt;
            &lt;ControlTemplate TargetType=&quot;s:BoxAnnotation&quot;&gt;
                &lt;Border x:Name=&quot;PART_BoxAnnotationRoot&quot;
                    Margin=&quot;{TemplateBinding Margin}&quot;
                    Background=&quot;{TemplateBinding Background}&quot;
                    BorderBrush=&quot;{TemplateBinding BorderBrush}&quot;
                    BorderThickness=&quot;{TemplateBinding BorderThickness}&quot;
                    CornerRadius=&quot;{TemplateBinding CornerRadius}&quot; 

                            &lt;RowDefinition Height=&quot;10&quot;/&gt;
                            &lt;RowDefinition Height=&quot;*&quot;/&gt;

                                    &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
                                    &lt;ColumnDefinition Width=&quot;15&quot;/&gt;

                                &lt;!-- price line must use margin 0,0 or obj will not be visible--&gt;
                        &lt;Rectangle Name=&quot;PPZLine&quot; Grid.Row=&quot;0&quot; Grid.Column=&quot;0&quot;
                                       Width=&quot;Auto&quot;    Height=&quot;10&quot;  Fill=&quot;red&quot;  VerticalAlignment=&quot;Top&quot; 
                                &lt;Rectangle Name=&quot;LongEntryMarker&quot; Grid.Row=&quot;0&quot; Grid.Column=&quot;1&quot;
                                       Width=&quot;15&quot;    Height=&quot;10&quot;  Fill=&quot;SeaGreen&quot; Margin=&quot;0,0&quot; 

                        &lt;!-- long marker line MouseRightButtonDown=&quot;LongEntryMarker_OnMouseRightButtonDown&quot;--&gt;



The view that uses the new boxannotation template,PPZView.xaml, is:

<cw:PPZAnnotation x:Class="CinchV2DemoWPF.Views.SciChart.PPZView"
Style="{StaticResource PPZBox}"
d:DesignHeight="100" d:DesignWidth="300">

Now the thing I can’t figure out is how to access the rectangle named ‘LongEntryMarker’ so I can add mouse handlers. What I want to do in the PPZAnnotationViewModel is:
view.LongEntryMarker.MouseRightButtonDown += LongMouseDownHander;
I’ve got access to the view, but I need to somehow add the rectangle called ‘LongEntryMarker’ as a view property.

thanks in advance! I’m still inexperienced with xaml.

  • Andrew Burnett-Thompson
    For somebody whose inexperienced with XAML you've done pretty well! Control templating is an advanced topic! Well done, I'm really glad this works as we didn't think of it until you pointed out the limitation with CustomAnnotation, so its great to know it can be used. Ok to get access to the annotation? I would suggest handling MouseRightButtonDown in the code-behind of your PPZAnnotation control and then passing up the event to a parent. Ideally you shouldn't handle mouse-event-handlers in a viewmodel, its better to handle these in View-code (since they are view related), then pass the result to a ViewModel. Or ... if you want you can actually bind an event to a ViewModel, using syntax like this: <PPZAnnotation> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseDown"> <cmd:EventToCommand Command="{Binding MouseDownCommand, Mode=OneWay}" CommandParameter="{Binding}" /> </i:EventTrigger> </i:Interaction.Triggers> </PPZAnnotation> The EventTrigger comes from MVVM Lite, but there are many other frameworks which provide Event-To-Command. Next you will need to expose an ICommand in your ViewModel public class MyViewModel : INotifyPropertyChanged { // ... public ICommand MouseDownCommand { get { return new DelegateCommand(() => HandleMouseDown()); } } } Finally you need to make sure the DataContext of your PPZAnnotation is equal to the viewmodel that hosts the command. How to do this? You can either set the DataContext on all annotations as you create them, or, you can use a RelativeSource binding to bind PPZAnnotation to a parent classes' view model. You can learn more about RelativeSource binding here. Hope this helps! Andrew
  • tecman234
    I've used eventToCommand binding before, but I'm trying to capture the mouse event only for the rectangle called 'LongEntryMarker', not the entire PPZAnnotation. I can't put the eventToCommand in the app.xaml where I've retemplated the box annotation, because there isn't any datacontext in the template. If put the eventToCommand in the PPZAnnotation xaml, I can't figure out out how to reference 'LongEntryMarker'. thanks.
  • Andrew Burnett-Thompson
    Thats the magic of binding, you don't need a datacontext. Just do an EventToCommand binding and use RelativeSource FindAncestor to walk up the visual tree. Or ... if you want to debug it in code, handle OnMouseDown in code-behind of your custom annotation and use the VisualTreehHelper to find a parent of type SciChartSurface, then get its datacontext and call a method manually in the ViewModel (by getting and casting DataContext). That should do it :-) Andrew
  • tecman234
    Andrew, thanks for pointing out that I could just include the eventToCommand in a template. I'm using Cinch mvvm so I used EventToCommandTrigger, but I didn't need the Relativesource because cinch automagically binds the use of the template to the current view model. Now everything is working on the custom box annotation. thanks for all of your help with this!
  • Andrew Burnett-Thompson
    Sounds like you've done something really cool (that we didn't think about in our examples) - made a custom box annotation! Well done :) and for a beginner in XAML too! - Andrew
  • You must to post comments

Hello there,

Hmmm… the CustomAnnotation is an AnchorPointAnnotation meaning it expects to have a single X1Y1 point (not X1Y1, X2Y2 pair). It can only be positioned by a single X,Y coordinate plus optional Width, Height.

It might be necessary if you want to resize all four edges to re-template a BoxAnnotation, here is the Control Template:

    <!--  Annotations  -->
    <Style x:Key="AnnotationBaseStyle" TargetType="a:AnnotationBase">
            <Setter Property="IsTabStop" Value="False" />

    <!--  BoxAnnotation  -->
    <Style BasedOn="{StaticResource AnnotationBaseStyle}" TargetType="a:BoxAnnotation">
        <Setter Property="Template">
                <ControlTemplate TargetType="a:BoxAnnotation">
                    <Border x:Name="PART_BoxAnnotationRoot"
                            Margin="{TemplateBinding Margin}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}" />

If you adjust that (e.g. put a child of Border with your custom annotation content in it) and apply to specific BoxAnnotations in your application (using an x:Key on the style) you should be able to get a four-point resizable custom annotation.

Let me know if that works!

Re: The other issue, cannot move an annotation below the series, oops – I have logged this as a bug for investigation. My apologies for that.

Best regards,

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies