First step of data binding where we can add an annotation by clicking on the timeline
<UserControl
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Custom="http://schemas.microsoft.com/surface/2008"
mc:Ignorable="d"
x:Class="FingersDance.Views.TimelineAnnotationView"
xmlns:vw="clr-namespace:FingersDance.Views"
x:Name="UserControl"
d:DesignWidth="640" d:DesignHeight="480" Width="40">
<UserControl.Resources>
<vw:ThicknessSingleValueConverter x:Name="myThicknessSingleValueConverter" x:Key="myThicknessSingleValueConverter"></vw:ThicknessSingleValueConverter>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Margin="{Binding Path=TcBegin, Converter={StaticResource myThicknessSingleValueConverter}}">
<Ellipse Fill="Green" Margin="-2,-3,0,0" Height="6" VerticalAlignment="Top" HorizontalAlignment="Left" Width="6" />
<Rectangle Fill="Green" HorizontalAlignment="Left" VerticalAlignment="Top" Width="2" Height="20"/>
<Rectangle Fill="Green" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding Path=Dur}" Height="2" Margin="0,18,0,0"/>
<TextBox HorizontalAlignment="Left" Text="{Binding Path=GestureType}" Width="40" Margin="0,20,0,0"/>
</Grid>
</UserControl>