Compact spacing for the details layout

src/Files.Backend/Services/Settings/IAppearanceSettingsService.cs

@@ -62,5 +62,10 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
         /// Gets or sets a value indicating whether or not recycle bin should be pinned to the sidebar.
         /// </summary>
         bool PinRecycleBinToSidebar { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether or not to use the compact styles.
+        /// </summary>
+        bool UseCompactStyles { get; set; }
     }
 }

src/Files.Uwp/App.xaml

@@ -25,6 +25,8 @@
             <FontFamily x:Key="RecycleBinIcons">/Assets/Custom Glyphs/recyclebin-fabric-glyph.ttf#Fabric MDL2 Assets</FontFamily>
             <FontFamily x:Key="ColoredIconFontFamily">/Assets/Custom Glyphs/Colored-Icons.ttf#Untitled1</FontFamily>
 
+            <!--  Default list view item height  -->
+            <x:Double x:Key="ListItemHeight">36</x:Double>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" ControlsResourcesVersion="Version2" />
                 <ResourceDictionary>

src/Files.Uwp/App.xaml.cs

@@ -40,6 +40,7 @@
 using Files.Shared.Extensions;
 using Files.Backend.Services;
 using Files.Uwp.ServicesImplementation;
+using Files.ViewModels.SettingsViewModels;
 
 namespace Files
 {
@@ -57,6 +58,7 @@ sealed partial class App : Application
         public static JumpListManager JumpList { get; private set; }
         public static SidebarPinnedController SidebarPinnedController { get; private set; }
         public static TerminalController TerminalController { get; private set; }
+        public static AppearanceViewModel AppearanceViewModel { get; private set; }
         public static CloudDrivesManager CloudDrivesManager { get; private set; }
         public static NetworkDrivesManager NetworkDrivesManager { get; private set; }
         public static DrivesManager DrivesManager { get; private set; }
@@ -150,6 +152,7 @@ private static async Task EnsureSettingsAndConfigurationAreBootstrapped()
             FileTagsManager ??= new FileTagsManager();
             SidebarPinnedController ??= new SidebarPinnedController();
             TerminalController ??= new TerminalController();
+            AppearanceViewModel ??= new AppearanceViewModel();
         }
 
         private static async Task StartAppCenter()

src/Files.Uwp/ServicesImplementation/Settings/AppearanceSettingsService.cs

@@ -80,6 +80,12 @@ public bool MoveOverflowMenuItemsToSubMenu
             set => Set(value);
         }
 
+        public bool UseCompactStyles
+        {
+            get => Get(false);
+            set => Set(value);
+        }
+
         protected override void RaiseOnSettingChangedEvent(object sender, SettingChangedEventArgs e)
         {
             switch (e.SettingName)
@@ -92,6 +98,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
                 case nameof(ShowWslSection):
                 case nameof(ShowFileTagsSection):
                 case nameof(PinRecycleBinToSidebar):
+                case nameof(UseCompactStyles):
                     Analytics.TrackEvent($"{e.SettingName} {e.NewValue}");
                     break;
             }
@@ -109,6 +116,7 @@ public void ReportToAppCenter()
             Analytics.TrackEvent($"{nameof(ShowWslSection)}, {ShowWslSection}");
             Analytics.TrackEvent($"{nameof(ShowFileTagsSection)}, {ShowFileTagsSection}");
             Analytics.TrackEvent($"{nameof(PinRecycleBinToSidebar)}, {PinRecycleBinToSidebar}");
+            Analytics.TrackEvent($"{nameof(UseCompactStyles)}, {UseCompactStyles}");
         }
     }
 }

src/Files.Uwp/Strings/en-US/Resources.resw

@@ -2750,4 +2750,7 @@ We use App Center to track which settings are being used, find bugs, and fix cra
   <data name="SettingsShowFileTagsSectionSwitch.AutomationProperties.Name" xml:space="preserve">
     <value>Show Tags section</value>
   </data>
+  <data name="UseCompactStyles" xml:space="preserve">
+    <value>Use compact styles in the details layout</value>
+  </data>
 </root>

src/Files.Uwp/UserControls/Widgets/RecentFilesWidget.xaml

@@ -32,6 +32,12 @@
             ItemContainerTransitions="{x:Null}"
             ItemsSource="{x:Bind recentItemsCollection}"
             SelectionMode="None">
+            <ListView.ItemContainerStyle>
+                <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
+                    <Setter Property="MinHeight" Value="1" />
+                    <Setter Property="Height" Value="{ThemeResource ListItemHeight}" />
+                </Style>
+            </ListView.ItemContainerStyle>
             <ListView.ItemTemplate>
                 <DataTemplate x:DataType="local:RecentItem">
                     <Grid

src/Files.Uwp/ViewModels/SettingsViewModels/AppearanceViewModel.cs

@@ -26,6 +26,25 @@ public AppearanceViewModel()
                 "LightTheme".GetLocalized(),
                 "DarkTheme".GetLocalized()
             };
+
+            SetCompactStyles();
+        }
+
+        /// <summary>
+        /// Forces the application to use the correct styles if compact mode is turned on
+        /// </summary>
+        private void SetCompactStyles()
+        {
+            if (UseCompactStyles)
+            {
+                Application.Current.Resources["ListItemHeight"] = 28;
+            }
+            else
+            {
+                Application.Current.Resources["ListItemHeight"] = 36;
+            }
+
+            UpdateTheme();
         }
 
         public List<string> Themes { get; set; }
@@ -134,6 +153,23 @@ public bool PinRecycleBinToSideBar
             }
         }
 
+        public bool UseCompactStyles
+        {
+            get => UserSettingsService.AppearanceSettingsService.UseCompactStyles;
+            set
+            {
+                if (value != UserSettingsService.AppearanceSettingsService.UseCompactStyles)
+                {
+                    UserSettingsService.AppearanceSettingsService.UseCompactStyles = value;
+
+                    //Apply the correct styles
+                    SetCompactStyles();
+
+                    OnPropertyChanged();
+                }
+            }
+        }
+
         public bool ShowLibrarySection
         {
             get => UserSettingsService.AppearanceSettingsService.ShowLibrarySection;

src/Files.Uwp/Views/LayoutModes/ColumnViewBase.xaml

@@ -381,8 +381,8 @@
                         <ListView.ItemContainerStyle>
                             <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
                                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-                                <Setter Property="Height" Value="36" />
                                 <Setter Property="MinHeight" Value="1" />
+                                <Setter Property="Height" Value="{ThemeResource ListItemHeight}" />
                             </Style>
                         </ListView.ItemContainerStyle>
                         <ListView.ItemsPanel>

src/Files.Uwp/Views/LayoutModes/DetailsLayoutBrowser.xaml

@@ -885,7 +885,7 @@
                             <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
                                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                 <Setter Property="MinHeight" Value="1" />
-                                <Setter Property="Height" Value="36" />
+                                <Setter Property="Height" Value="{ThemeResource ListItemHeight}" />
                             </Style>
                         </ListView.ItemContainerStyle>
                         <ListView.ItemsPanel>

src/Files.Uwp/Views/LayoutModes/DetailsLayoutBrowser.xaml.cs

@@ -89,7 +89,7 @@ protected override void HookEvents()
         private void ItemManipulationModel_ScrollIntoViewInvoked(object sender, ListedItem e)
         {
             FileList.ScrollIntoView(e);
-            ContentScroller?.ChangeView(null, FileList.Items.IndexOf(e) * 36, null, true); // Scroll to index * item height
+            ContentScroller?.ChangeView(null, FileList.Items.IndexOf(e) * Convert.ToInt32(Application.Current.Resources["ListItemHeight"]), null, true); // Scroll to index * item height
         }
 
         private void ItemManipulationModel_StartRenameItemInvoked(object sender, EventArgs e)

src/Files.Uwp/Views/SettingsPages/Appearance.xaml

@@ -6,6 +6,8 @@
     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helpers="using:Files.Helpers"
+    xmlns:i="using:Microsoft.Xaml.Interactivity"
+    xmlns:icore="using:Microsoft.Xaml.Interactions.Core"
     xmlns:local="using:Files.UserControls.Settings"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
@@ -203,6 +205,16 @@
                 </local:SettingsBlockControl.ExpandableContent>
             </local:SettingsBlockControl>
 
+            <local:SettingsBlockControl Title="{helpers:ResourceString Name=UseCompactStyles}" HorizontalAlignment="Stretch">
+                <local:SettingsBlockControl.Icon>
+                    <FontIcon Glyph="&#xE14C;" />
+                </local:SettingsBlockControl.Icon>
+                <ToggleSwitch
+                    AutomationProperties.Name="{helpers:ResourceString Name=UseCompactStyles}"
+                    IsOn="{Binding UseCompactStyles, Mode=TwoWay}"
+                    Style="{StaticResource RightAlignedToggleSwitchStyle}" />
+            </local:SettingsBlockControl>
+
             <TextBlock
                 x:Uid="SettingsContextMenu"
                 Padding="0,12,0,4"