FluentTerminal/FluentTerminal.App/Views/TabBar.xaml

<UserControl
    x:Class="FluentTerminal.App.Views.TabBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:behaviors="using:FluentTerminal.App.Behaviors"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodels="using:FluentTerminal.App.ViewModels"
    d:DesignHeight="32"
    d:DesignWidth="200"
    mc:Ignorable="d">

    <Grid x:Name="Tabs">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <RepeatButton
            x:Name="ScrollLeftButton"
            Grid.Column="0"
            Width="24"
            Padding="0,0,0,0"
            Click="OnScrollLeftButtonTapped"
            Style="{StaticResource TitleBarRepeatButtonStyle}"
            ToolTipService.ToolTip="Scroll left"
            Visibility="Collapsed">
            <RepeatButton.Content>
                <Viewbox Width="12" Height="12">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE76B;" />
                </Viewbox>
            </RepeatButton.Content>
        </RepeatButton>
        <ScrollViewer
            x:Name="ScrollViewer"
            Grid.Column="1"
            HorizontalScrollBarVisibility="Hidden"
            HorizontalScrollMode="Enabled"
            VerticalScrollBarVisibility="Hidden"
            VerticalScrollMode="Disabled">
            <ListView
                x:Name="ListView"
                AllowDrop="True"
                CanDragItems="True"
                CanReorderItems="True"
                ItemsSource="{x:Bind ItemsSource}"
                SelectedItem="{x:Bind SelectedItem, Mode=TwoWay}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="viewmodels:TerminalViewModel">
                        <RelativePanel
                            Height="32"
                            Margin="0"
                            VerticalAlignment="Stretch">
                            <Interactivity:Interaction.Behaviors>
                                <behaviors:MiddleClickBehavior>
                                    <behaviors:MiddleClickBehavior.Actions>
                                        <core:InvokeCommandAction Command="{x:Bind CloseCommand}" />
                                    </behaviors:MiddleClickBehavior.Actions>
                                </behaviors:MiddleClickBehavior>
                            </Interactivity:Interaction.Behaviors>
                            <Border
                                Grid.ColumnSpan="3"
                                Height="3"
                                VerticalAlignment="Bottom"
                                Background="{ThemeResource SystemAccentColor}"
                                RelativePanel.AlignBottomWithPanel="True"
                                RelativePanel.AlignLeftWithPanel="True"
                                RelativePanel.AlignRightWithPanel="True"
                                Visibility="{x:Bind IsUnderlined, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
                            <TextBlock
                                Grid.Column="0"
                                Margin="12,8,6,0"
                                RelativePanel.AlignLeftWithPanel="True"
                                RelativePanel.LeftOf="CloseButton"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="{x:Bind Title, Mode=OneWay}" />
                            <Button
                                x:Name="CloseButton"
                                Grid.Column="2"
                                Width="32"
                                Command="{x:Bind CloseCommand}"
                                RelativePanel.AlignRightWithPanel="True"
                                Style="{StaticResource TitleBarButtonStyle}"
                                ToolTipService.ToolTip="Close">
                                <Viewbox Width="12" Height="12">
                                    <SymbolIcon Symbol="Cancel" />
                                </Viewbox>
                            </Button>
                        </RelativePanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Template>
                    <ControlTemplate>
                        <ItemsPresenter />
                    </ControlTemplate>
                </ListView.Template>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="MinWidth" Value="100" />
                        <Setter Property="MinHeight" Value="32" />
                        <Setter Property="Padding" Value="0" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </ScrollViewer>
        <RepeatButton
            x:Name="ScrollRightButton"
            Grid.Column="2"
            Width="24"
            Padding="0,0,0,0"
            Click="OnScrollRightButtonTapped"
            Style="{StaticResource TitleBarRepeatButtonStyle}"
            ToolTipService.ToolTip="Scroll right"
            Visibility="Collapsed">
            <RepeatButton.Content>
                <Viewbox Width="12" Height="12">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE76C;" />
                </Viewbox>
            </RepeatButton.Content>
        </RepeatButton>
        <Button
            x:Name="Add"
            Grid.Column="3"
            Command="{x:Bind AddCommand}"
            Style="{StaticResource TitleBarButtonStyle}"
            ToolTipService.ToolTip="New tab">
            <Button.Content>
                <Viewbox Width="12" Height="12">
                    <SymbolIcon Symbol="Add" />
                </Viewbox>
            </Button.Content>
        </Button>
    </Grid>
</UserControl>