Feature: Switched to StackPanel in the Details Layout template (#10936)

Author: yaira2

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

@@ -532,26 +532,14 @@
 					</ListView.Header>
 					<ListView.ItemTemplate>
 						<DataTemplate x:DataType="local2:ListedItem">
-							<Grid
+							<StackPanel
 								HorizontalAlignment="Stretch"
 								AutomationProperties.Name="{x:Bind Name, Mode=OneWay}"
 								IsRightTapEnabled="True"
-								Loaded="Grid_Loaded"
+								Loaded="StackPanel_Loaded"
+								Orientation="Horizontal"
 								ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
-								<Grid.ColumnDefinitions>
-									<ColumnDefinition Width="{Binding ColumnsViewModel.IconColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.NameColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.TagColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.OriginalPathColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.DateDeletedColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.DateModifiedColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.DateCreatedColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.ItemTypeColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.SizeColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-									<ColumnDefinition Width="{Binding ColumnsViewModel.StatusColumn.LengthIncludingGridSplitter, ElementName=PageRoot, Mode=OneWay}" />
-								</Grid.ColumnDefinitions>
 								<Grid
-									Grid.Column="0"
 									Width="24"
 									Height="Auto"
 									HorizontalAlignment="Center"
@@ -619,8 +607,7 @@
 								</Grid>
 
 								<Grid
-									Grid.Column="1"
-									MinWidth="{Binding ColumnsViewModel.NameColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
+									Width="{Binding ColumnsViewModel.NameColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Left"
 									VerticalAlignment="Center"
@@ -649,7 +636,6 @@
 
 								<Grid
 									x:Name="ItemTagGrid"
-									Grid.Column="2"
 									Width="{Binding ColumnsViewModel.TagColumn.Length.Value, ElementName=PageRoot, Mode=OneWay}"
 									HorizontalAlignment="Stretch"
 									VerticalAlignment="Center"
@@ -666,6 +652,7 @@
 										ToolTipService.ToolTip="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
 										Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}">
 										<TextBlock
+											x:Name="ItemTag"
 											FontSize="12"
 											Style="{StaticResource ColumnContentTextBlock}"
 											Text="{x:Bind FileTagsUI[0].TagName, Mode=OneWay}"
@@ -675,8 +662,7 @@
 								</Grid>
 
 								<TextBlock
-									x:Name="ItemOriginalPathGrid"
-									Grid.Column="3"
+									x:Name="ItemOriginalPath"
 									Width="{Binding ColumnsViewModel.OriginalPathColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -686,8 +672,7 @@
 									Text="{x:Bind AsRecycleBinItem.ItemOriginalPath, Mode=OneWay}" />
 
 								<TextBlock
-									x:Name="ItemDateDeletedGrid"
-									Grid.Column="4"
+									x:Name="ItemDateDeleted"
 									Width="{Binding ColumnsViewModel.DateDeletedColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -697,8 +682,7 @@
 									Text="{x:Bind AsRecycleBinItem.ItemDateDeleted, Mode=OneWay}" />
 
 								<TextBlock
-									x:Name="ItemDateModifiedGrid"
-									Grid.Column="5"
+									x:Name="ItemDateModified"
 									Width="{Binding ColumnsViewModel.DateModifiedColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -708,8 +692,7 @@
 									Visibility="{Binding ColumnsViewModel.DateModifiedColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
 
 								<TextBlock
-									x:Name="ItemDateCreatedGrid"
-									Grid.Column="6"
+									x:Name="ItemDateCreated"
 									Width="{Binding ColumnsViewModel.DateCreatedColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -719,8 +702,7 @@
 									Visibility="{Binding ColumnsViewModel.DateCreatedColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
 
 								<TextBlock
-									x:Name="ItemTypeGrid"
-									Grid.Column="7"
+									x:Name="ItemType"
 									Width="{Binding ColumnsViewModel.ItemTypeColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -730,8 +712,7 @@
 									Visibility="{Binding ColumnsViewModel.ItemTypeColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
 
 								<TextBlock
-									x:Name="ItemSizeGrid"
-									Grid.Column="8"
+									x:Name="ItemSize"
 									Width="{Binding ColumnsViewModel.SizeColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Padding="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -741,8 +722,7 @@
 									Visibility="{Binding ColumnsViewModel.SizeColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
 
 								<FontIcon
-									x:Name="ItemStatusGrid"
-									Grid.Column="9"
+									x:Name="ItemStatus"
 									Width="{Binding ColumnsViewModel.StatusColumn.LengthIncludingGridSplitter.Value, ElementName=PageRoot, Mode=OneWay}"
 									Margin="12,0,0,0"
 									HorizontalAlignment="Stretch"
@@ -751,7 +731,7 @@
 									FontSize="12"
 									Glyph="{x:Bind SyncStatusUI.Glyph, Mode=OneWay}"
 									Visibility="{Binding ColumnsViewModel.StatusColumn.Visibility, ElementName=PageRoot, Mode=OneWay}" />
-							</Grid>
+							</StackPanel>
 						</DataTemplate>
 					</ListView.ItemTemplate>
 					<i:Interaction.Behaviors>

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

@@ -595,11 +595,11 @@ public override void Dispose()
 
 		#endregion IDisposable
 
-		private void Grid_Loaded(object sender, RoutedEventArgs e)
+		private void StackPanel_Loaded(object sender, RoutedEventArgs e)
 		{
 			// This is the best way I could find to set the context flyout, as doing it in the styles isn't possible
 			// because you can't use bindings in the setters
-			DependencyObject item = VisualTreeHelper.GetParent(sender as Grid);
+			DependencyObject item = VisualTreeHelper.GetParent(sender as StackPanel);
 			while (item is not ListViewItem)
 				item = VisualTreeHelper.GetParent(item);
 			if (item is ListViewItem itemContainer)
@@ -740,14 +740,24 @@ private double MeasureTextColumnEstimate(int columnIndex, int measureItemsCount,
 		{
 			var tbs = DependencyObjectHelpers.FindChildren<TextBlock>(FileList.ItemsPanelRoot).Where(tb =>
 			{
-				// isolated <TextBlock Grid.Column=...>
-				if (tb.ReadLocalValue(Grid.ColumnProperty) != DependencyProperty.UnsetValue)
-					return Grid.GetColumn(tb) == columnIndex;
-				// <TextBlock> nested in <Grid Grid.Column=...>
-				else if (tb.Parent is Grid parentGrid)
-					return Grid.GetColumn(parentGrid) == columnIndex;
+				int columnIndexFromName = tb.Name switch
+				{
+					"ItemName" => 1,
+					"ItemTag" => 2,
+					"ItemOriginalPath" => 3,
+					"ItemDateDeleted" => 4,
+					"ItemDateModified" => 5,
+					"ItemDateCreated" => 6,
+					"ItemType" => 7,
+					"ItemSize" => 8,
+					"ItemStatus" => 9,
+					_ => -1,
+				};
+
+				if (columnIndexFromName == -1)
+					return false;
 
-				return false;
+				return columnIndexFromName == columnIndex;
 			});
 
 			// heuristic: usually, text with more letters are wider than shorter text with wider letters