Init

Author: 0x5bfa

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

@@ -42,7 +42,7 @@ public BreadcrumbBar()
 		{
 			DefaultStyleKey = typeof(BreadcrumbBar);
 
-			_itemsRepeaterLayout = new(this, 2d);
+			_itemsRepeaterLayout = new(this);
 		}
 
 		// Methods

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBar.xaml

@@ -5,13 +5,14 @@
 	xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
 	xmlns:local="using:Files.App.Controls">
 
-	<x:Double x:Key="BreadcrumbBarHeight">32</x:Double>
+	<x:Double x:Key="BreadcrumbBarHeight">34</x:Double>
 	<x:Double x:Key="BreadcrumbBarMinWidth">120</x:Double>
 	<x:Double x:Key="BreadcrumbBarEllipsisFontSize">16</x:Double>
 
 	<Thickness x:Key="BreadcrumbBarChevronPadding">4,0</Thickness>
 	<Thickness x:Key="BreadcrumbBarItemPadding">8,0</Thickness>
 	<Thickness x:Key="BreadcrumbBarRootItemPadding">16,0,8,0</Thickness>
+	<Thickness x:Key="BreadcrumbBarItemMargin">2,0,0,0</Thickness>
 
 	<CornerRadius x:Key="BreadcrumbBarItemCornerRadius">2,2,2,2</CornerRadius>
 	<CornerRadius x:Key="BreadcrumbBarChevronCornerRaduis">2,2,2,2</CornerRadius>
@@ -21,15 +22,28 @@
 	<Style BasedOn="{StaticResource DefaultBreadcrumbBarItemStyle}" TargetType="local:BreadcrumbBarItem" />
 
 	<Style x:Key="DefaultBreadcrumbBarStyle" TargetType="local:BreadcrumbBar">
+
+		<Setter Property="Background" Value="Transparent" />
+
 		<Setter Property="MinWidth" Value="{StaticResource BreadcrumbBarMinWidth}" />
+
+		<Setter Property="HorizontalAlignment" Value="Stretch" />
+		<Setter Property="HorizontalContentAlignment" Value="Center" />
+		<Setter Property="VerticalAlignment" Value="Stretch" />
+		<Setter Property="VerticalContentAlignment" Value="Center" />
+
 		<Setter Property="AutomationProperties.LandmarkType" Value="Navigation" />
+
 		<Setter Property="IsTabStop" Value="False" />
+
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:BreadcrumbBar">
 					<Grid
 						MinWidth="{TemplateBinding MinWidth}"
-						ColumnSpacing="2"
+						HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+						VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+						Background="{TemplateBinding Background}"
 						TabFocusNavigation="Once"
 						XYFocusKeyboardNavigation="Enabled">
 						<Grid.ColumnDefinitions>
@@ -50,6 +64,7 @@
 						<local:BreadcrumbBarItem
 							x:Name="PART_EllipsisBreadcrumbBarItem"
 							Grid.Column="1"
+							Margin="{StaticResource BreadcrumbBarItemMargin}"
 							AutomationProperties.AccessibilityView="Content"
 							IsEllipsis="True"
 							Visibility="Collapsed">
@@ -59,6 +74,7 @@
 						<ItemsRepeater
 							x:Name="PART_MainItemsRepeater"
 							Grid.Column="2"
+							Margin="{StaticResource BreadcrumbBarItemMargin}"
 							ItemTemplate="{Binding ItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
 							ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
 
@@ -85,7 +101,7 @@
 		<Setter Property="HorizontalAlignment" Value="Stretch" />
 		<Setter Property="HorizontalContentAlignment" Value="Center" />
 		<Setter Property="VerticalAlignment" Value="Stretch" />
-		<Setter Property="VerticalContentAlignment" Value="Center" />
+		<Setter Property="VerticalContentAlignment" Value="Stretch" />
 
 		<Setter Property="FocusVisualMargin" Value="1" />
 		<Setter Property="IsTabStop" Value="False" />
@@ -95,7 +111,6 @@
 				<ControlTemplate TargetType="local:BreadcrumbBarItem">
 					<Grid
 						x:Name="PART_LayoutRoot"
-						ColumnSpacing="2"
 						TabFocusNavigation="Once"
 						XYFocusKeyboardNavigation="Enabled">
 						<Grid.ColumnDefinitions>
@@ -107,7 +122,7 @@
 						<Button
 							x:Name="PART_ItemContentButton"
 							Padding="{TemplateBinding Padding}"
-							VerticalAlignment="Stretch"
+							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 							AutomationProperties.AccessibilityView="Raw"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"
@@ -151,8 +166,9 @@
 						<Button
 							x:Name="PART_ItemChevronButton"
 							Grid.Column="1"
+							Margin="{StaticResource BreadcrumbBarItemMargin}"
 							Padding="{StaticResource BreadcrumbBarChevronPadding}"
-							VerticalAlignment="Stretch"
+							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 							AutomationProperties.AccessibilityView="Content"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"

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

@@ -13,7 +13,6 @@ public partial class BreadcrumbBarLayout : NonVirtualizingLayout
 		// Fields
 
 		private readonly WeakReference<BreadcrumbBar>? _ownerRef;
-		private readonly double _spacing = 0d;
 
 		private Size _availableSize;
 		private BreadcrumbBarItem? _ellipsisButton = null;
@@ -24,10 +23,9 @@ public partial class BreadcrumbBarLayout : NonVirtualizingLayout
 		public int IndexAfterEllipsis { get; private set; }
 		public int VisibleItemsCount { get; private set; }
 
-		public BreadcrumbBarLayout(BreadcrumbBar breadcrumb, double spacing)
+		public BreadcrumbBarLayout(BreadcrumbBar breadcrumb)
 		{
 			_ownerRef = new(breadcrumb);
-			_spacing = spacing;
 		}
 
 		protected override Size MeasureOverride(NonVirtualizingLayoutContext context, Size availableSize)
@@ -79,7 +77,6 @@ protected override Size ArrangeOverride(NonVirtualizingLayoutContext context, Si
 						breadcrumbItem.Arrange(new Rect(accumulatedWidths, 0, breadcrumbItem.DesiredSize.Width, breadcrumbItem.DesiredSize.Height));
 
 						accumulatedWidths += breadcrumbItem.DesiredSize.Width;
-						accumulatedWidths += _spacing;
 
 						VisibleItemsCount++;
 					}
@@ -95,9 +92,9 @@ protected override Size ArrangeOverride(NonVirtualizingLayoutContext context, Si
 		private int GetFirstIndexToRender(NonVirtualizingLayoutContext context)
 		{
 			var itemCount = context.Children.Count;
-			var accumulatedWidth = _spacing;
+			var accumulatedWidth = 0d;
 
-			// Go through all items from the end
+			// Go through all items from the last item
 			for (int index = itemCount - 1; index >= 0; index--)
 			{
 				var newAccumulatedWidth = accumulatedWidth + context.Children[index].DesiredSize.Width;

src/Files.App.Controls/Omnibar/Omnibar.Properties.cs

@@ -2,13 +2,6 @@
 // Licensed under the MIT License.
 
 using CommunityToolkit.WinUI;
-using Microsoft.UI.Xaml;
-using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Media;
-using Microsoft.UI.Xaml.Markup;
-using Microsoft.UI.Xaml.Shapes;
-using System.Linq;
-using System.Collections.Generic;
 
 namespace Files.App.Controls
 {
@@ -19,5 +12,8 @@ public partial class Omnibar
 
 		[GeneratedDependencyProperty]
 		public partial OmnibarMode? CurrentSelectedMode { get; set; }
+
+		[GeneratedDependencyProperty]
+		public partial Thickness AutoSuggestBoxPadding { get; set; }
 	}
 }

src/Files.App.Controls/Omnibar/Omnibar.cs

@@ -1,73 +1,60 @@
 // Copyright (c) Files Community
 // Licensed under the MIT License.
 
-using CommunityToolkit.WinUI;
-using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Markup;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Media.Animation;
 using Microsoft.UI.Xaml.Shapes;
-using Microsoft.UI.Xaml.Input;
-using Microsoft.UI;
-using Windows.ApplicationModel.Contacts;
 
 namespace Files.App.Controls
 {
 	// Content
 	[ContentProperty(Name = nameof(Modes))]
-	// Template parts
-	[TemplatePart(Name = "PART_ModesHostGrid", Type = typeof(Grid))]
-	// Visual states
-	[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
-	[TemplateVisualState(Name = "Normal", GroupName = "FocusStates")]
 	public partial class Omnibar : Control
 	{
-		private const string ModesHostGrid = "PART_ModesHostGrid";
-		private const string AutoSuggestPopup = "PART_AutoSuggestPopup";
-		private const string AutoSuggestBoxBorder = "PART_AutoSuggestBoxBorder";
+		// Constants
+
+		private const string TemplatePartName_ModesHostGrid = "PART_ModesHostGrid";
+
+		// Fields
 
 		private Grid? _modesHostGrid;
-		private Popup? _autoSuggestPopup;
-		private Border? _autoSuggestBoxBorder;
-		private bool _isFocused;
-		private bool _stillHasFocus;
+
+		// Constructor
 
 		public Omnibar()
 		{
 			DefaultStyleKey = typeof(Omnibar);
 
-			Modes ??= [];
+			Modes = [];
+			AutoSuggestBoxPadding = new(0, 0, 0, 0);
 		}
 
+		// Methods
+
 		protected override void OnApplyTemplate()
 		{
-			_modesHostGrid = GetTemplateChild(ModesHostGrid) as Grid
-				?? throw new MissingFieldException($"Could not find {ModesHostGrid} in the given {nameof(Omnibar)}'s style.");
-			_autoSuggestPopup = GetTemplateChild(AutoSuggestPopup) as Popup
-				?? throw new MissingFieldException($"Could not find {AutoSuggestPopup} in the given {nameof(Omnibar)}'s style.");
-			_autoSuggestBoxBorder = GetTemplateChild(AutoSuggestBoxBorder) as Border
-				?? throw new MissingFieldException($"Could not find {AutoSuggestBoxBorder} in the given {nameof(Omnibar)}'s style.");
-
-			if (Modes is null)
-				return;
+			base.OnApplyTemplate();
+
+			_modesHostGrid = GetTemplateChild(TemplatePartName_ModesHostGrid) as Grid
+				?? throw new MissingFieldException($"Could not find {TemplatePartName_ModesHostGrid} in the given {nameof(Omnibar)}'s style.");
 
-			// Add shadow to the popup and set the proper width
-			_autoSuggestBoxBorder!.Translation = new(0, 0, 32);
-			_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
+			PopulateModes();
+		}
+
+		public void PopulateModes()
+		{
+			if (Modes is null || _modesHostGrid is null)
+				return;
 
 			// Populate the modes
 			foreach (var mode in Modes)
 			{
 				// Insert a divider
 				if (_modesHostGrid.Children.Count is not 0)
 				{
-					var divider = new Rectangle()
-					{
-						Fill = (SolidColorBrush)Application.Current.Resources["DividerStrokeColorDefaultBrush"],
-						Height = 20,
-						Margin = new(2,0,2,0),
-						Width = 1,
-					};
+					var divider = new OmnibarModeSeparator();
 
 					_modesHostGrid.ColumnDefinitions.Add(new() { Width = GridLength.Auto });
 					Grid.SetColumn(divider, _modesHostGrid.Children.Count);
@@ -78,103 +65,45 @@ protected override void OnApplyTemplate()
 				_modesHostGrid.ColumnDefinitions.Add(new() { Width = GridLength.Auto });
 				Grid.SetColumn(mode, _modesHostGrid.Children.Count);
 				_modesHostGrid.Children.Add(mode);
-				mode.Host = this;
+				mode.SetOwner(this);
 			}
-
-			_modesHostGrid.SizeChanged += ModesHostGrid_SizeChanged;
-
-			GotFocus += Omnibar_GotFocus;
-			LostFocus += Omnibar_LostFocus;
-			LosingFocus += Omnibar_LosingFocus;
-
-			UpdateVisualStates();
-
-			base.OnApplyTemplate();
 		}
 
-		// Methods
-
 		internal void ChangeMode(OmnibarMode modeToExpand)
 		{
 			if (_modesHostGrid is null || Modes is null)
-				throw new NullReferenceException();
-
-			// Reset
-			foreach (var column in _modesHostGrid.ColumnDefinitions)
-				column.Width = GridLength.Auto;
-			foreach (var mode in Modes)
-				VisualStateManager.GoToState(mode, "Unfocused", true);
-
-			// Expand the given mode
-			VisualStateManager.GoToState(modeToExpand, "Focused", true);
-			_modesHostGrid.ColumnDefinitions[_modesHostGrid.Children.IndexOf(modeToExpand)].Width = new(1, GridUnitType.Star);
-
-			CurrentSelectedMode = modeToExpand;
-
-			UpdateVisualStates();
-		}
-
-		private void UpdateVisualStates()
-		{
-			VisualStateManager.GoToState(this, _isFocused ? "Focused" : "Normal", true);
+				return;
 
-			if (CurrentSelectedMode is not null && _autoSuggestPopup is not null)
-			{
-				// Close anyway
-				if (_autoSuggestPopup.IsOpen && CurrentSelectedMode.SuggestionItemsSource is null)
-					VisualStateManager.GoToState(this, "PopupClosed", true);
+			var index = _modesHostGrid.Children.IndexOf(modeToExpand);
 
-				// Decide open or close
-				if (_isFocused != _autoSuggestPopup.IsOpen)
-					VisualStateManager.GoToState(this, _isFocused && CurrentSelectedMode.SuggestionItemsSource is not null ? "PopupOpened" : "PopupClosed", true);
-			}
+			// Add the reposition transition to the old item
+			//foreach (var mode in Modes)
+			//	mode.Transitions = [ new RepositionThemeTransition() ];
 
 			if (CurrentSelectedMode is not null)
-				VisualStateManager.GoToState(
-					CurrentSelectedMode,
-					_isFocused
-						? "Focused"
-						: CurrentSelectedMode.ContentOnInactive is null
-							? "CurrentUnfocusedWithoutInactiveMode"
-							: "CurrentUnfocusedWithInactiveMode",
-					true);
-		}
+				VisualStateManager.GoToState(CurrentSelectedMode, "Unfocused", true);
 
-		// Events
+			// Reset
+			foreach (var column in _modesHostGrid.ColumnDefinitions)
+				column.Width = GridLength.Auto;
 
-		private void ModesHostGrid_SizeChanged(object sender, SizeChangedEventArgs e)
-		{
-			_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
-		}
+			// Expand the given mode
+			_modesHostGrid.ColumnDefinitions[index].Width = new(1, GridUnitType.Star);
 
-		private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
-		{
-			_isFocused = true;
-			UpdateVisualStates();
-		}
+			VisualStateManager.GoToState(modeToExpand, "Focused", true);
 
-		private void Omnibar_LosingFocus(UIElement sender, LosingFocusEventArgs args)
-		{
-			// Ignore when user clicks on the TextBox or the button area of an OmnibarMode, Omnibar still has focus anyway
-			if (args.NewFocusedElement?.GetType() is not { } focusedType ||
-				focusedType == typeof(TextBox) ||
-				focusedType == typeof(OmnibarMode) ||
-				focusedType == typeof(Omnibar))
-			{
-				_stillHasFocus = true;
-			}
-		}
+			// Remove it again
+			//foreach (var mode in Modes)
+			//	mode.Transitions.Clear();
 
-		private void Omnibar_LostFocus(object sender, RoutedEventArgs e)
-		{
-			if (_stillHasFocus)
-			{
-				_stillHasFocus = false;
-				return;
-			}
+			// Set the correct AutoSuggestBox cursor position
+			var itemCount = Modes.Count;
+			var itemIndex = Modes.IndexOf(modeToExpand);
+			var leftPadding = (itemIndex + 1) * modeToExpand.ActualWidth + 9 * itemIndex + 4;
+			var rightPadding = (itemCount - itemIndex - 1) * modeToExpand.ActualWidth + 9 * (itemCount - itemIndex - 1) + 8;
+			AutoSuggestBoxPadding = new(leftPadding, 5, rightPadding, 6);
 
-			_isFocused = false;
-			UpdateVisualStates();
+			CurrentSelectedMode = modeToExpand;
 		}
 	}
 }