<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="300" Height="40">

    <UserControl.Resources>

        <vw:ThicknessSingleValueConverter x:Name="myThicknessSingleValueConverter" x:Key="myThicknessSingleValueConverter"/>

        <vw:VisibilityConverter x:Name="myVisibilityConverter" x:Key="myVisibilityConverter"/>

        <vw:ColorConverter x:Name="myColorConverter" x:Key="myColorConverter"/>

    </UserControl.Resources>

    <Custom:SurfaceUserControl x:Name="LayoutRoot" Margin="{Binding Path=MarginLeft, Converter={StaticResource myThicknessSingleValueConverter}}"

                               >

        <Grid>

            <Rectangle Fill="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding Path=Dur}" Height="40" Opacity="0.0"/>

            <TextBox HorizontalAlignment="Left" Text="{Binding Path=GestureType}" Width="40" Margin="0,20,0,0" Visibility="{Binding Path=Dur, Converter={StaticResource myVisibilityConverter}}"/>

            <Ellipse Stroke="{Binding Path=Color, Converter={StaticResource myColorConverter}}" Fill="{x:Null}" Margin="-3,16,0,0" Height="8" VerticalAlignment="Top" HorizontalAlignment="Left" Width="8"/>

            <Ellipse Fill="{Binding Path=Color, Converter={StaticResource myColorConverter}}" Margin="-2,17,0,0" Height="6" VerticalAlignment="Top" HorizontalAlignment="Left" Width="6" Visibility="{Binding Path=Dur, Converter={StaticResource myVisibilityConverter}}" />

            <Rectangle Fill="{Binding Path=Color, Converter={StaticResource myColorConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="2" Height="17"/>

            <Rectangle Fill="{Binding Path=Color, Converter={StaticResource myColorConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding Path=Dur}" Height="2"/>

        </Grid>

    </Custom:SurfaceUserControl>

</UserControl>