Collapse first few items when available width is shorter than desired

Author: 0x5bfa

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBarLayout.cs

@@ -59,21 +59,49 @@ protected override Size ArrangeOverride(NonVirtualizingLayoutContext context, Si
 		{
 			double accumulatedWidths = 0d;
 
-			_indexAfterEllipsis = context.Children.Count - 1;
+			_indexAfterEllipsis = GetFirstIndexToRender(context);
 
 			// Go through all items and arrange them
+			int index = 0;
 			foreach (var item in context.Children)
 			{
 				if (item is BreadcrumbBarItem breadcrumbItem)
 				{
-					breadcrumbItem.Arrange(new Rect(accumulatedWidths, 0, breadcrumbItem.DesiredSize.Width, breadcrumbItem.DesiredSize.Height));
+					if (index < _indexAfterEllipsis)
+					{
+						breadcrumbItem.Arrange(new Rect(0, 0, 0, 0));
+					}
+					else
+					{
+						breadcrumbItem.Arrange(new Rect(accumulatedWidths, 0, breadcrumbItem.DesiredSize.Width, breadcrumbItem.DesiredSize.Height));
 
-					accumulatedWidths += breadcrumbItem.DesiredSize.Width;
-					accumulatedWidths += _spacing;
+						accumulatedWidths += breadcrumbItem.DesiredSize.Width;
+						accumulatedWidths += _spacing;
+					}
+
+					index++;
 				}
 			}
 
 			return finalSize;
 		}
+
+		private int GetFirstIndexToRender(NonVirtualizingLayoutContext context)
+		{
+			var itemCount = context.Children.Count;
+			var accumulatedWidth = context.Children[itemCount - 1].DesiredSize.Width;
+
+			for (int i = itemCount - 2; i >= 0; i--)
+			{
+				var newAccumulatedWidth = accumulatedWidth + context.Children[i].DesiredSize.Width;
+
+				if (newAccumulatedWidth > _availableSize.Width)
+					return i + 1;
+
+				accumulatedWidth = newAccumulatedWidth;
+			}
+
+			return 0;
+		}
 	}
 }

tests/Files.App.UITests/MainWindow.xaml

@@ -82,7 +82,7 @@
 			SelectionChanged="NavigationView_SelectionChanged">
 
 			<NavigationView.MenuItems>
-				<NavigationViewItem Content="Controls">
+				<NavigationViewItem Content="Controls" IsExpanded="True">
 					<NavigationViewItem.Icon>
 						<FontIcon Glyph="&#xE73A;" />
 					</NavigationViewItem.Icon>