Feature: Use DPI aware icons in the Columns View (#16712)

Author: yaira2

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

@@ -117,7 +117,11 @@ public static uint GetIconSize(FolderLayoutModes folderLayoutMode)
 				FolderLayoutModes.ListView when LayoutSettingsService.ListViewSize == ListViewSizeKind.ExtraLarge => Constants.ShellIconSizes.Large,
 
 				// Columns
-				FolderLayoutModes.ColumnView => Constants.ShellIconSizes.Large,
+				FolderLayoutModes.ColumnView when LayoutSettingsService.ColumnsViewSize == ColumnsViewSizeKind.Compact => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.ColumnView when LayoutSettingsService.ColumnsViewSize == ColumnsViewSizeKind.Small => Constants.ShellIconSizes.Small,
+				FolderLayoutModes.ColumnView when LayoutSettingsService.ColumnsViewSize == ColumnsViewSizeKind.Medium => 20,
+				FolderLayoutModes.ColumnView when LayoutSettingsService.ColumnsViewSize == ColumnsViewSizeKind.Large => 24,
+				FolderLayoutModes.ColumnView when LayoutSettingsService.ColumnsViewSize == ColumnsViewSizeKind.ExtraLarge => Constants.ShellIconSizes.Large,
 
 				// Grid and Tiles
 				FolderLayoutModes.GridView when LayoutSettingsService.GridViewSize <= GridViewSizeKind.Small => 96,

src/Files.App/ViewModels/ShellViewModel.cs

@@ -977,7 +977,7 @@ private async Task LoadThumbnailAsync(ListedItem item, CancellationToken cancell
 			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;
+			var useCurrentScale = folderSettings.LayoutMode == FolderLayoutModes.DetailsView || folderSettings.LayoutMode == FolderLayoutModes.ListView || folderSettings.LayoutMode == FolderLayoutModes.ColumnView;
 
 			byte[]? result = null;
 

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

@@ -217,22 +217,21 @@
 								Loaded="Grid_Loaded"
 								PointerEntered="Grid_PointerEntered">
 								<Grid.ColumnDefinitions>
-									<ColumnDefinition Width="24" />
+									<ColumnDefinition Width="Auto" />
 									<ColumnDefinition Width="*" />
 									<ColumnDefinition Width="Auto" />
 								</Grid.ColumnDefinitions>
 
 								<!--  Thumbnail  -->
 								<Grid
 									Grid.Column="0"
-									Width="24"
-									Height="24"
+									Width="{Binding IconBoxSize, ElementName=PageRoot, Mode=OneWay}"
+									Height="{Binding IconBoxSize, ElementName=PageRoot, Mode=OneWay}"
 									Opacity="{x:Bind Opacity, Mode=OneWay}"
-									Tag="ItemImage">
+									Tag="IconBox">
 									<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/ColumnLayoutPage.xaml.cs

@@ -50,6 +50,20 @@ public int RowHeight
 			get => LayoutSizeKindHelper.GetColumnsViewRowHeight(UserSettingsService.LayoutSettingsService.ColumnsViewSize);
 		}
 
+		/// <summary>
+		/// Icon Box size layout. The value is increased by 4px to account for icon overlays.
+		/// </summary>
+		public int IconBoxSize
+		{
+			get => (int)(LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.ColumnView) + 4);
+		}
+
+		/// <summary>
+		/// This reference is used to prevent unnecessary icon reloading by only reloading icons when their
+		/// size changes, even if the layout size changes (since some layout sizes share the same icon size).
+		/// </summary>
+		private uint currentIconSize;
+
 		// Constructor
 
 		public ColumnLayoutPage() : base()
@@ -149,6 +163,8 @@ protected override void OnNavigatedTo(NavigationEventArgs eventArgs)
 
 			base.OnNavigatedTo(eventArgs);
 
+			currentIconSize = LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.ColumnView);
+
 			UserSettingsService.LayoutSettingsService.PropertyChanged += LayoutSettingsService_PropertyChanged;
 
 			SetItemContainerStyle();
@@ -180,12 +196,36 @@ private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChang
 				var previousOffset = ContentScroller?.VerticalOffset;
 
 				NotifyPropertyChanged(nameof(RowHeight));
+				NotifyPropertyChanged(nameof(IconBoxSize));
 
 				// Update the container style to match the item size
 				SetItemContainerStyle();
 
 				// Restore correct scroll position
 				ContentScroller?.ChangeView(null, previousOffset, null);
+
+				// Check if icons need to be reloaded
+				var newIconSize = LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.ColumnView);
+				if (newIconSize != currentIconSize)
+				{
+					currentIconSize = newIconSize;
+					_ = ReloadItemIconsAsync();
+				}
+			}
+		}
+
+		private async Task ReloadItemIconsAsync()
+		{
+			if (ParentShellPageInstance is null)
+				return;
+
+			ParentShellPageInstance.ShellViewModel.CancelExtendedPropertiesLoading();
+			var filesAndFolders = ParentShellPageInstance.ShellViewModel.FilesAndFolders.ToList();
+			foreach (ListedItem listedItem in filesAndFolders)
+			{
+				listedItem.ItemPropertiesInitialized = false;
+				if (FileList.ContainerFromItem(listedItem) is not null)
+					await ParentShellPageInstance.ShellViewModel.LoadExtendedItemPropertiesAsync(listedItem);
 			}
 		}