Initial popup impl for auto-suggestion

Author: 0x5bfa

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

@@ -22,8 +22,12 @@ namespace Files.App.Controls
 	public partial class Omnibar : Control
 	{
 		private const string ModesHostGrid = "PART_ModesHostGrid";
+		private const string AutoSuggestPopup = "PART_AutoSuggestPopup";
+		private const string AutoSuggestBoxBorder = "PART_AutoSuggestBoxBorder";
 
 		private Grid? _modesHostGrid;
+		private Popup? _autoSuggestPopup;
+		private Border? _autoSuggestBoxBorder;
 		private bool _wasAscendantFocused;
 		private bool _isFocused;
 
@@ -38,6 +42,10 @@ 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;
@@ -68,9 +76,10 @@ protected override void OnApplyTemplate()
 				mode.Host = this;
 			}
 
+			_modesHostGrid.SizeChanged += _modesHostGrid_SizeChanged;
+
 			var parentElement = this.FindAscendant<FrameworkElement>()!;
 			parentElement.PointerPressed += ParentElement_PointerPressed;
-
 			GotFocus += Omnibar_GotFocus;
 			LostFocus += Omnibar_LostFocus;
 
@@ -113,6 +122,11 @@ private void UpdateVisualStates()
 
 		// Events
 
+		private void _modesHostGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+		{
+			_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
+		}
+
 		private void ParentElement_PointerPressed(object sender, PointerRoutedEventArgs e)
 		{
 			// Lost focus
@@ -137,12 +151,16 @@ private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
 
 			_isFocused = true;
 			UpdateVisualStates();
+
+			_autoSuggestPopup!.IsOpen = true;
 		}
 
 		private void Omnibar_LostFocus(object sender, RoutedEventArgs e)
 		{
 			_isFocused = _wasAscendantFocused = false;
 			UpdateVisualStates();
+
+			_autoSuggestPopup!.IsOpen = false;
 		}
 	}
 }

src/Files.App.Controls/Omnibar/Omnibar.xaml

@@ -40,24 +40,57 @@
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:Omnibar">
-					<Grid
-						x:Name="PART_RootGrid"
-						Padding="{TemplateBinding Padding}"
-						Background="{TemplateBinding Background}"
-						BorderBrush="{TemplateBinding BorderBrush}"
-						BorderThickness="{TemplateBinding BorderThickness}"
-						CornerRadius="{TemplateBinding CornerRadius}">
-						<Grid x:Name="PART_ModesHostGrid" />
+					<Grid x:Name="PART_RootGrid">
+						<Grid.RowDefinitions>
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="Auto" />
+						</Grid.RowDefinitions>
+						<!--  input area  -->
+						<Grid
+							x:Name="PART_ModesHostGrid"
+							Grid.Row="0"
+							Margin="{TemplateBinding Padding}"
+							Background="{TemplateBinding Background}"
+							BorderBrush="{TemplateBinding BorderBrush}"
+							BorderThickness="{TemplateBinding BorderThickness}"
+							CornerRadius="{TemplateBinding CornerRadius}" />
+
+						<!--  Auto-suggest box area  -->
+						<Popup
+							x:Name="PART_AutoSuggestPopup"
+							Grid.Row="1"
+							HorizontalAlignment="Stretch"
+							ShouldConstrainToRootBounds="False">
+
+							<Border
+								x:Name="PART_AutoSuggestBoxBorder"
+								Width="460"
+								Padding="8"
+								HorizontalAlignment="Stretch"
+								Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
+								BorderBrush="{ThemeResource SurfaceStrokeColorFlyoutBrush}"
+								BorderThickness="1"
+								CornerRadius="{ThemeResource OverlayCornerRadius}">
+								<Border.Shadow>
+									<ThemeShadow />
+								</Border.Shadow>
+
+								<ListView HorizontalAlignment="Stretch">
+									<ListViewItem />
+									<ListViewItem />
+								</ListView>
+							</Border>
+						</Popup>
 
 						<VisualStateManager.VisualStateGroups>
 
 							<VisualStateGroup x:Name="PointerStates">
 								<VisualState x:Name="Normal" />
 								<VisualState x:Name="Focused">
 									<VisualState.Setters>
-										<Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
-										<Setter Target="PART_RootGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
-										<Setter Target="PART_RootGrid.Margin" Value="-1" />
+										<Setter Target="PART_ModesHostGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
+										<Setter Target="PART_ModesHostGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
+										<Setter Target="PART_ModesHostGrid.Margin" Value="-1" />
 									</VisualState.Setters>
 								</VisualState>
 							</VisualStateGroup>

tests/Files.App.UITests/Views/OmnibarPage.xaml

@@ -77,6 +77,11 @@
 					<controls:OmnibarMode.IconOnInactive>
 						<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
 					</controls:OmnibarMode.IconOnInactive>
+					<controls:OmnibarMode.SuggestionItemTemplate>
+						<DataTemplate>
+							<TextBlock Text="Text here..." />
+						</DataTemplate>
+					</controls:OmnibarMode.SuggestionItemTemplate>
 				</controls:OmnibarMode>
 
 				<controls:OmnibarMode