Resizing Custom Annotations - Custom sized ellipses

I was going to suggest to you our Custom Annotation documentation page, which you found.

So what’s the issue? you simply need to set an Ellipse inside the Border and stretch it to fill. For instance:

<s:SciChartSurface.Annotations>
   <s:BoxAnnotation X1="2" X2="8" Y1="2" Y2="8" Background="#33FFFFFF"
                    BorderBrush="#55FFFFFF" BorderThickness="3" Padding="5">
      <s:BoxAnnotation.Template>
         <ControlTemplate TargetType="s:BoxAnnotation">
            <Border x:Name="PART_BoxAnnotationRoot"
               Margin="{TemplateBinding Margin}">
               <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"
                               Width="{Binding ElementName=PART_BoxAnnotationRoot, Path=ActualWidth" 
                               Height="{Binding ElementName=PART_BoxAnnotationRoot, Path=ActualHeight" />
            </Border>
         </ControlTemplate>
      </s:BoxAnnotation.Template>
   </s:BoxAnnotation>
</s:SciChartSurface.Annotations>

Does that work?

Andrew —

Thank you for you quick response. I’ve managed to get the ellipse to change its form as I liked, but I am having trouble accessing something from the Template in the CodeBehind.

My code is as follows:

<s:BoxAnnotation.Template>
    <ControlTemplate TargetType="s:BoxAnnotation">
        <Border x:Name="PART_BoxAnnotationRoot">
            <Ellipse RenderTransformOrigin="0.5, 0.5" x:Name="Ellipse"
                 Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
                 Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}" 
                 Stroke="LightBlue" StrokeThickness="4">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="-45" x:Name="Angle"/> <-- This is what I need access to in the codebehind -->
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>
    </ControlTemplate>
</s:BoxAnnotation.Template>

I am trying to access the “Angle” parameter from the “RotateTransform” markup using the Template.FindName() method, as follows:

var control = (Ellipse)this.Template.FindName("Ellipse", this);

but it is not retrieving the control. I’m not that experienced in XAML/code-behind. Could you please advise?

Thanks kindly! 🙂

— Ari

So here’s what I’ve discovered. Using the following class for creating an attached property, bound to the BoxAnnotation class:

public class AngleDependency : DependencyObject
{
    public static readonly DependencyProperty AngleProperty = DependencyProperty.RegisterAttached("Angle", typeof(object), typeof(BoxAnnotation), new PropertyMetadata(false));

    public static void SetAngle(BoxAnnotation obj, double value)
    {
        obj.SetValue(AngleProperty, value.ToString());
    }

    public static double GetAngle(BoxAnnotation obj)
    {
        return double.Parse(obj.GetValue(AngleProperty).ToString());
    }
}

And then using the following

<s:BoxAnnotation ... (all assembly declarations) ... 
    local:AngleDependency.Angle="0"> <!-- Attached Property -->

    <s:BoxAnnotation.Template>
        <ControlTemplate TargetType="s:BoxAnnotation">
            <Border x:Name="PART_BoxAnnotationRoot">
                <Ellipse RenderTransformOrigin="0.5, 0.5" x:Name="Ellipse"
                     Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
                     Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}" 
                     Stroke="LightBlue" StrokeThickness="4">
                    <Ellipse.RenderTransform>
                        <RotateTransform Angle="{Binding Path=(local:CovarianceEllipse.Angle), RelativeSource={RelativeSource TemplatedParent}}"/> <!-- More complex TemplateBinding to Angle, NOTE: CovarianceEllipse, not AngleDependency -->
                    </Ellipse.RenderTransform>
                </Ellipse>
            </Border>
        </ControlTemplate>
    </s:BoxAnnotation.Template>

</s:BoxAnnotation>

And then I run the following function:

private void showEllipse(object sender, System.Windows.RoutedEventArgs e)
{
    var covarianceEllipse = new CovarianceEllipse
    {
        X1 = //some value
        Y1 = //some value
        X2 = //some value
        Y2 = //some value
        IsEditable = true
    };

    var item = AngleDependency.GetAngle(covarianceEllipse); // Just to see what the value set is, should be 0
    AngleDependency.SetAngle(covarianceEllipse, -45);

    processEquivalencyChart.Annotations.Add(covarianceEllipse);
}

And it seems to work, as shown in the attached image (You can see the ellipse is angled at 45 degrees instead of 0).

This is pretty bizzare, since I have to use “object” as the propertyType even though it’s a double that I’m working with, and the “TemplateBinding” binds to a “CovarianceEllipse.Angle” instead of an “AngleDependency.Angle” as in the primary markup. (Changing either brings an exception.)

I know it works, I just want to make sure this is the right way to do it. I would appreciate any comments or suggestions.

— Ari

EDIT: — So while this works, it’s very tricky to transform and it’s not static (meaning it changes shape as I try to zoom). Sometimes only a partial ellipse will appear, and everything outside the bounds of the BoxAnnotation disappears. I’ve attached some more figures to show.

6.png shows the ellipses after some transformation. You can see the top right (larger) ellipse is cut off. The bottom left (smaller) ellipse is still intact. Zooming in on that ellipse, you can see the shape changes in 7.png (some points are now outside the ellipse) and it’s also only partial.

Maybe it’s time to make a new “EllipseAnnotation?” 🙂