Feature: Use DPI aware icons in the Details View and List View layouts

src/Files.App/Helpers/Layout/LayoutPreferencesManager.cs

@@ -1,9 +1,6 @@
 // Copyright (c) Files Community
 // Licensed under the MIT License.
 
-using Files.App.Data.Enums;
-using System.Text.Json;
-using Windows.Storage;
 using Windows.Win32;
 
 namespace Files.App.Helpers
@@ -205,43 +202,6 @@ public LayoutPreferencesManager(FolderLayoutModes modeOverride) : this()
 
 		// Methods
 
-		/// <summary>
-		/// This will round the current icon size to get the best result from the File Explorer thumbnail system.
-		/// 
-		/// Details View:
-		///		Always uses the Large icon size (32).
-		///		
-		/// List View:
-		///		Always uses the Large icon size (32).
-		///		
-		/// Columns View:
-		///		Always uses the Large icon size (32).
-		///		
-		/// Tiles View:
-		///		Always uses 96, 128, or 256 depending on the layout size.
-		///		
-		/// Grid View:
-		///		Always uses 96, 128, or 256 depending on the layout size.
-		/// </summary>
-		public uint GetRoundedIconSize()
-		{
-			return LayoutMode switch
-			{
-				FolderLayoutModes.DetailsView
-					=> Constants.ShellIconSizes.Large,
-				FolderLayoutModes.ListView
-					=> Constants.ShellIconSizes.Large,
-				FolderLayoutModes.ColumnView
-					=> Constants.ShellIconSizes.Large,
-				_ when LayoutMode == FolderLayoutModes.GridView && UserSettingsService.LayoutSettingsService.GridViewSize <= GridViewSizeKind.Small ||
-					   LayoutMode == FolderLayoutModes.TilesView
-					=> 96,
-				_ when LayoutMode == FolderLayoutModes.GridView && UserSettingsService.LayoutSettingsService.GridViewSize <= GridViewSizeKind.Large
-					=> 128,
-				_ => 256,
-			};
-		}
-
 		public Type GetLayoutType(string path, bool changeLayoutMode = true)
 		{
 			var preferencesItem = GetLayoutPreferencesForPath(path);

src/Files.App/Helpers/Layout/LayoutSizeKindHelper.cs

@@ -93,6 +93,41 @@ public static int GetListViewRowHeight(ListViewSizeKind listViewSizeKind)
 			}
 		}
 
+		/// <summary>
+		/// Gets the desired icon size for the requested layout
+		/// </summary>
+		/// <param name="folderLayoutMode"></param>
+		/// <returns></returns>
+		public static uint GetIconSize(FolderLayoutModes folderLayoutMode)
+		{
+			return folderLayoutMode switch
+			{
+				// Details
+				FolderLayoutModes.DetailsView when LayoutSettingsService.DetailsViewSize == DetailsViewSizeKind.Compact => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.DetailsView when LayoutSettingsService.DetailsViewSize == DetailsViewSizeKind.Small => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.DetailsView when LayoutSettingsService.DetailsViewSize == DetailsViewSizeKind.Medium => 20,
+				FolderLayoutModes.DetailsView when LayoutSettingsService.DetailsViewSize == DetailsViewSizeKind.Large => 24,
+				FolderLayoutModes.DetailsView when LayoutSettingsService.DetailsViewSize == DetailsViewSizeKind.ExtraLarge => Constants.ShellIconSizes.Large,
+
+				// List
+				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.Compact => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.Small => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.Medium => 20,
+				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.Large => 24,
+				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.ExtraLarge => Constants.ShellIconSizes.Large,
+
+				// Columns
+				FolderLayoutModes.ColumnView => Constants.ShellIconSizes.Large,
+
+				// Grid and Tiles
+				FolderLayoutModes.GridView when LayoutSettingsService.GridViewSize <= GridViewSizeKind.Small => 96,
+				FolderLayoutModes.TilesView => 96,
+				FolderLayoutModes.GridView when LayoutSettingsService.GridViewSize <= GridViewSizeKind.Large => 128,
+
+				_ => 256,
+			};
+		}
+
 		/// <summary>
 		/// Gets the desired height for items in the Columns View
 		/// </summary>

src/Files.App/ViewModels/ShellViewModel.cs

@@ -973,9 +973,12 @@ private async Task<BitmapImage> GetShieldIcon()
 		private async Task LoadThumbnailAsync(ListedItem item, CancellationToken cancellationToken)
 		{
 			var loadNonCachedThumbnail = false;
-			var thumbnailSize = folderSettings.GetRoundedIconSize();
+			var thumbnailSize = LayoutSizeKindHelper.GetIconSize(folderSettings.LayoutMode);
 			var returnIconOnly = UserSettingsService.FoldersSettingsService.ShowThumbnails == false || thumbnailSize < 48;
 
+			// TODO Remove this property when all the layouts can support different icon sizes
+			var useCurrentScale = folderSettings.LayoutMode == FolderLayoutModes.DetailsView || folderSettings.LayoutMode == FolderLayoutModes.ListView;
+
 			byte[]? result = null;
 
 			// Non-cached thumbnails take longer to generate
@@ -988,7 +991,7 @@ private async Task LoadThumbnailAsync(ListedItem item, CancellationToken cancell
 							item.ItemPath,
 							thumbnailSize,
 							item.IsFolder,
-							IconOptions.ReturnThumbnailOnly | IconOptions.ReturnOnlyIfCached);
+							IconOptions.ReturnThumbnailOnly | IconOptions.ReturnOnlyIfCached | (useCurrentScale ? IconOptions.UseCurrentScale : 0));
 
 					cancellationToken.ThrowIfCancellationRequested();
 					loadNonCachedThumbnail = true;
@@ -1001,7 +1004,7 @@ private async Task LoadThumbnailAsync(ListedItem item, CancellationToken cancell
 							item.ItemPath,
 							thumbnailSize,
 							item.IsFolder,
-							IconOptions.ReturnIconOnly);
+							IconOptions.ReturnIconOnly | (useCurrentScale ? IconOptions.UseCurrentScale : 0));
 
 					cancellationToken.ThrowIfCancellationRequested();
 				}
@@ -1013,7 +1016,7 @@ private async Task LoadThumbnailAsync(ListedItem item, CancellationToken cancell
 						item.ItemPath,
 						thumbnailSize,
 						item.IsFolder,
-						returnIconOnly ? IconOptions.ReturnIconOnly : IconOptions.None);
+						returnIconOnly ? IconOptions.ReturnIconOnly | (useCurrentScale ? IconOptions.UseCurrentScale : 0) : (useCurrentScale ? IconOptions.UseCurrentScale : 0));
 
 				cancellationToken.ThrowIfCancellationRequested();
 			}
@@ -1059,7 +1062,7 @@ await dispatcherQueue.EnqueueOrInvokeAsync(async () =>
 								item.ItemPath,
 								thumbnailSize,
 								item.IsFolder,
-								IconOptions.ReturnThumbnailOnly);
+								IconOptions.ReturnThumbnailOnly | (useCurrentScale ? IconOptions.UseCurrentScale : 0));
 					}
 					finally
 					{

src/Files.App/Views/Layouts/DetailsLayoutPage.xaml

@@ -903,13 +903,16 @@
 									Loaded="StackPanel_Loaded"
 									Orientation="Horizontal">
 									<!--  Item Thumbnail  -->
-									<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch">
+									<Grid
+										Width="{Binding ColumnsViewModel.IconColumn.Length.Value, ElementName=PageRoot, Mode=OneWay}"
+										HorizontalAlignment="Left"
+										VerticalAlignment="Stretch">
 
 										<!--  Thumbnail  -->
 										<Grid
 											x:Name="IconBox"
-											Width="24"
-											Height="24"
+											Width="{Binding ColumnsViewModel.IconColumn.Length.Value, ElementName=PageRoot, Mode=OneWay}"
+											Height="{Binding ColumnsViewModel.IconColumn.Length.Value, ElementName=PageRoot, Mode=OneWay}"
 											HorizontalAlignment="Center"
 											VerticalAlignment="Center"
 											AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
@@ -918,8 +921,7 @@
 											Tag="ItemImage">
 											<ContentPresenter
 												x:Name="PicturePresenter"
-												Width="20"
-												Height="20"
+												Margin="2"
 												HorizontalAlignment="Center"
 												VerticalAlignment="Center"
 												x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"

src/Files.App/Views/Layouts/DetailsLayoutPage.xaml.cs

@@ -29,6 +29,7 @@ public sealed partial class DetailsLayoutPage : BaseGroupableLayoutPage
 		// Fields
 
 		private ListedItem? _nextItemToSelect;
+		private uint currentIconSize;
 
 		// Properties
 
@@ -136,6 +137,8 @@ protected override void OnNavigatedTo(NavigationEventArgs eventArgs)
 
 			base.OnNavigatedTo(eventArgs);
 
+			currentIconSize = LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.DetailsView);
+
 			if (FolderSettings?.ColumnsViewModel is not null)
 			{
 				ColumnsViewModel.DateCreatedColumn = FolderSettings.ColumnsViewModel.DateCreatedColumn;
@@ -191,7 +194,7 @@ protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
 			UserSettingsService.LayoutSettingsService.PropertyChanged -= LayoutSettingsService_PropertyChanged;
 		}
 
-		private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChangedEventArgs e)
+		private async void LayoutSettingsService_PropertyChanged(object? sender, PropertyChangedEventArgs e)
 		{
 			if (e.PropertyName == nameof(ILayoutSettingsService.DetailsViewSize))
 			{
@@ -205,6 +208,14 @@ private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChang
 
 				// Restore correct scroll position
 				ContentScroller?.ChangeView(null, previousOffset, null);
+
+				// Reload icons with correct size but only if the size changed
+				var requestedIconSize = LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.DetailsView);
+				if (requestedIconSize != currentIconSize)
+				{
+					currentIconSize = requestedIconSize;
+					_ = ReloadItemIconsAsync();
+				}
 			}
 			else
 			{
@@ -255,6 +266,9 @@ private void SetItemContainerStyle()
 				// Set correct style
 				FileList.ItemContainerStyle = RegularItemContainerStyle;
 			}
+
+			// Set icon column width
+			ColumnsViewModel.IconColumn.UserLength = new GridLength(LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.DetailsView) + 4);
 		}
 
 		private void FileList_LayoutUpdated(object? sender, object e)

src/Files.App/Views/Layouts/GridLayoutPage.xaml

@@ -302,8 +302,8 @@
 						<!--  Thumbnail  -->
 						<Grid
 							x:Name="IconBox"
-							Width="24"
-							Height="24"
+							Width="{Binding IconBoxSizeListView, ElementName=PageRoot, Mode=OneWay}"
+							Height="{Binding IconBoxSizeListView, ElementName=PageRoot, Mode=OneWay}"
 							HorizontalAlignment="Center"
 							VerticalAlignment="Center"
 							AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
@@ -312,8 +312,7 @@
 							Tag="ItemImage">
 							<ContentPresenter
 								x:Name="PicturePresenter"
-								Width="20"
-								Height="20"
+								Margin="2"
 								HorizontalAlignment="Center"
 								VerticalAlignment="Center"
 								x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"

src/Files.App/Views/Layouts/GridLayoutPage.xaml.cs

@@ -41,6 +41,14 @@ public int RowHeightListView
 		{
 			get => LayoutSizeKindHelper.GetListViewRowHeight(UserSettingsService.LayoutSettingsService.ListViewSize);
 		}
+
+		/// <summary>
+		/// Icon Box size in the List View layout. The value is increased by 4px to account for icon overlays.
+		/// </summary>
+		public int IconBoxSizeListView
+		{
+			get => (int)(LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.ListView) + 4);
+		}
 
 		/// <summary>
 		/// Item width in the Tiles View layout
@@ -127,7 +135,7 @@ protected override void OnNavigatedTo(NavigationEventArgs eventArgs)
 
 			base.OnNavigatedTo(eventArgs);
 
-			currentIconSize = FolderSettings.GetRoundedIconSize();
+			currentIconSize = LayoutSizeKindHelper.GetIconSize(FolderSettings.LayoutMode);
 
 			FolderSettings.LayoutModeChangeRequested -= FolderSettings_LayoutModeChangeRequested;
 			FolderSettings.LayoutModeChangeRequested += FolderSettings_LayoutModeChangeRequested;
@@ -140,7 +148,7 @@ protected override void OnNavigatedTo(NavigationEventArgs eventArgs)
 
 			var parameters = (NavigationArguments)eventArgs.Parameter;
 			if (parameters.IsLayoutSwitch)
-				ReloadItemIconsAsync();
+				_ = ReloadItemIconsAsync();
 		}
 
 		protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
@@ -162,10 +170,10 @@ private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChang
 			if (e.PropertyName == nameof(ILayoutSettingsService.ListViewSize))
 			{
 				NotifyPropertyChanged(nameof(RowHeightListView));
+				NotifyPropertyChanged(nameof(IconBoxSizeListView));
 
 				// Update the container style to match the item size
 				SetItemContainerStyle();
-
 				FolderSettings_IconHeightChanged();
 			}
 			if (e.PropertyName == nameof(ILayoutSettingsService.TilesViewSize))
@@ -182,7 +190,6 @@ private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChang
 
 				// Update the container style to match the item size
 				SetItemContainerStyle();
-
 				FolderSettings_IconHeightChanged();
 			}
 
@@ -200,10 +207,11 @@ private async void FolderSettings_LayoutModeChangeRequested(object? sender, Layo
 				SetItemTemplate();
 				SetItemContainerStyle();
 
-				var requestedIconSize = FolderSettings.GetRoundedIconSize();
+				var requestedIconSize = LayoutSizeKindHelper.GetIconSize(FolderSettings.LayoutMode);
 				if (requestedIconSize != currentIconSize)
 				{
 					currentIconSize = requestedIconSize;
+					// Don't change this await https://github.com/files-community/Files/pull/16708#discussion_r1916402106
 					await ReloadItemIconsAsync();
 				}
 			}
@@ -490,14 +498,14 @@ protected override bool CanGetItemFromElement(object element)
 		private async void FolderSettings_IconHeightChanged()
 		{
 			// Get new icon size
-			var requestedIconSize = FolderSettings.GetRoundedIconSize();
+			var requestedIconSize = LayoutSizeKindHelper.GetIconSize(FolderSettings.LayoutMode);
 
 			// Prevents reloading icons when the icon size hasn't changed
 			if (requestedIconSize != currentIconSize)
 			{
 				// Update icon size before refreshing
 				currentIconSize = requestedIconSize;
-				await ReloadItemIconsAsync();
+				_ = ReloadItemIconsAsync();
 			}
 		}