Is there a way to draw an svg formatted annotation onto a chart for WPF?
I have found references/examples for it in javascript here . . .
https://www.scichart.com/documentation/js/current/Tutorial%2006%20-%20Adding%20Annotations.html
but not for any other platform.
- Russell Hall asked 2 years ago
- You must login to post comments
Hi Russell,
WPF supports XAML annotations instead, which is a very similar markup language to SVG. In fact, you can convert between the two using easily available converters.
The WPF CustomAnnotation type allows you to put any XAML as the child of the annotation.
We use this in our annotations example to create trade markers. The buy and sell annotations here are defined like this:
<!-- CustomAnnotation, allows placing any UIElement inside an annotation with placement via a single X1 Y1 coordinate -->
<!-- The BuyMarkerAnnotation displays a green arrow pointing up, with tooltip to bind to Trade data object -->
<s:CustomAnnotation x:Class="SciChart.Examples.Examples.AnnotateAChart.OverlayTradeMarkers.BuyMarkerAnnotation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
VerticalAnchorPoint="Top"
HorizontalAnchorPoint="Center"
Margin="0,15,0,0"
X1="{Binding X1}"
Y1="{Binding Y1}">
<Path Data="m 4 14 4 0 0 -8 3 0 -5 -5 -5 5 3 0 z"
Fill="#571CB61C"
Stroke="#FF00B400"
StrokeThickness="1"/>
<!-- Creating the tooltip. In the TradeOverlayExampleViewModel we set a Trade object as datacontext of this annotation -->
<ToolTipService.ToolTip>
<ToolTip Foreground="#222">
<Grid Margin="6" DataContext="{Binding TradeData}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Side: " />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Quantity: " />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Instrument: " />
<TextBlock Grid.Row="3" Grid.Column="0" Text="DealPrice: " />
<TextBlock Grid.Row="4" Grid.Column="0" Text="TradeDate: " />
<TextBlock Grid.Row="5" Grid.Column="0" Text="Total: " />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding BuySell}" Foreground="#FF00B400"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Quantity}" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Instrument}" />
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding DealPrice, StringFormat=$\{0:0.000\}}" Foreground="#FF00B400"/>
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding TradeDate}" />
<TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding TotalPrice, StringFormat=$\{0:0.000\}}" Foreground="#FF00B400"/>
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
</s:CustomAnnotation>
Let me know if this helps
Best regards
Andrew
- Andrew Burnett-Thompson answered 2 years ago
-
Thank you. Yes it did help. I was able to create a custom annotation as desired. However, I have run into a problem. If I draw a custom annotation with a path and drag the chart so the center (0,0) moves off the chart the entire annotation disappears.
-
A bit more information – the entire custom annotation disappears when the center of the annotation is moved off the screen.
- You must login to post comments
Please login first to submit.