From 9844043c7f6ce373f8e41af190938ec47bc663c6 Mon Sep 17 00:00:00 2001
From: leo <longshuang@msn.cn>
Date: Tue, 20 Aug 2024 16:53:59 +0800
Subject: [PATCH] ux: use ListBox with VirtualizingStackPanel instead of
 DataGrid since height of DataGridRow is not equal with the RowHeight value

---
 src/Resources/Styles.axaml    |  52 ++++++++++
 src/Views/BranchTree.axaml    | 156 ++++++++++++-----------------
 src/Views/Repository.axaml    | 181 +++++++++-------------------------
 src/Views/Repository.axaml.cs |  14 +--
 src/Views/TagsView.axaml      |  30 ++----
 src/Views/TagsView.axaml.cs   |   1 +
 6 files changed, 180 insertions(+), 254 deletions(-)

diff --git a/src/Resources/Styles.axaml b/src/Resources/Styles.axaml
index 3874060a..d3204fae 100644
--- a/src/Resources/Styles.axaml
+++ b/src/Resources/Styles.axaml
@@ -706,6 +706,58 @@
     <Setter Property="Opacity" Value="1"/>
   </Style>
 
+  <Style Selector="ListBox.repo_left_content_list">
+    <Setter Property="Background" Value="Transparent"/>
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <VirtualizingStackPanel Orientation="Vertical"/>
+      </ItemsPanelTemplate>
+    </Setter>
+
+    <Style Selector="^ ListBoxItem">
+      <Setter Property="Height" Value="24"/>
+      <Setter Property="Margin" Value="0"/>
+      <Setter Property="Padding" Value="0"/>
+      <Setter Property="CornerRadius" Value="4"/>
+
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Grid>
+            <Border Name="PART_Background"
+                    Background="Transparent"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Opacity="0"/>
+
+            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Content="{TemplateBinding Content}"
+                              Padding="{TemplateBinding Padding}"
+                              VerticalContentAlignment="Center"
+                              HorizontalContentAlignment="Stretch" />
+          </Grid>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+  </Style>
+
+  <Style Selector="Grid.repository_leftpanel ListBox.repo_left_content_list ListBoxItem:pointerover /template/ Border#PART_Background">
+    <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+    <Setter Property="Opacity" Value=".5"/>
+  </Style>
+  <Style Selector="Grid.repository_leftpanel ListBox.repo_left_content_list ListBoxItem:selected /template/ Border#PART_Background">
+    <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
+  <Style Selector="Grid.repository_leftpanel:focus-within ListBox.repo_left_content_list ListBoxItem:selected /template/ Border#PART_Background">
+    <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+    <Setter Property="Opacity" Value=".65"/>
+  </Style>
+  <Style Selector="Grid.repository_leftpanel:focus-within ListBox.repo_left_content_list ListBoxItem:selected:pointerover /template/ Border#PART_Background">
+    <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+    <Setter Property="Opacity" Value=".8"/>
+  </Style>
+
   <Style Selector="ContextMenu">
     <Setter Property="HorizontalOffset" Value="-4"/>
     <Setter Property="VerticalOffset" Value="-4"/>
diff --git a/src/Views/BranchTree.axaml b/src/Views/BranchTree.axaml
index 52b569e8..72dd5751 100644
--- a/src/Views/BranchTree.axaml
+++ b/src/Views/BranchTree.axaml
@@ -8,104 +8,78 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="SourceGit.Views.BranchTree"
              x:Name="ThisControl">
-  <DataGrid x:Name="BranchesPresenter"
-            ItemsSource="{Binding #ThisControl.Rows}"
-            Background="Transparent"
-            RowHeight="24"
-            CanUserReorderColumns="False"
-            CanUserResizeColumns="False"
-            CanUserSortColumns="False"
-            HorizontalScrollBarVisibility="Disabled"
-            VerticalScrollBarVisibility="Auto"
-            HeadersVisibility="None"
-            SelectionChanged="OnNodesSelectionChanged"
-            ContextRequested="OnTreeContextRequested">
-    <DataGrid.Styles>
-      <Style Selector="DataGridRow" x:DataType="vm:BranchTreeNode">
-        <Setter Property="CornerRadius" Value="{Binding CornerRadius}" />
-        <Setter Property="Height" Value="24"/>
+  <ListBox x:Name="BranchesPresenter"
+           Classes="repo_left_content_list"
+           ItemsSource="{Binding #ThisControl.Rows}"
+           SelectionMode="Multiple"
+           SelectionChanged="OnNodesSelectionChanged"
+           ContextRequested="OnTreeContextRequested">
+    <ListBox.ItemsPanel>
+      <ItemsPanelTemplate>
+        <VirtualizingStackPanel Orientation="Vertical"/>
+      </ItemsPanelTemplate>
+    </ListBox.ItemsPanel>
+
+    <ListBox.Styles>
+      <Style Selector="ListBoxItem" x:DataType="vm:BranchTreeNode">
+        <Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
       </Style>
+    </ListBox.Styles>
 
-      <Style Selector="DataGridRow /template/ Border#RowBorder">
-        <Setter Property="ClipToBounds" Value="True" />
-      </Style>
+    <ListBox.ItemTemplate>
+      <DataTemplate DataType="vm:BranchTreeNode">
+        <Grid Height="24"
+              Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
+              ColumnDefinitions="16,*"
+              ToolTip.Tip="{Binding Tooltip}">
 
-      <Style Selector="Grid.repository_leftpanel DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
-        <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
-        <Setter Property="Opacity" Value=".5"/>
-      </Style>
-      <Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
-        <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
-        <Setter Property="Opacity" Value="1"/>
-      </Style>
-      <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
-        <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
-        <Setter Property="Opacity" Value=".65"/>
-      </Style>
-      <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected:pointerover /template/ Rectangle#BackgroundRectangle">
-        <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
-        <Setter Property="Opacity" Value=".8"/>
-      </Style>
-    </DataGrid.Styles>
+        <!-- Tree Expander -->
+        <v:BranchTreeNodeToggleButton Grid.Column="0"
+                                      Classes="tree_expander"
+                                      Focusable="False"
+                                      HorizontalAlignment="Center"
+                                      IsChecked="{Binding IsExpanded, Mode=OneWay}"
+                                      IsVisible="{Binding !IsBranch}"/>
 
-    <DataGrid.Columns>
-      <DataGridTemplateColumn Width="*">
-        <DataGridTemplateColumn.CellTemplate>
-          <DataTemplate x:DataType="vm:BranchTreeNode">
-            <Grid Height="24"
-                  Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
-                  ColumnDefinitions="16,*"
-                  ToolTip.Tip="{Binding Tooltip}">
+        <!-- Content Area (allows double-click) -->
+        <Grid Grid.Column="1"
+              Background="Transparent"
+              ColumnDefinitions="18,*,Auto,Auto"
+              DoubleTapped="OnDoubleTappedBranchNode">
 
-              <!-- Tree Expander -->
-              <v:BranchTreeNodeToggleButton Grid.Column="0"
-                                            Classes="tree_expander"
-                                            Focusable="False"
-                                            HorizontalAlignment="Center"
-                                            IsChecked="{Binding IsExpanded, Mode=OneWay}"
-                                            IsVisible="{Binding !IsBranch}"/>
+          <!-- Icon -->
+          <v:BranchTreeNodeIcon Grid.Column="0"
+                                Node="{Binding}"
+                                IsExpanded="{Binding IsExpanded}"/>
 
-              <!-- Content Area (allows double-click) -->
-              <Grid Grid.Column="1"
-                    Background="Transparent"
-                    ColumnDefinitions="18,*,Auto,Auto"
-                    DoubleTapped="OnDoubleTappedBranchNode">
-                
-                <!-- Icon -->
-                <v:BranchTreeNodeIcon Grid.Column="0"
-                                      Node="{Binding}"
-                                      IsExpanded="{Binding IsExpanded}"/>
+          <!-- Name -->
+          <TextBlock Grid.Column="1"
+                      Text="{Binding Name}"
+                      Classes="primary"
+                      FontWeight="{Binding NameFontWeight}"/>
 
-                <!-- Name -->
-                <TextBlock Grid.Column="1"
-                           Text="{Binding Name}"
-                           Classes="primary"
-                           FontWeight="{Binding NameFontWeight}"/>
+          <!-- Tracking status -->
+          <v:BranchTreeNodeTrackStatusPresenter Grid.Column="2"
+                                                Margin="8,0"
+                                                VerticalAlignment="Center"
+                                                FontFamily="{DynamicResource Fonts.Monospace}"
+                                                FontSize="10"
+                                                Foreground="{DynamicResource Brush.BadgeFG}"
+                                                Background="{DynamicResource Brush.Badge}"/>
 
-                <!-- Tracking status -->
-                <v:BranchTreeNodeTrackStatusPresenter Grid.Column="2"
-                                                      Margin="8,0"
-                                                      VerticalAlignment="Center"
-                                                      FontFamily="{DynamicResource Fonts.Monospace}"
-                                                      FontSize="10"
-                                                      Foreground="{DynamicResource Brush.BadgeFG}"
-                                                      Background="{DynamicResource Brush.Badge}"/>
-
-                <!-- Filter Toggle Button -->
-                <ToggleButton Grid.Column="3"
-                              Classes="filter"
-                              Margin="0,0,8,0"
-                              Background="Transparent"
-                              IsCheckedChanged="OnToggleFilter"
-                              IsVisible="{Binding IsBranch}"
-                              IsChecked="{Binding IsFiltered}"
-                              ToolTip.Tip="{DynamicResource Text.Filter}"/>
-              </Grid>
-            </Grid>
-          </DataTemplate>
-        </DataGridTemplateColumn.CellTemplate>
-      </DataGridTemplateColumn>
-    </DataGrid.Columns>
-  </DataGrid>
+          <!-- Filter Toggle Button -->
+          <ToggleButton Grid.Column="3"
+                        Classes="filter"
+                        Margin="0,0,8,0"
+                        Background="Transparent"
+                        IsCheckedChanged="OnToggleFilter"
+                        IsVisible="{Binding IsBranch}"
+                        IsChecked="{Binding IsFiltered}"
+                        ToolTip.Tip="{DynamicResource Text.Filter}"/>
+          </Grid>
+        </Grid>
+      </DataTemplate>
+    </ListBox.ItemTemplate>
+  </ListBox>
 </UserControl>
 
diff --git a/src/Views/Repository.axaml b/src/Views/Repository.axaml
index 82396bc9..22ec2d07 100644
--- a/src/Views/Repository.axaml
+++ b/src/Views/Repository.axaml
@@ -240,70 +240,31 @@
               </Button>
             </Grid>
           </ToggleButton>
-          <DataGrid Grid.Row="7"
-                    x:Name="SubmoduleList"
-                    Height="0"
-                    Margin="8,0,4,0"
-                    Background="Transparent"
-                    ItemsSource="{Binding Submodules}"
-                    SelectionMode="Single"
-                    CanUserReorderColumns="False"
-                    CanUserResizeColumns="False"
-                    CanUserSortColumns="False"
-                    IsReadOnly="True"
-                    HeadersVisibility="None"
-                    Focusable="False"
-                    RowHeight="24"
-                    HorizontalScrollBarVisibility="Disabled"
-                    VerticalScrollBarVisibility="Auto"
-                    ContextRequested="OnSubmoduleContextRequested"
-                    DoubleTapped="OnDoubleTappedSubmodule"
-                    PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
-                    IsVisible="{Binding IsSubmoduleGroupExpanded, Mode=OneWay}">
-            <DataGrid.Styles>
-              <Style Selector="DataGridRow">
-                <Setter Property="CornerRadius" Value="4" />
-                <Setter Property="Height" Value="24"/>
-              </Style>
-
-              <Style Selector="DataGridRow /template/ Border#RowBorder">
-                <Setter Property="ClipToBounds" Value="True" />
-              </Style>
-
-              <Style Selector="DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
-              </Style>
-
-              <Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
-              </Style>
-            </DataGrid.Styles>
-
-            <DataGrid.Columns>
-              <DataGridTemplateColumn Header="ICON">
-                <DataGridTemplateColumn.CellTemplate>
-                  <DataTemplate>
-                    <Path Width="10" Height="10" Margin="8,0" Data="{StaticResource Icons.Submodule}"/>
-                  </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-              </DataGridTemplateColumn>
-
-              <DataGridTemplateColumn Width="*" Header="NAME">
-                <DataGridTemplateColumn.CellTemplate>
-                  <DataTemplate>
-                    <Grid Background="Transparent" Margin="0,0,4,0" ColumnDefinitions="*,8">
-                      <TextBlock Grid.Column="0" Text="{Binding Path}" ClipToBounds="True" Classes="primary" TextTrimming="CharacterEllipsis"/>
-                      <Path Grid.Column="1"
-                            Width="8" Height="8"
-                            Fill="Goldenrod"
-                            Data="{StaticResource Icons.Modified}"
-                            IsVisible="{Binding IsDirty}"/>
-                    </Grid>
-                  </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-              </DataGridTemplateColumn>
-            </DataGrid.Columns>
-          </DataGrid>
+          <ListBox Grid.Row="7"
+                   x:Name="SubmoduleList"
+                   Height="0"
+                   Margin="8,0,4,0"
+                   Classes="repo_left_content_list"
+                   ItemsSource="{Binding Submodules}"
+                   SelectionMode="Single"
+                   ContextRequested="OnSubmoduleContextRequested"
+                   DoubleTapped="OnDoubleTappedSubmodule"
+                   PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
+                   IsVisible="{Binding IsSubmoduleGroupExpanded, Mode=OneWay}">
+            <ListBox.ItemTemplate>
+              <DataTemplate DataType="m:Submodule">
+                <Grid ColumnDefinitions="Auto,*,8">
+                  <Path Grid.Column="0" Width="10" Height="10" Margin="8,0" Data="{StaticResource Icons.Submodule}"/>
+                  <TextBlock Grid.Column="1" Text="{Binding Path}" ClipToBounds="True" Classes="primary" TextTrimming="CharacterEllipsis"/>
+                  <Path Grid.Column="2"
+                        Width="8" Height="8"
+                        Fill="Goldenrod"
+                        Data="{StaticResource Icons.Modified}"
+                        IsVisible="{Binding IsDirty}"/>
+                </Grid>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
 
           <!-- Worktrees -->
           <ToggleButton Grid.Row="8" Classes="group_expander" IsChecked="{Binding IsWorktreeGroupExpanded, Mode=TwoWay}">
@@ -329,74 +290,30 @@
               </Button>
             </Grid>
           </ToggleButton>
-          <DataGrid Grid.Row="9"
-                    x:Name="WorktreeList"
-                    Height="0"
-                    Margin="8,0,4,0"
-                    Background="Transparent"
-                    ItemsSource="{Binding Worktrees}"
-                    SelectionMode="Single"
-                    CanUserReorderColumns="False"
-                    CanUserResizeColumns="False"
-                    CanUserSortColumns="False"
-                    IsReadOnly="True"
-                    HeadersVisibility="None"
-                    Focusable="False"
-                    RowHeight="24"
-                    HorizontalScrollBarVisibility="Disabled"
-                    VerticalScrollBarVisibility="Auto"
-                    ContextRequested="OnWorktreeContextRequested"
-                    DoubleTapped="OnDoubleTappedWorktree"
-                    PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
-                    IsVisible="{Binding IsWorktreeGroupExpanded, Mode=OneWay}">
-            <DataGrid.Styles>
-              <Style Selector="DataGridRow">
-                <Setter Property="CornerRadius" Value="4"/>
-                <Setter Property="Height" Value="24"/>
-              </Style>
-
-              <Style Selector="DataGridRow /template/ Border#RowBorder">
-                <Setter Property="ClipToBounds" Value="True" />
-              </Style>
-
-              <Style Selector="DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
-              </Style>
-
-              <Style Selector="DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
-              </Style>
-            </DataGrid.Styles>
-
-            <DataGrid.Columns>
-              <DataGridTemplateColumn Header="ICON">
-                <DataGridTemplateColumn.CellTemplate>
-                  <DataTemplate>
-                    <Path Width="10" Height="10" Margin="8,0,0,0" Data="{StaticResource Icons.Worktree}"/>
-                  </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-              </DataGridTemplateColumn>
-
-              <DataGridTemplateColumn Width="*" Header="FullPath">
-                <DataGridTemplateColumn.CellTemplate>
-                  <DataTemplate>
-                    <TextBlock Classes="primary" Margin="8,0,0,0" TextTrimming="CharacterEllipsis">
-                      <Run Text="{Binding FullPath}"/>
-                      <Run Text="{Binding Name}" Foreground="{DynamicResource Brush.FG2}"/>
-                    </TextBlock>
-                  </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-              </DataGridTemplateColumn>
-
-              <DataGridTemplateColumn Header="FullPath">
-                <DataGridTemplateColumn.CellTemplate>
-                  <DataTemplate>
-                    <Path Width="10" Height="10" Margin="4,0,8,0" Data="{StaticResource Icons.Lock}" Fill="{DynamicResource Brush.FG2}" IsVisible="{Binding IsLocked}"/>
-                  </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-              </DataGridTemplateColumn>
-            </DataGrid.Columns>
-          </DataGrid>
+          <ListBox Grid.Row="9"
+                   x:Name="WorktreeList"
+                   Height="0"
+                   Margin="8,0,4,0"
+                   Classes="repo_left_content_list"
+                   ItemsSource="{Binding Worktrees}"
+                   SelectionMode="Single"
+                   ContextRequested="OnWorktreeContextRequested"
+                   DoubleTapped="OnDoubleTappedWorktree"
+                   PropertyChanged="OnLeftSidebarDataGridPropertyChanged"
+                   IsVisible="{Binding IsWorktreeGroupExpanded, Mode=OneWay}">
+            <ListBox.ItemTemplate>
+              <DataTemplate DataType="m:Worktree">
+                <Grid ColumnDefinitions="Auto,*,22">
+                  <Path Grid.Column="0" Width="10" Height="10" Margin="8,0,0,0" Data="{StaticResource Icons.Worktree}"/>
+                  <TextBlock Grid.Column="1" Classes="primary" Margin="8,0,0,0" TextTrimming="CharacterEllipsis">
+                    <Run Text="{Binding FullPath}"/>
+                    <Run Text="{Binding Name}" Foreground="{DynamicResource Brush.FG2}"/>
+                  </TextBlock>
+                  <Path Grid.Column="2" Width="10" Height="10" Margin="4,0,0,0" Data="{StaticResource Icons.Lock}" Fill="{DynamicResource Brush.FG2}" IsVisible="{Binding IsLocked}"/>
+                </Grid>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
         </Grid>
       </Grid>
 
diff --git a/src/Views/Repository.axaml.cs b/src/Views/Repository.axaml.cs
index a83d24bd..6c3c80ea 100644
--- a/src/Views/Repository.axaml.cs
+++ b/src/Views/Repository.axaml.cs
@@ -200,7 +200,7 @@ namespace SourceGit.Views
 
         private void OnSubmoduleContextRequested(object sender, ContextRequestedEventArgs e)
         {
-            if (sender is DataGrid { SelectedItem: Models.Submodule submodule } grid && DataContext is ViewModels.Repository repo)
+            if (sender is ListBox { SelectedItem: Models.Submodule submodule } grid && DataContext is ViewModels.Repository repo)
             {
                 var menu = repo.CreateContextMenuForSubmodule(submodule.Path);
                 grid.OpenContextMenu(menu);
@@ -211,7 +211,7 @@ namespace SourceGit.Views
 
         private void OnDoubleTappedSubmodule(object sender, TappedEventArgs e)
         {
-            if (sender is DataGrid { SelectedItem: Models.Submodule submodule } && DataContext is ViewModels.Repository repo)
+            if (sender is ListBox { SelectedItem: Models.Submodule submodule } && DataContext is ViewModels.Repository repo)
             {
                 repo.OpenSubmodule(submodule.Path);
             }
@@ -221,7 +221,7 @@ namespace SourceGit.Views
 
         private void OnWorktreeContextRequested(object sender, ContextRequestedEventArgs e)
         {
-            if (sender is DataGrid { SelectedItem: Models.Worktree worktree } grid && DataContext is ViewModels.Repository repo)
+            if (sender is ListBox { SelectedItem: Models.Worktree worktree } grid && DataContext is ViewModels.Repository repo)
             {
                 var menu = repo.CreateContextMenuForWorktree(worktree);
                 grid.OpenContextMenu(menu);
@@ -232,7 +232,7 @@ namespace SourceGit.Views
 
         private void OnDoubleTappedWorktree(object sender, TappedEventArgs e)
         {
-            if (sender is DataGrid { SelectedItem: Models.Worktree worktree } && DataContext is ViewModels.Repository repo)
+            if (sender is ListBox { SelectedItem: Models.Worktree worktree } && DataContext is ViewModels.Repository repo)
             {
                 repo.OpenWorktree(worktree);
             }
@@ -242,7 +242,7 @@ namespace SourceGit.Views
 
         private void OnLeftSidebarDataGridPropertyChanged(object _, AvaloniaPropertyChangedEventArgs e)
         {
-            if (e.Property == DataGrid.ItemsSourceProperty || e.Property == DataGrid.IsVisibleProperty)
+            if (e.Property == ListBox.ItemsSourceProperty || e.Property == ListBox.IsVisibleProperty)
                 UpdateLeftSidebarLayout();
         }
 
@@ -266,8 +266,8 @@ namespace SourceGit.Views
             var remoteBranchRows = vm.IsRemoteGroupExpanded ? RemoteBranchTree.Rows.Count : 0;
             var desiredBranches = (localBranchRows + remoteBranchRows) * 24.0;
             var desiredTag = vm.IsTagGroupExpanded ? 24.0 * TagsList.Rows : 0;
-            var desiredSubmodule = vm.IsSubmoduleGroupExpanded ? SubmoduleList.RowHeight * vm.Submodules.Count : 0;
-            var desiredWorktree = vm.IsWorktreeGroupExpanded ? WorktreeList.RowHeight * vm.Worktrees.Count : 0;
+            var desiredSubmodule = vm.IsSubmoduleGroupExpanded ? 24.0 * vm.Submodules.Count : 0;
+            var desiredWorktree = vm.IsWorktreeGroupExpanded ? 24.0 * vm.Worktrees.Count : 0;
             var desiredOthers = desiredTag + desiredSubmodule + desiredWorktree;
             var hasOverflow = (desiredBranches + desiredOthers > leftHeight);
 
diff --git a/src/Views/TagsView.axaml b/src/Views/TagsView.axaml
index bcbbe358..4bafa55b 100644
--- a/src/Views/TagsView.axaml
+++ b/src/Views/TagsView.axaml
@@ -7,31 +7,12 @@
              xmlns:vm="using:SourceGit.ViewModels"
              xmlns:c="using:SourceGit.Converters"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="SourceGit.Views.TagsView">
-  <UserControl.Styles>
-    <Style Selector="ListBox">
-      <Setter Property="Background" Value="Transparent"/>
-      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
-      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
-      <Setter Property="ItemsPanel">
-        <ItemsPanelTemplate>
-          <VirtualizingStackPanel Orientation="Vertical"/>
-        </ItemsPanelTemplate>
-      </Setter>
-    </Style>
-    
-    <Style Selector="ListBoxItem">
-      <Setter Property="Height" Value="24"/>
-      <Setter Property="Margin" Value="0"/>
-      <Setter Property="Padding" Value="0"/>
-      <Setter Property="CornerRadius" Value="4"/>
-    </Style>
-  </UserControl.Styles>
-  
+             x:Class="SourceGit.Views.TagsView">  
   <UserControl.DataTemplates>
     <DataTemplate DataType="vm:TagCollectionAsTree">
-      <ListBox ItemsSource="{Binding Rows}" 
-               SelectionMode="Single" 
+      <ListBox Classes="repo_left_content_list"
+               ItemsSource="{Binding Rows}"
+               SelectionMode="Single"
                SelectionChanged="OnRowSelectionChanged">
         <ListBox.ItemTemplate>
           <DataTemplate DataType="vm:TagTreeNode">
@@ -70,7 +51,8 @@
     </DataTemplate>
 
     <DataTemplate DataType="vm:TagCollectionAsList">
-      <ListBox ItemsSource="{Binding Tags}"
+      <ListBox Classes="repo_left_content_list"
+               ItemsSource="{Binding Tags}"
                SelectionMode="Single" 
                SelectionChanged="OnRowSelectionChanged">
         <ListBox.ItemTemplate>
diff --git a/src/Views/TagsView.axaml.cs b/src/Views/TagsView.axaml.cs
index 23d31ab4..9bb20aca 100644
--- a/src/Views/TagsView.axaml.cs
+++ b/src/Views/TagsView.axaml.cs
@@ -282,6 +282,7 @@ namespace SourceGit.Views
             var tags = Tags;
             if (tags == null || tags.Count == 0)
             {
+                Rows = 0;
                 Content = null;
                 return;
             }