SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

// 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.

DOWNLOAD THE SDK

// WPF Trade Annotations

Demonstrates how to use drawing tools 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 or drawing tools are created via TradingAnnotationCreationModifier, or with TradingAnnotationCreationModifierMvvm in MVVM. TradingAnnotationCreationModifier is derived from AnnotationsBase.

You can find more information on this, following this links:

In order to create the annotation in code-behind or in ViewModelyou will use method SetBasePoint (iComparable x, iComparable y).

Annotation Types Include:

You can change styling of the annotations by changing the annotation properties such as line color and thickness, as well as fill color.

WPF Trade Annotations

// 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?

  1. Clone the SciChart.WPF.Examples from Github.
  2. Or, view source and export each example to a Visual Studio project from the SciChart WPF Examples suite.
  3. Also the SciChart WPF Trial contains the full source for the examples (link below).

DOWNLOAD THE WPF CHART EXAMPLES

WPF Trade Annotations - View and Export Source Code

// DrawingToolsEditPanelResourceDictionary.xaml

View on Github 
<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

View on Github 
<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/expression/2010/interactivity"
    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

View on Github 
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

View on Github 
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;
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES

WPF CHART EXAMPLES

2D Charts

Basic Chart Types
Chart Annotations
Create a Multiseries Chart
Create Custom Charts
Create Realtime Charts
Create Stock Charts
Export a Chart
Filters API
Heatmap Chart Types
Legends
Link Multiple Charts
Manipulate Series
Modify Axis Behavior
MVVM Examples
Styling and Theming
Ternary Chart Types
Tooltips and Hit Test
Zoom and Pan a Chart
Zoom History Manager

3D Charts

Basic Chart Types
Customize 3D Charts
Manipulate Series
Modify Axis3D Behavior
Realtime 3D Charts
Style a 3D Chart
Surface Mesh Charts
Tooltips and Hit Test 3D Charts
Zoom and Pan a 3D Chart

Featured Apps

Financial Charts
Medical Charts
Performance Demos
Scientific Charts