sourcegit/src/Views/Widgets/PageTabBar.xaml

<UserControl x:Class="SourceGit.Views.Widgets.PageTabBar"
             x:Name="me"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:controls="clr-namespace:SourceGit.Views.Controls"
             xmlns:converters="clr-namespace:SourceGit.Views.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="28" d:DesignWidth="800">
    <Grid Margin="0,4,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        
        <!-- Seperator -->
        <Rectangle
            Grid.Column="0"
            x:Name="startSeperator"
            Width="1" Height="16"
            Fill="{DynamicResource Brush.FG2}"
            Opacity=".5"/>

        <!-- Left Scroller -->
        <controls:IconButton
            Grid.Column="1"
            x:Name="leftScroller"
            Click="ScrollLeft"
            Width="18" Padding="6"
            HoverBackground="{DynamicResource Brush.TabButtonHover}"
            BorderThickness="0"
            Icon="{StaticResource Icon.ScrollLeft}"
            WindowChrome.IsHitTestVisibleInChrome="True"
            Visibility="Collapsed"/>

        <!-- Tabs -->
        <ScrollViewer
            Grid.Column="2"
            x:Name="scroller"
            HorizontalScrollBarVisibility="Hidden"
            VerticalScrollBarVisibility="Disabled">
            <StackPanel Orientation="Horizontal" SizeChanged="CalcScrollerVisibilty">
                <ListBox 
                    x:Name="container"
                    BorderBrush="{DynamicResource Brush.Border0}"
                    ItemsSource="{Binding ElementName=me, Path=Tabs}" 
                    WindowChrome.IsHitTestVisibleInChrome="True"
                    SelectionChanged="SelectionChanged">

                    <ListBox.Resources>
                        <converters:IntToBookmarkBrush x:Key="IntToBookmarkBrush"/>
                        <converters:BoolToCollapsed x:Key="BoolToCollapsed"/>
                    </ListBox.Resources>
                    
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <EventSetter Event="ContextMenuOpening" Handler="OnTabContextMenuOpening" />
                            <EventSetter Event="MouseMove" Handler="OnMouseMove"/>
                            <EventSetter Event="DragOver" Handler="OnDragOver"/>
                            <EventSetter Event="Drop" Handler="OnDrop"/>
                            <EventSetter Event="GiveFeedback" Handler="OnGiveFeedback"/>
                            
                            <Setter Property="AllowDrop" Value="True"/>
                            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                        <Border x:Name="Border" Background="Transparent" BorderBrush="Transparent" BorderThickness="1,1,1,0">
                                            <Grid x:Name="Contents" Width="160" VerticalAlignment="Center" Opacity=".5" ToolTip="{Binding Tooltip}">
                                                <Path 
                                                    Width="8" Margin="8,0,0,0"
                                                    HorizontalAlignment="Left"
                                                    Fill="{Binding Bookmark, Converter={StaticResource IntToBookmarkBrush}}"
                                                    Visibility="{Binding IsRepository, Converter={StaticResource BoolToCollapsed}}">
                                                    <Path.Data>
                                                        <EllipseGeometry Center="0,0" RadiusX="14" RadiusY="14"/>
                                                    </Path.Data>
                                                </Path>

                                                <TextBlock Margin="32,0" HorizontalAlignment="Stretch" TextAlignment="Center" Text="{Binding Title}"/>

                                                <controls:IconButton
                                                    Click="CloseTab"
                                                    x:Name="closer"
                                                    Width="16" Height="16"
                                                    Margin="0,1,8,0" Padding="4"
                                                    ToolTip="{DynamicResource Text.Close}"
                                                    Icon="{StaticResource Icon.Close}"
                                                    HoverBackground="{DynamicResource Brush.TabButtonHover}"
                                                    Visibility="Hidden"
                                                    HorizontalAlignment="Right"/>

                                                <Rectangle
                                                    x:Name="seperator"
                                                    Margin="4,0,0,0"
                                                    Width="1"
                                                    Fill="Transparent"
                                                    HorizontalAlignment="Right"/>
                                            </Grid>
                                        </Border>

                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsSelected" Value="True">
                                                <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource Brush.Border0}"/>
                                                <Setter TargetName="Border" Property="Background" Value="{DynamicResource Brush.Window}"/>
                                                <Setter TargetName="Contents" Property="Opacity" Value="1"/>
                                                <Setter TargetName="closer" Property="Visibility" Value="Visible"/>
                                            </Trigger>
                                            <DataTrigger Binding="{Binding IsSeperatorVisible}" Value="True">
                                                <Setter TargetName="seperator" Property="Fill" Value="{DynamicResource Brush.FG2}"/>
                                            </DataTrigger>
                                            <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                    <Condition Property="IsSelected" Value="False"/>
                                                    <Condition Property="IsMouseOver" Value="True"/>
                                                </MultiTrigger.Conditions>
                                                <Setter TargetName="Contents" Property="Opacity" Value=".85"/>
                                                <Setter TargetName="closer" Property="Visibility" Value="Visible"/>
                                            </MultiTrigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                </ListBox>

                <Button
                    Width="16" Height="16" Margin="8,0,0,0"
                    Background="Transparent"
                    BorderThickness="0"
                    ToolTip="{DynamicResource Text.PageTabBar.New}"
                    Click="NewTab"
                    WindowChrome.IsHitTestVisibleInChrome="True">
                    <Path Width="12" Data="{StaticResource Icon.NewTab}" Fill="{DynamicResource Brush.FG1}"/>
                </Button>
            </StackPanel>
        </ScrollViewer>
        
        <!-- Right Scroller -->
        <controls:IconButton
            Grid.Column="3"  
            x:Name="rightScroller"
            Click="ScrollRight"
            Width="18" Padding="6"
            HoverBackground="{DynamicResource Brush.TabButtonHover}"
            BorderThickness="0"
            Icon="{StaticResource Icon.ScrollRight}"
            WindowChrome.IsHitTestVisibleInChrome="True"
            Visibility="Collapsed"/>
    </Grid>
</UserControl>