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:s="http://schemas.abtsoftware.co.uk/scichart"
xmlns:tradeAnnotations="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="ComboBoxToggleArrowButton" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
BorderThickness="1"
CornerRadius="0">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlMediumColor}" />
</Border.Background>
</Border>
<Border
Grid.Column="0"
Margin="1"
CornerRadius="0">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor}" />
</Border.Background>
</Border>
<Path
x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z">
<Path.Fill>
<SolidColorBrush Color="#FFdfe0e6" />
</Path.Fill>
</Path>
<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">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
To="#FF0FA32D"
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="ColorPicker" TargetType="ComboBox">
<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="MinWidth" Value="30" />
<Setter Property="MaxWidth" Value="30" />
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="26" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid Background="#FF323438">
<ToggleButton
x:Name="ToggleButton"
Width="30"
Height="30"
Padding="0"
ClickMode="Press"
Effect="{x:Null}"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Template>
<ControlTemplate>
<Viewbox Margin="2 0 0 0">
<Grid Width="16" Height="16">
<Path Data="m0.051992,0.02406l10.921208,0l0,11.936746l-10.921208,0l0,-11.936746z" Fill="#FF323438" />
<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>
</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="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource DropdownBorderBackground}" />
</Border.Background>
</Border>
<WrapPanel
Width="245"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
Orientation="Horizontal" />
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle
Width="16"
Height="16"
Fill="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ComboBoxStrokeTemplate" TargetType="{x:Type ComboBox}">
<Grid Background="#FF323438">
<ToggleButton
x:Name="ToggleButton"
Width="30"
Height="30"
Padding="0"
ClickMode="Press"
Effect="{x:Null}"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Template>
<ControlTemplate>
<Viewbox Margin="2 0 0 0">
<Grid Width="16" Height="16">
<Path Data="m0.051992,0.02406l10.921208,0l0,11.936746l-10.921208,0l0,-11.936746z" Fill="#FF323438" />
<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>
</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="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource DropdownBorderBackground}" />
</Border.Background>
</Border>
<WrapPanel
Width="245"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained"
Orientation="Horizontal" />
</Grid>
</Popup>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxEditPanelTemplate" TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
x:Name="ToggleButton"
ClickMode="Press"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{DynamicResource ComboBoxToggleArrowButton}" />
<ContentPresenter
x:Name="ContentSite"
Margin="3,3,23,3"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsHitTestVisible="False" />
<TextBox
x:Name="PART_EditableTextBox"
Margin="3,3,23,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="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource 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>
<tradeAnnotations:StrokeThicknessToEditPanelConverter x:Key="ThicknessToEditPanelConverter" />
<Style x:Key="StrokethicknessBoxComboBoxStyle" TargetType="ComboBox">
<Setter Property="Template" Value="{StaticResource ComboBoxEditPanelTemplate}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border
x:Name="Border"
s:Device.SnapsToDevicePixels="true"
Background="Transparent">
<Grid>
<Rectangle
x:Name="MouseOverFill"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="#FF0FA32D"
Opacity="0" />
<Line
Width="100"
Margin="5,10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="White"
StrokeThickness="{Binding}"
X1="0"
X2="100" />
</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>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Line
Width="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="White"
StrokeThickness="{Binding Converter={StaticResource ThicknessToEditPanelConverter}}"
X1="0"
X2="20" />
</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:system="clr-namespace:System;assembly=mscorlib"
xmlns:tradeAnnotations="clr-namespace:SciChart.Examples.Examples.AnnotateAChart.TradeAnnotations"
xmlns:viewModels1="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>
<tradeAnnotations:AnnotationViewModelToVisibilityConverter x:Key="AnnotationViewModelToVisibility" />
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<tradeAnnotations: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 />
</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 viewModels1: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 viewModels1: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 viewModels1: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 viewModels1: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 viewModels1: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 viewModels1: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 viewModels1: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.ColumnSpan="2" Panel.ZIndex="99999">
<Thumb
Canvas.Left="45"
Canvas.Top="10"
Background="#FF1C1C1F"
Canvas.ZIndex="99999"
DragDelta="Thumb_OnDragDelta"
Visibility="{Binding IsEditPanelVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
<Thumb.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.RowSpan="2"
Background="#FF5B5B5B"
BorderBrush="#FF5B5B5B"
Cursor="SizeAll">
<StackPanel Width="10">
<Line
Width="10"
Margin="2,2,0,2"
Stroke="#FF1C1C1F"
StrokeDashArray="1 2"
StrokeThickness="2"
X1="0"
X2="10" />
<Line
Width="10"
Margin="2,2,0,2"
Stroke="#FF1C1C1F"
StrokeDashArray="1 2"
StrokeThickness="2"
X1="0"
X2="10" />
<Line
Width="10"
Margin="2,2,0,2"
Stroke="#FF1C1C1F"
StrokeDashArray="1 2"
StrokeThickness="2"
X1="0"
X2="10" />
<Line
Width="10"
Margin="2,2,0,2"
Stroke="#FF1C1C1F"
StrokeDashArray="1 2"
StrokeThickness="2"
X1="0"
X2="10" />
<Line
Width="10"
Margin="2,2,0,2"
Stroke="#FF1C1C1F"
StrokeDashArray="1 2"
StrokeThickness="2"
X1="0"
X2="10" />
</StackPanel>
</Border>
<Border
Grid.Column="1"
Grid.ColumnSpan="6"
Background="#FF5B5B5B"
BorderBrush="#FF5B5B5B"
BorderThickness="0,1"
IsHitTestVisible="False" />
<ComboBox
Grid.Column="1"
MinWidth="46"
Margin="2,0,0,0"
SelectedItem="{Binding SelectedAnnotation.StrokeThickness, Mode=TwoWay}"
Style="{StaticResource StrokethicknessBoxComboBoxStyle}">
<system:Double>1</system:Double>
<system:Double>3</system:Double>
<system:Double>5</system:Double>
<system:Double>7</system:Double>
</ComboBox>
<ComboBox
Grid.Column="2"
Margin="2,0,0,0"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation.Stroke, Mode=TwoWay}"
Style="{StaticResource ColorPicker}"
Template="{StaticResource ComboBoxStrokeTemplate}" />
<ComboBox
Grid.Column="3"
MinWidth="46"
Margin="2,0,0,0"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=FontSize}"
Template="{StaticResource ComboBoxEditPanelTemplate}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=FontSize}">
<system:Double>6</system:Double>
<system:Double>7</system:Double>
<system:Double>8</system:Double>
<system:Double>9</system:Double>
<system:Double>10</system:Double>
<system:Double>11</system:Double>
<system:Double>12</system:Double>
<system:Double>14</system:Double>
<system:Double>18</system:Double>
<system:Double>24</system:Double>
<system:Double>36</system:Double>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="1" />
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
<ComboBox
Grid.Column="4"
Margin="2,0,0,0"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=Fill}"
Style="{StaticResource ColorPicker}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Fill}" />
<ComboBox
Grid.Column="5"
Margin="2,0,0,0"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=MiddleFill}"
Style="{StaticResource ColorPicker}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Pitchfork}" />
<ComboBox
Grid.Column="6"
Margin="2,0,0,0"
ItemsSource="{Binding AllBrushes}"
SelectedItem="{Binding SelectedAnnotation, Mode=TwoWay, Converter={StaticResource DrawingToolViewModelToEditPanelOptionsConverter}, ConverterParameter=SidesFill}"
Style="{StaticResource ColorPicker}"
Visibility="{Binding SelectedAnnotation, Converter={StaticResource AnnotationViewModelToVisibility}, ConverterParameter=Pitchfork}" />
</Grid>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
</Grid>
</UserControl>// TradeAnnotations.xaml.cs
using System.Windows;
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 = 20;
}
// code for dragging the thumb on the toolbar. Not related to functionality of scichart
private void Thumb_OnDragDelta(object sender, DragDeltaEventArgs e)
{
var thumb = e.Source as Thumb;
var mainWindow = Application.Current.MainWindow;
if (mainWindow != null)
{
var horiz = Canvas.GetLeft(thumb) + e.HorizontalChange;
var vertic = Canvas.GetTop(thumb) + e.VerticalChange;
var translatePoint = this.TranslatePoint(new System.Windows.Point(horiz, vertic), mainWindow);
if (translatePoint.X > 0 && translatePoint.X + thumb.ActualWidth + 16 <= mainWindow.ActualWidth)
{
Canvas.SetLeft(thumb, horiz);
}
else if (translatePoint.X < 0)
{
Canvas.SetLeft(thumb, 0);
}
else if (translatePoint.X + thumb.ActualWidth + 16 > mainWindow.ActualWidth)
{
Canvas.SetLeft(thumb, mainWindow.ActualWidth - 16 - thumb.ActualWidth);
}
if (translatePoint.Y >= 0 && translatePoint.Y + thumb.ActualHeight + 69 <= mainWindow.ActualHeight)
{
Canvas.SetTop(thumb, vertic);
}
else if (translatePoint.Y < 0)
{
Canvas.SetTop(thumb, mainWindow.TranslatePoint(new System.Windows.Point(0, 0), this).Y);
}
else if (translatePoint.Y > mainWindow.ActualHeight - 69)
{
Canvas.SetTop(thumb,
mainWindow.TranslatePoint(
new System.Windows.Point(0, mainWindow.ActualHeight - 69 - thumb.ActualHeight), this).Y);
}
}
}
}
}// 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.ViewportManagers;
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 DefaultViewportManager _viewportManager;
private bool _isRubberBandEnabled;
private ObservableCollection<IRenderableSeriesViewModel> _series;
private ObservableCollection<IAnnotationViewModel> _annotations;
private Type _annotationType;
private bool _isAnnotationCreationEnable;
private bool _isZoomPanEnabled;
private bool _isEditPanelVisible;
public TradeAnnotationsViewModel()
{
Annotations = new ObservableCollection<IAnnotationViewModel>();
Annotations.CollectionChanged += OnAnnotationsCollectionChanged;
Series = new ObservableCollection<IRenderableSeriesViewModel>
{
new CandlestickRenderableSeriesViewModel {DataSeries = GetPriceDataSeries()}
};
}
public bool IsEditPanelVisible
{
get { return _isEditPanelVisible; }
set
{
_isEditPanelVisible = value;
OnPropertyChanged("IsEditPanelVisible");
}
}
public IAnnotationViewModel SelectedAnnotation
{
get
{
return Annotations.FirstOrDefault(x => x.IsSelected);
}
set
{
var val = value;
}
}
public bool IsRubberBandEnabled
{
get { return _isRubberBandEnabled; }
set
{
_isRubberBandEnabled = value;
OnPropertyChanged("IsRubberBandEnabled");
}
}
public bool IsAnnotationDrawn { set; get; }
public ObservableCollection<IRenderableSeriesViewModel> Series
{
get { return _series; }
set
{
_series = value;
OnPropertyChanged("Series");
}
}
public ObservableCollection<IAnnotationViewModel> Annotations
{
get { return _annotations; }
set
{
_annotations = value;
OnPropertyChanged("Annotations");
}
}
public Type AnnotationType
{
get { return _annotationType; }
set
{
_annotationType = value;
OnPropertyChanged("AnnotationType");
}
}
public bool IsAnnotationCreationEnable
{
get { return _isAnnotationCreationEnable; }
set
{
_isAnnotationCreationEnable = value;
OnPropertyChanged("IsAnnotationCreationEnable");
}
}
public bool IsZoomPanEnabled
{
get { return _isZoomPanEnabled; }
set
{
_isZoomPanEnabled = value;
OnPropertyChanged("IsZoomPanEnabled");
}
}
public ICommand SetAnnotationCreationTypeCommand
{
get { return new ActionCommand<Type>(SetAnnotationTypeExecute); }
}
public ICommand AnnotationCreatedCommand
{
get
{
return new SciChart.Charting.Common.Helpers.ActionCommand<AnnotationCreationMVVMArgs>((e) =>
{
var annotation = (IAnnotationViewModel)e.NewAnnotationViewModel;
if (annotation != null)
{
var tradingAnnotation = annotation as ITradingAnnotationViewModel;
if (tradingAnnotation != null)
{
((AnnotationBase)tradingAnnotation.Annotation).Selected += OnAnnotationSelected;
((AnnotationBase)tradingAnnotation.Annotation).Unselected += OnAnnotationUnselected;
}
annotation.IsEditable = true;
annotation.CanEditText = true;
annotation.IsSelected = true;
}
IsAnnotationCreationEnable = false;
IsAnnotationDrawn = false;
OnPropertyChanged("IsAnnotationDrawn");
});
}
}
public List<Brush> AllBrushes
{
get
{
return typeof(Brushes).GetProperties().Select(x => (Brush)x.GetValue(null, null)).ToList();
}
}
public ICommand DeleteSelectedAnnotationCommand
{
get { return new SciChart.Charting.Common.Helpers.ActionCommand(DeleteSelectedAnnotationOnSelectedPane); }
}
public ICommand WorkSpaceKeyUpCommand
{
get
{
return new SciChart.Charting.Common.Helpers.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)
{
var tradingAnnotation = annotation as ITradingAnnotationViewModel;
if (tradingAnnotation != null)
{
((AnnotationBase)tradingAnnotation.Annotation).Selected -= OnAnnotationSelected;
((AnnotationBase)tradingAnnotation.Annotation).Unselected -= OnAnnotationUnselected;
}
}
}
}
private void OnAnnotationUnselected(object sender, EventArgs eventArgs)
{
OnPropertyChanged("SelectedAnnotation");
IsEditPanelVisible = SelectedAnnotation != null;
}
private void OnAnnotationSelected(object sender, EventArgs eventArgs)
{
OnPropertyChanged("SelectedAnnotation");
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);
IsEditPanelVisible = SelectedAnnotation != null;
}
}
}