Feature: Improved contrast for selected items in the Grid View layout (#16743)

Author: yaira2

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

@@ -436,7 +436,7 @@
 					Padding="0"
 					HorizontalAlignment="Left"
 					VerticalAlignment="Stretch"
-					Background="Transparent"
+					Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
 					BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
 					BorderThickness="1"
 					CornerRadius="8"
@@ -553,15 +553,15 @@
 									x:Name="ItemName"
 									MaxLines="{Binding ElementName=PageRoot, Path=CardsViewItemNameMaxLines, Mode=OneWay}"
 									Opacity="{x:Bind Opacity, Mode=OneWay}"
-									Style="{ThemeResource BodyStrongTextBlockStyle}"
+									Style="{ThemeResource App.Theme.BodyStrongTextBlockStyle}"
 									Text="{x:Bind Name, Mode=OneWay}"
 									TextTrimming="CharacterEllipsis"
 									TextWrapping="Wrap" />
 
 								<!--  Item Type  -->
 								<TextBlock
 									Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-									Style="{ThemeResource CaptionTextBlockStyle}"
+									Style="{ThemeResource App.Theme.CaptionTextBlockStyle}"
 									Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
 									TextTrimming="CharacterEllipsis"
 									TextWrapping="NoWrap" />
@@ -781,8 +781,9 @@
 			</Setter>
 		</Style>
 
+		<!--  Regular List Container Style  -->
 		<Style
-			x:Name="DefaultItemContainerStyle"
+			x:Name="LocalListItemContainerStyle"
 			BasedOn="{StaticResource DefaultGridViewItemStyle}"
 			TargetType="GridViewItem">
 			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -849,8 +850,9 @@
 			</Setter>
 		</Style>
 
+		<!--  Compact List Container Style  -->
 		<Style
-			x:Name="CompactListItemContainerStyle"
+			x:Name="LocalCompactListItemContainerStyle"
 			BasedOn="{StaticResource DefaultGridViewItemStyle}"
 			TargetType="GridViewItem">
 			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -918,11 +920,12 @@
 			</Setter>
 		</Style>
 
+		<!--  Regular Container Style  -->
 		<Style
-			x:Name="CardsItemContainerStyle"
+			x:Name="LocalRegularItemContainerStyle"
 			BasedOn="{StaticResource DefaultGridViewItemStyle}"
 			TargetType="GridViewItem">
-			<Setter Property="Background" Value="{ThemeResource CardBackgroundFillColorDefaultBrush}" />
+			<Setter Property="Background" Value="Transparent" />
 			<Setter Property="HorizontalContentAlignment" Value="Stretch" />
 			<Setter Property="HorizontalAlignment" Value="Stretch" />
 			<Setter Property="MinHeight" Value="1" />

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

@@ -135,7 +135,7 @@ public sealed partial class GridLayoutPage : BaseGroupableLayoutPage
 			LayoutSettingsService.CardsViewSize != CardsViewSizeKind.Small;
 
 		/// <summary>
-		/// Gets the icon size for item names in the Cards View layout.
+		/// Gets the icon size for items in the Cards View layout.
 		/// </summary>
 		public int CardsViewIconSize =>
 			(int)LayoutSizeKindHelper.GetIconSize(FolderLayoutModes.CardsView);
@@ -247,8 +247,6 @@ private void LayoutSettingsService_PropertyChanged(object? sender, PropertyChang
 			}
 			if (e.PropertyName == nameof(ILayoutSettingsService.GridViewSize))
 			{
-				NotifyPropertyChanged(nameof(ItemWidthGridView));
-
 				// Update the container style to match the item size
 				SetItemContainerStyle();
 				FolderSettings_IconSizeChanged();
@@ -306,29 +304,32 @@ private void SetItemTemplate()
 
 		private void SetItemContainerStyle()
 		{
-			if (FolderSettings?.LayoutMode == FolderLayoutModes.CardsView)
+			if (FolderSettings?.LayoutMode == FolderLayoutModes.CardsView || FolderSettings?.LayoutMode == FolderLayoutModes.GridView)
 			{
 				// Toggle style to force item size to update
-				FileList.ItemContainerStyle = DefaultItemContainerStyle;
+				FileList.ItemContainerStyle = LocalListItemContainerStyle;
 
 				// Set correct style
-				FileList.ItemContainerStyle = CardsItemContainerStyle;
+				FileList.ItemContainerStyle = LocalRegularItemContainerStyle;
 			}
-			else if (FolderSettings?.LayoutMode == FolderLayoutModes.ListView && UserSettingsService.LayoutSettingsService.ListViewSize == ListViewSizeKind.Compact)
+			else if (FolderSettings?.LayoutMode == FolderLayoutModes.ListView)
 			{
-				// Toggle style to force item size to update
-				FileList.ItemContainerStyle = DefaultItemContainerStyle;
+				if (UserSettingsService.LayoutSettingsService.ListViewSize == ListViewSizeKind.Compact)
+				{
+					// Toggle style to force item size to update
+					FileList.ItemContainerStyle = LocalRegularItemContainerStyle;
 
-				// Set correct style
-				FileList.ItemContainerStyle = CompactListItemContainerStyle;
-			}
-			else
-			{
-				// Toggle style to force item size to update
-				FileList.ItemContainerStyle = CompactListItemContainerStyle;
+					// Set correct style
+					FileList.ItemContainerStyle = LocalCompactListItemContainerStyle;
+				}
+				else
+				{
+					// Toggle style to force item size to update
+					FileList.ItemContainerStyle = LocalCompactListItemContainerStyle;
 
-				// Set correct style
-				FileList.ItemContainerStyle = DefaultItemContainerStyle;
+					// Set correct style
+					FileList.ItemContainerStyle = LocalRegularItemContainerStyle;
+				}
 			}
 		}