SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components
WPF Trade Annotations
// WPF Chart Examples
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
Demonstrates how to place the trading annotations, that are commonly used in trading and financial applications over a chart
by click in realtime as well as in code-behind.
The Trading annotations are created via TradingAnnotationCreationModifier, or with TradingAnnotationCreationModifierMvvm in MVVM.
TradingAnnotationCreationModifier is derived from AnnotationsBase.
You can find more information on this, following this links:
– AnnotationCreationModifier
– MVVM Annotations API
In order to create the annotation in code-behind or in ViewModelyou will use method SetBasePoint (iComparable x, iComparable y).
Annotation Types Include:
– AxisMarkerAnnotation
– BrushAnnotation
– ElliotWaveAnnotation
– XabcdAnnotation
– HeadAndShouldersAnnotation
– FibonacciRetracementAnnotation
– FibonacciExtensionAnnotation
– PitchforkAnnotation
Also you can find more info about TradingAnnotationCreation modifier, following this links:
– TradingAnnotationCreationModifier
You can change styling of the annotations by changing the annotation properties such as line color and thickness, as well as fill color.
// Source Code
The C#/WPF source code for the WPF Trade Annotations example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
- Clone the SciChart.WPF.Examples from Github.
- Or, view source in the SciChart WPF Examples suite.
- Also the SciChart WPF Trial contains the full source for the examples (link below).
The SciChart Examples source code is available on Github and viewable in-app for some platforms
// DrawingToolsEditPanelResourceDictionary.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:t="clr-namespace:SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations">
<Color x:Key="ControlMouseOverColor">#FF0000</Color>
<Color x:Key="DisabledControlDarkColor">#AA0000</Color>
<Color x:Key="DisabledForegroundColor">#FFFFFF</Color>
<Color x:Key="DisabledBorderDarkColor">#00FF00</Color>
<Color x:Key="ControlPressedColor">#00FFFF</Color>
<Color x:Key="BorderMediumColor">#323438</Color>
<Color x:Key="ControlLightColor">#323438</Color>
<Color x:Key="DropdownBorderBackground">#222326</Color>
<Color x:Key="ControlMediumColor">#323438</Color>
<Color x:Key="SelectedUnfocusedColor">Peru</Color>
<Style x:Key="ComboBoxToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Border x:Name="Border">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlMediumColor}" />
</Border.Background>
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#FF0FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#500FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FillColorComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="MinWidth" Value="30" />
<Setter Property="MaxWidth" Value="30" />
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="26" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="1" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Width="16" Height="16" Fill="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid Background="#FF323438">
<ToggleButton x:Name="ToggleButton"
Width="30"
Height="30"
Margin="0"
ClickMode="Press"
Effect="{x:Null}"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Border x:Name="Border">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlMediumColor}" />
</Border.Background>
</Border>
<Viewbox Margin="8,0,0,0">
<Grid Width="16" Height="16">
<Path Data="m8.231329,4.874566l-5.3566,-4.825827l-0.84783,0.763822l1.42603,1.28472l-3.08274,2.777285c-0.35052,0.315785 -0.35052,0.828592 0,1.144376l3.29545,2.968909c0.17376,0.159239 0.40444,0.237507 0.63512,0.237507s0.46136,-0.078268 0.63512,-0.237507l3.29545,-2.968909c0.35051,-0.315785 0.35051,-0.828592 0,-1.144376zm-6.8036,0.572188l2.87303,-2.585651l2.87303,2.585651l-5.74606,0zm8.26558,0.809705s-1.19835,1.16867 -1.19835,1.889302c0,0.596482 0.53626,1.079597 1.19835,1.079597s1.19834,-0.483116 1.19834,-1.079597c0,-0.720633 -1.19834,-1.889302 -1.19834,-1.889302z" Fill="Silver" />
<Path Data="m0,9.525009l10.996447,0l0,2.445839l-10.996447,0l0,-2.445839z" Fill="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" />
</Grid>
</Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#FF0FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#500FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup x:Name="Popup"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{StaticResource DropdownBorderBackground}" />
</Border.Background>
</Border>
<WrapPanel Width="245"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
Orientation="Horizontal" />
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="StrokeColorComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource FillColorComboBoxStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid Background="#FF323438">
<ToggleButton x:Name="ToggleButton"
Width="30"
Height="30"
Margin="0"
ClickMode="Press"
Effect="{x:Null}"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Border x:Name="Border">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlMediumColor}" />
</Border.Background>
</Border>
<Viewbox Margin="6,4,0,4">
<Grid Width="16" Height="16">
<Path Data="m10.541638,1.356967l-1.223631,-1.102793c-0.126341,-0.114021 -0.292461,-0.171158 -0.458301,-0.171158c-0.16584,0 -0.33168,0.056884 -0.458021,0.170905l-0.978793,0.880818l2.139954,1.927991l0.978793,-0.880566c0.252962,-0.228042 0.252962,-0.597915 0,-0.825198z" Fill="Silver" />
<Polygon Fill="Silver" Points="1.355672463774681,6.723138332366943 3.503391847014427,8.711258888244629 9.419484242796898,3.2356679439544678 7.2717453092336655,1.2475600242614746" />
<Polygon Fill="Silver" Points="1.2278562635183334,6.954968452453613 0.779692754149437,9.312968254089355 3.3271628469228745,8.898561477661133" />
<Path Data="m0,9.525009l10.996447,0l0,2.445839l-10.996447,0l0,-2.445839z" Fill="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}" />
</Grid>
</Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#FF0FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#500FA32D"
Duration="0:0:0.2" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup x:Name="Popup"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{StaticResource DropdownBorderBackground}" />
</Border.Background>
</Border>
<WrapPanel Width="245"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
Orientation="Horizontal" />
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DrawingToolsComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton x:Name="ToggleButton"
ClickMode="Press"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ComboBoxToggleButtonStyle}" />
<ContentPresenter x:Name="ContentSite"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsHitTestVisible="False" />
<TextBox x:Name="PART_EditableTextBox"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Background="Transparent"
Focusable="True"
IsReadOnly="{TemplateBinding IsReadOnly}"
Style="{x:Null}"
Visibility="Hidden">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Background="{TemplateBinding Background}"
Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<Popup x:Name="Popup"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{StaticResource DropdownBorderBackground}" />
</Border.Background>
</Border>
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
Orientation="Vertical" />
</Grid>
</Popup>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FF42b649" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentSite" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Background="Transparent">
<Grid MinHeight="24">
<Rectangle x:Name="MouseOverFill"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="#FF0FA32D"
Opacity="0" />
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverFill"
Storyboard.TargetProperty="(Rectangle.Opacity)"
To="1"
Duration="0:0:0.12" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FF42b649" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FF0FA32D" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FontSizeComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource DrawingToolsComboBoxStyle}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Width="24"
TextAlignment="Center"
Foreground="White"
Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<t:StrokeThicknessToEditPanelConverter x:Key="ThicknessToEditPanelConverter" />
<Style x:Key="StrokeThicknessComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource DrawingToolsComboBoxStyle}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Width="30"
Margin="5,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="Silver"
Height="{Binding Converter={StaticResource ThicknessToEditPanelConverter}}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>// TradeAnnotations.xaml
<UserControl x:Class="SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations.TradeAnnotations"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:ta="clr-namespace:SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations"
xmlns:dt="clr-namespace:SciChart.Charting.DrawingTools.TradingAnnotations.ViewModels;assembly=SciChart.Charting.DrawingTools"
d:DesignHeight="400"
d:DesignWidth="600"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/MergedResources.xaml" />
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/ToolbarButtonsCommon.xaml" />
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/SciChartExampleToolbar.xaml" />
<ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/SciChartExampleToolbar.xaml" />
<ResourceDictionary Source="DrawingToolsEditPanelResourceDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<ta:AnnotationViewModelToVisibilityConverter x:Key="AnnotationViewModelToVisibility" />
<ta:DrawingToolViewModelToEditPanelOptionsConverter x:Key="DrawingToolViewModelToEditPanelOptionsConverter" />
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<i:Interaction.Behaviors>
<!-- Note: To use this in your own application, grab from github at https://github.com/ABTSoftware/SciChart.WPF.Examples/tree/master/v5.x/Examples/SciChart.Examples.ExternalDependencies/Behaviors -->
<ext:EventToCommandBehavior Command="{Binding WorkSpaceKeyUpCommand}" Event="KeyUp" PassArguments="True" />
</i:Interaction.Behaviors>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference sciChart}}">
<ext:FlyoutMenuButton Padding="0"
HorizontalAlignment="Left"
Content="Tools"
FontSize="10">
<ext:FlyoutMenuButton.PopupContent>
<StackPanel MinWidth="150" Orientation="Vertical">
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:BrushAnnotationViewModel}"
Content="Pointer"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:ElliotWaveAnnotationViewModel}"
Content="Elliot Wave"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:PitchforkAnnotationViewModel}"
Content="Pitchfork"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:XabcdAnnotationViewModel}"
Content="XABCD Pattern"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:HeadAndShouldersAnnotationViewModel}"
Content="Head and Shoulders"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:FibonacciExtensionAnnotationViewModel}"
Content="Fibonacci Extension"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
<ToggleButton Width="auto"
Margin="0"
HorizontalAlignment="Stretch"
s:ToggleButtonExtensions.GroupName="ZoomPanSelectionGroup"
Command="{Binding SetAnnotationCreationTypeCommand}"
CommandParameter="{x:Type dt:FibonacciRetracementAnnotationViewModel}"
Content="Fibonacci Retracement"
IsChecked="{Binding IsAnnotationDrawn, Mode=TwoWay}"
Style="{StaticResource DefaultToggleButtonStyle}" />
</StackPanel>
</ext:FlyoutMenuButton.PopupContent>
</ext:FlyoutMenuButton>
<Button HorizontalAlignment="Left"
Command="{Binding DeleteSelectedAnnotationCommand}"
Content="Del"
Style="{StaticResource DefaultButtonStyle}" />
</ext:SciChartInteractionToolbar>
<s:SciChartSurface x:Name="sciChart"
Grid.Column="1"
Annotations="{s:AnnotationsBinding Annotations}"
RenderableSeries="{s:SeriesBinding Series}">
<s:SciChartSurface.XAxis>
<s:DateTimeAxis />
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis />
</s:SciChartSurface.YAxis>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:RubberBandXyZoomModifier IsEnabled="{Binding IsRubberBandEnabled}" />
<s:ZoomPanModifier IsEnabled="{Binding IsZoomPanEnabled, Mode=TwoWay}" />
<s:MouseWheelZoomModifier />
<s:TradingAnnotationCreationModifierMvvm AnnotationViewModelType="{Binding AnnotationType}"
AnnotationViewModelsCollection="{Binding Annotations}"
IsEnabled="{Binding IsAnnotationCreationEnable, Mode=TwoWay}"
ReceiveHandledEvents="True">
<i:Interaction.Behaviors>
<ext:EventToCommandBehavior Command="{Binding AnnotationCreatedCommand}"
Event="AnnotationCreated"
PassArguments="True" />
</i:Interaction.Behaviors>
</s:TradingAnnotationCreationModifierMvvm>
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
</s:SciChartSurface>
<Canvas Grid.Column="1" Panel.ZIndex="1000">
<Thumb Canvas.Left="10"
Canvas.Top="10"
Canvas.ZIndex="1000"
DragDelta="Thumb_OnDragDelta"
Visibility="{Binding IsEditPanelVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
<Thumb.Template>
<ControlTemplate>
<Grid Background="#323438">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border BorderThickness="1,0" BorderBrush="#FF1B1B1B" Background="#FF5B5B5B" Cursor="SizeAll">
<StackPanel VerticalAlignment="Center" Width="10">
<Ellipse Width="3" Height="3" Fill="#FF1B1B1B" />
<Ellipse Width="3" Height="3" Fill="#FF1B1B1B" Margin="0,3"/>
<Ellipse Width="3" Height="3" Fill="#FF1B1B1B" />
</StackPanel>
</Border>
<ComboBox Grid.Column="1"
SelectedItem="{Binding SelectedAnnotation.StrokeThickness, Mode=TwoWay}"
Style="{StaticResource StrokeThicknessComboBoxStyle}">
<sys:Double>1</sys:Double>
<sys:Double>3</sys:Double>
<sys:Double>5</sys:Double>
<sys:Double>7</sys:Double>
</ComboBox>
<ComboBox Grid.Column="2"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation.Stroke, Mode=TwoWay}"
Style="{StaticResource StrokeColorComboBoxStyle}"/>
<ComboBox Grid.Column="3"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=FontSize}"
Style="{StaticResource FontSizeComboBoxStyle}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=FontSize}">
<sys:Double>6</sys:Double>
<sys:Double>7</sys:Double>
<sys:Double>8</sys:Double>
<sys:Double>9</sys:Double>
<sys:Double>10</sys:Double>
<sys:Double>11</sys:Double>
<sys:Double>12</sys:Double>
<sys:Double>14</sys:Double>
<sys:Double>18</sys:Double>
<sys:Double>24</sys:Double>
<sys:Double>36</sys:Double>
</ComboBox>
<ComboBox Grid.Column="4"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=Fill}"
Style="{StaticResource FillColorComboBoxStyle}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Fill}" />
<ComboBox Grid.Column="5"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=MiddleFill}"
Style="{StaticResource FillColorComboBoxStyle}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Pitchfork}" />
<ComboBox Grid.Column="6"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=SidesFill}"
Style="{StaticResource FillColorComboBoxStyle}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Pitchfork}" />
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
</Grid>
</UserControl>// TradeAnnotations.xaml.cs
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using SciChart.Charting.Visuals;
namespace SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations
{
/// <summary>
/// Interaction logic for TradeAnnotations.xaml
/// </summary>
public partial class TradeAnnotations : UserControl
{
public TradeAnnotations()
{
InitializeComponent();
ManipulationMargins.AnnotationLineWidth = 20d;
}
// Code for dragging the thumb on the toolbar. Not related to functionality of SciChart
private void Thumb_OnDragDelta(object sender, DragDeltaEventArgs e)
{
if (e.Source is Thumb thumb && thumb.Parent is Canvas canvas)
{
var left = Canvas.GetLeft(thumb) + e.HorizontalChange;
var top = Canvas.GetTop(thumb) + e.VerticalChange;
if (left <= 0d)
{
Canvas.SetLeft(thumb, 0d);
}
else if (left + thumb.ActualWidth <= canvas.ActualWidth)
{
Canvas.SetLeft(thumb, left);
}
if (top <= 0d)
{
Canvas.SetTop(thumb, 0d);
}
else if (top + thumb.ActualHeight <= canvas.ActualHeight)
{
Canvas.SetTop(thumb, top);
}
}
}
}
}// TradeAnnotationsViewModel.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using System.Windows.Input;
using System.Windows.Media;
using SciChart.Charting.ChartModifiers;
using SciChart.Charting.Common.Helpers;
using SciChart.Charting.DrawingTools.TradingAnnotations.ViewModels;
using SciChart.Charting.Model.ChartSeries;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Visuals.Annotations;
using SciChart.Core.Extensions;
using SciChart.Examples.ExternalDependencies.Common;
using SciChart.Examples.ExternalDependencies.Data;
namespace SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations
{
public class TradeAnnotationsViewModel : BaseViewModel
{
private ObservableCollection<IRenderableSeriesViewModel> _series;
private ObservableCollection<IAnnotationViewModel> _annotations;
private Type _annotationType;
private IAnnotationViewModel _selectedAnnotation;
private bool _isEditPanelVisible;
private bool _isAnnotationCreationEnable;
private bool _isZoomPanEnabled;
private bool _isRubberBandEnabled;
public TradeAnnotationsViewModel()
{
Annotations = new ObservableCollection<IAnnotationViewModel>();
Annotations.CollectionChanged += OnAnnotationsCollectionChanged;
Series = new ObservableCollection<IRenderableSeriesViewModel>
{
new CandlestickRenderableSeriesViewModel {DataSeries = GetPriceDataSeries()}
};
}
public bool IsEditPanelVisible
{
get => _isEditPanelVisible;
set
{
_isEditPanelVisible = value;
OnPropertyChanged("IsEditPanelVisible");
}
}
public IAnnotationViewModel SelectedAnnotation
{
get => _selectedAnnotation;
set
{
_selectedAnnotation = value;
OnPropertyChanged("SelectedAnnotation");
}
}
public bool IsRubberBandEnabled
{
get => _isRubberBandEnabled;
set
{
_isRubberBandEnabled = value;
OnPropertyChanged("IsRubberBandEnabled");
}
}
public bool IsAnnotationDrawn { set; get; }
public ObservableCollection<IRenderableSeriesViewModel> Series
{
get => _series;
set
{
_series = value;
OnPropertyChanged("Series");
}
}
public ObservableCollection<IAnnotationViewModel> Annotations
{
get => _annotations;
set
{
_annotations = value;
OnPropertyChanged("Annotations");
}
}
public Type AnnotationType
{
get => _annotationType;
set
{
_annotationType = value;
OnPropertyChanged("AnnotationType");
}
}
public bool IsAnnotationCreationEnable
{
get => _isAnnotationCreationEnable;
set
{
_isAnnotationCreationEnable = value;
OnPropertyChanged("IsAnnotationCreationEnable");
}
}
public bool IsZoomPanEnabled
{
get => _isZoomPanEnabled;
set
{
_isZoomPanEnabled = value;
OnPropertyChanged("IsZoomPanEnabled");
}
}
public ICommand SetAnnotationCreationTypeCommand => new ActionCommand<Type>(SetAnnotationTypeExecute);
public ICommand AnnotationCreatedCommand => new ActionCommand<AnnotationCreationMVVMArgs>(e =>
{
var annotation = e.NewAnnotationViewModel;
if (annotation != null)
{
if (annotation is ITradingAnnotationViewModel tradingAnnotation)
{
((AnnotationBase) tradingAnnotation.Annotation).Selected += OnAnnotationSelectionChanged;
((AnnotationBase) tradingAnnotation.Annotation).Unselected += OnAnnotationSelectionChanged;
}
annotation.IsEditable = true;
annotation.CanEditText = true;
annotation.IsSelected = true;
}
IsAnnotationCreationEnable = false;
IsAnnotationDrawn = false;
OnPropertyChanged("IsAnnotationDrawn");
});
public List<Brush> AllBrushes => typeof(Brushes).GetProperties().Select(x => (Brush)x.GetValue(null, null)).ToList();
public ICommand DeleteSelectedAnnotationCommand => new ActionCommand(DeleteSelectedAnnotationOnSelectedPane);
public ICommand WorkSpaceKeyUpCommand => new ActionCommand<KeyEventArgs>(e =>
{
if (e.Key == Key.Delete)
{
DeleteSelectedAnnotationOnSelectedPane();
}
});
private void OnAnnotationsCollectionChanged(object sender, NotifyCollectionChangedEventArgs args)
{
if (args.OldItems != null)
{
foreach (IAnnotationViewModel annotation in args.OldItems)
{
if (annotation is ITradingAnnotationViewModel tradingAnnotation)
{
((AnnotationBase)tradingAnnotation.Annotation).Selected -= OnAnnotationSelectionChanged;
((AnnotationBase)tradingAnnotation.Annotation).Unselected -= OnAnnotationSelectionChanged;
}
}
}
}
private void OnAnnotationSelectionChanged(object sender, EventArgs eventArgs)
{
SelectedAnnotation = Annotations.FirstOrDefault(x => x.IsSelected);
IsEditPanelVisible = SelectedAnnotation != null;
}
private void SetAnnotationTypeExecute(Type type)
{
if (IsAnnotationCreationEnable && type.IsEquivalentTo(AnnotationType))
{
IsAnnotationCreationEnable = false;
AnnotationType = null;
}
else
{
IsAnnotationCreationEnable = true;
AnnotationType = type;
}
}
private IOhlcDataSeries GetPriceDataSeries()
{
var stockPrices = new OhlcDataSeries<DateTime, double>();
var prices = DataManager.Instance.GetPriceData(Instrument.Indu.Value, TimeFrame.Daily);
stockPrices.Append(prices.TimeData, prices.OpenData, prices.HighData, prices.LowData, prices.CloseData);
return stockPrices;
}
private void DeleteSelectedAnnotationOnSelectedPane()
{
Annotations.RemoveWhere(x => x.IsSelected);
SelectedAnnotation = null;
IsEditPanelVisible = false;
}
}
}