Now to define an annotation we define its begin then its end.
<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" Loaded="UserControl_Loaded">
<UserControl.Resources>
<vw:ThicknessSingleValueConverter x:Name="myThicknessSingleValueConverter" x:Key="myThicknessSingleValueConverter"/>
<vw:VisibilityConverter x:Name="myVisibilityConverter" x:Key="myVisibilityConverter"/>
</UserControl.Resources>
<Custom:SurfaceUserControl x:Name="LayoutRoot" Margin="{Binding Path=TcBegin, Converter={StaticResource myThicknessSingleValueConverter}}">
<Grid>
<Ellipse Stroke="Green" Fill="{x:Null}" Margin="-3,-4,0,0" Height="8" VerticalAlignment="Top" HorizontalAlignment="Left" Width="8"/>
<Ellipse Fill="Green" Margin="-2,-3,0,0" Height="6" VerticalAlignment="Top" HorizontalAlignment="Left" Width="6" Visibility="{Binding Path=Dur, Converter={StaticResource myVisibilityConverter}}" />
<Rectangle Fill="Green" HorizontalAlignment="Left" VerticalAlignment="Top" Width="2" Height="17" Margin="0,3,0,0"/>
<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" Visibility="{Binding Path=Dur, Converter={StaticResource myVisibilityConverter}}"/>
</Grid>
</Custom:SurfaceUserControl>
</UserControl>