<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

             xmlns:Converter="clr-namespace:Iri.Modernisation.Controls.Converter"

    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" 

    x:Class="Iri.Modernisation.Controls.View.CustomableIndexElement"

    BorderBrush="Black"  Width="{Binding Duration}" mc:Ignorable="d">

    <UserControl.Resources>

        <Converter:PolemicTypeColorConverter x:Key="PolemicTypeColorConverter"/>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">

        <ToolTipService.ToolTip>

            <StackPanel Orientation="Horizontal">

                <TextBlock Text="{Binding TimerIn}"/>

                <TextBlock Text="|- "/>

                <TextBlock Text="{Binding Duration}"/>

                <TextBlock Text="-| "/>

                <TextBlock Text="{Binding TimerOut}"/>

            </StackPanel>

        </ToolTipService.ToolTip>

        <Rectangle Fill="{Binding Chapter, Converter={StaticResource PolemicTypeColorConverter}, Mode=TwoWay}" Stroke="Black" StrokeThickness="0"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" HorizontalAlignment="Left" Width="2" Cursor="SizeWE" d:LayoutOverrides="HorizontalAlignment"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" HorizontalAlignment="Right" Width="2" Cursor="SizeWE" d:LayoutOverrides="HorizontalAlignment"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" Height="2" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="8"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" Height="2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="8"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" Height="2" HorizontalAlignment="Right" VerticalAlignment="Top" Width="8"/>

        <Rectangle Fill="Black" Stroke="Black" StrokeThickness="0" Height="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="8"/>

    </Grid>

</UserControl>