some fixes to tabbar styling

Author: felixse

FluentTerminal.App/Views/MainPage.xaml

@@ -33,7 +33,7 @@
         <Rectangle x:Name="TitleBar" Fill="Transparent" />
         <Grid
             x:Name="TitleBarContents"
-            Height="42"
+            Height="44"
             Margin="{Binding CoreTitleBarPadding, Mode=OneWay}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
@@ -70,6 +70,7 @@
                 x:Name="TopTabBar"
                 Grid.Column="1"
                 HorizontalAlignment="Left"
+                Height="44"
                 AddCommand="{x:Bind ViewModel.AddDefaultTabCommand}"
                 ItemsSource="{x:Bind ViewModel.Terminals, Mode=OneWay}"
                 SelectedItem="{x:Bind ViewModel.SelectedTerminal, Mode=TwoWay}"
@@ -100,7 +101,7 @@
             Opacity="0.2"
             Visibility="{x:Bind DraggingHappensFromAnotherWindow, Mode=TwoWay, Converter={StaticResource TrueToVisibleConverter}}" />
         <views:TabBar
-            Height="42"
+            Height="44"
             x:Name="BottomTabBar"
             Grid.Row="2"
             Margin="0 0 4 0"

FluentTerminal.App/Views/TabBar.xaml

@@ -44,15 +44,22 @@
         <ScrollViewer
             x:Name="ScrollViewer"
             Grid.Column="1"
+            Height="44"
+            Margin="4 0 4 0"
+            Padding="0"
+            Background="Transparent"
             HorizontalScrollBarVisibility="Hidden"
             HorizontalScrollMode="Enabled"
             VerticalScrollBarVisibility="Hidden"
             VerticalScrollMode="Disabled">
             <ListView
                 Margin="0"
+                Height="44"
                 x:Name="ListView"
                 AllowDrop="True"
                 Background="Transparent"
+                VerticalContentAlignment="Center"
+                Padding="0 0 0 0"
                 CanDragItems="true"
                 CanReorderItems="True"
                 DragEnter="ListView_DragEnter"
@@ -68,10 +75,15 @@
                         <utilities:InteractiveSurface
                             x:Name="InteractiveSurface"
                             HorizontalContentAlignment="Stretch"
+                            Padding="0"
+                            Height="32"
+                            FocusVisualPrimaryThickness="0"
+                            BorderThickness="0"
+                            FocusVisualSecondaryThickness="0"
                             Hovered="{x:Bind IsHovered, Mode=TwoWay}">
                             <RelativePanel
                                 Height="32"
-                                Margin="4 2 4 2"
+                                Margin="2 0 2 0"
                                 Padding="0"
                                 CornerRadius="4"
                                 Background="Transparent"
@@ -86,14 +98,14 @@
                                     </behaviors:MiddleClickBehavior>
                                 </interactivity:Interaction.Behaviors>
 
-                                <Border
+                                <!--<Border
                                     Height="3"
                                     VerticalAlignment="Bottom"
                                     Background="{x:Bind TabTheme.Theme.Color, Mode=OneWay, Converter={StaticResource ColorResourceKeyFallbackConverter}, ConverterParameter=SystemControlHighlightAccentBrush}"
                                     RelativePanel.AlignBottomWithPanel="True"
                                     RelativePanel.AlignLeftWithPanel="True"
                                     RelativePanel.AlignRightWithPanel="True"
-                                    Visibility="{x:Bind IsUnderlined, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />
+                                    Visibility="{x:Bind IsUnderlined, Mode=OneWay, Converter={StaticResource TrueToVisibleConverter}}" />-->
                                 <Grid
                                     x:Name="HasExitedWithErrorGrid"
                                     Height="32"
@@ -114,6 +126,7 @@
                                     RelativePanel.LeftOf="CloseButton"
                                     RelativePanel.RightOf="HasExitedWithErrorGrid"
                                     Style="{StaticResource CaptionTextBlockStyle}"
+                                    Foreground="{ThemeResource ListViewItemForeground}"
                                     Text="{x:Bind TabTitle, Mode=OneWay, Converter={StaticResource TextMiddleEllipsisConverter}}"
                                     TextWrapping="NoWrap" />
                                 <Grid
@@ -122,6 +135,7 @@
                                     RelativePanel.AlignRightWithPanel="True">
                                     <Button
                                         Width="32"
+                                        Background="Aqua"
                                         HorizontalAlignment="Center"
                                         Command="{x:Bind CloseCommand}"
                                         Style="{StaticResource TitleBarButtonStyle}"
@@ -150,7 +164,9 @@
                     <Style TargetType="ListViewItem">
                         <Setter Property="MinWidth" Value="100" />
                         <Setter Property="MaxWidth" Value="200" />
+                        <Setter Property="Height" Value="32" />
                         <Setter Property="MinHeight" Value="32" />
+                        <Setter Property="MaxHeight" Value="32" />
                         <Setter Property="Padding" Value="0" />
                         <Setter Property="Margin" Value="0" />
                         <Setter Property="views:TabBarBackgroundBindingHelper.BackgroundBindingPath" Value="BackgroundTabTheme" />
@@ -172,9 +188,15 @@
                             <Setter.Value>
                                 <ControlTemplate TargetType="ListViewItem">
                                     <ListViewItemPresenter
+                                        BackgroundSizing="OuterBorderEdge"
                                         x:Name="Root"
                                         CornerRadius="4"
-                                        Height="36"
+                                        MinHeight="{TemplateBinding Height}"
+                                        Height="{TemplateBinding Height}"
+                                        MaxHeight="{TemplateBinding Height}"
+                                        Padding="{TemplateBinding Padding}"
+                                        Margin="{TemplateBinding Margin}"
+                                        SelectedBorderThickness="0"
                                         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                         CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
@@ -191,17 +213,14 @@
                                         FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                                         FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                                         FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
-                                        FocusVisualPrimaryThickness="0"
+                                        FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                                         FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
-                                        FocusVisualSecondaryThickness="0"
+                                        FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                                         PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                                         PointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPointerOver}"
                                         PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                                         PressedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundPressed}"
                                         ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
-                                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
-                                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
-                                        RevealBorderThickness="0"
                                         SelectedBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelected}"
                                         SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                                         SelectedPointerOverBackground="{Binding TabTheme, Mode=OneWay, Converter={StaticResource TabColorFallbackConverter}, ConverterParameter=BackgroundSelectedPointerOver}"