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

// 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 and export each example to a Visual Studio project from the SciChart WPF Examples suite.
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

ï»¿<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/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

ï»¿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;
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES

// WPF Chart Examples

// WPF Trade Annotations

// Source Code

// DrawingToolsEditPanelResourceDictionary.xaml

// TradeAnnotations.xaml

// TradeAnnotations.xaml.cs

// TradeAnnotationsViewModel.cs

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