Add transition and use dummy data for auto suggestion

Author: 0x5bfa

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

@@ -83,7 +83,7 @@ protected override void OnApplyTemplate()
 			_modesHostGrid.SizeChanged += _modesHostGrid_SizeChanged;
 
 			var parentElement = this.FindAscendant<FrameworkElement>()!;
-			parentElement.PointerPressed += ParentElement_PointerPressed;
+			//parentElement.PointerPressed += ParentElement_PointerPressed;
 			GotFocus += Omnibar_GotFocus;
 			LostFocus += Omnibar_LostFocus;
 

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

@@ -13,8 +13,8 @@
 		</ResourceDictionary>
 	</ResourceDictionary.ThemeDictionaries>-->
 
-	<x:Double x:Key="OmnibarDefaultHeight">36</x:Double>
-	<CornerRadius x:Key="OmnibarDefaultCornerRadius">18</CornerRadius>
+	<x:Double x:Key="OmnibarDefaultHeight">38</x:Double>
+	<CornerRadius x:Key="OmnibarDefaultCornerRadius">19</CornerRadius>
 	<Thickness x:Key="OmnibarFocusedBorderThickness">2</Thickness>
 	<Thickness x:Key="OmnibarUnfocusedBorderThickness">1</Thickness>
 	<Thickness x:Key="OmnibarUnfocusedRootPadding">1</Thickness>
@@ -26,11 +26,10 @@
 
 	<Style x:Key="DefaultOmnibarStyle" TargetType="local:Omnibar">
 		<Setter Property="IsTabStop" Value="True" />
-		<Setter Property="Height" Value="{StaticResource OmnibarDefaultHeight}" />
 		<Setter Property="UseSystemFocusVisuals" Value="True" />
 		<Setter Property="HorizontalAlignment" Value="Stretch" />
 		<Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
-		<Setter Property="Padding" Value="{ThemeResource OmnibarUnfocusedRootPadding}" />
+		<Setter Property="Padding" Value="{StaticResource OmnibarUnfocusedRootPadding}" />
 		<Setter Property="BorderBrush" Value="{ThemeResource CircleElevationBorderBrush}" />
 		<Setter Property="BorderThickness" Value="{StaticResource OmnibarUnfocusedBorderThickness}" />
 		<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -45,11 +44,12 @@
 							<RowDefinition Height="Auto" />
 							<RowDefinition Height="Auto" />
 						</Grid.RowDefinitions>
-						<!--  input area  -->
+						<!--  Input area  -->
 						<Grid
 							x:Name="PART_ModesHostGrid"
 							Grid.Row="0"
-							Margin="{TemplateBinding Padding}"
+							Height="{StaticResource OmnibarDefaultHeight}"
+							Padding="{TemplateBinding Padding}"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"
 							BorderThickness="{TemplateBinding BorderThickness}"
@@ -76,7 +76,8 @@
 								<ListView
 									HorizontalAlignment="Stretch"
 									IsItemClickEnabled="True"
-									ItemTemplate="{Binding CurrentActiveMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
+									ItemTemplate="{Binding CurrentActiveMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
+									ItemsSource="{Binding CurrentActiveMode.SuggestionItemsSource, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
 
 							</Border>
 						</Popup>
@@ -94,6 +95,17 @@
 								</VisualState>
 							</VisualStateGroup>
 
+							<VisualStateGroup x:Name="PopupVisibilityStates">
+								<VisualState x:Name="Closed" />
+								<VisualState x:Name="Opened">
+									<VisualState.Setters>
+										<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>
+
 						</VisualStateManager.VisualStateGroups>
 					</Grid>
 				</ControlTemplate>

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

@@ -32,6 +32,9 @@ public partial class OmnibarMode
 		[GeneratedDependencyProperty]
 		public partial FrameworkElement? IconOnInactive { get; set; }
 
+		[GeneratedDependencyProperty]
+		public partial object? SuggestionItemsSource { get; set; }
+
 		[GeneratedDependencyProperty]
 		public partial DataTemplate? SuggestionItemTemplate { get; set; }
 

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

@@ -71,30 +71,40 @@ private void UpdateVisualStates()
 
 		private void OmnibarMode_PointerEntered(object sender, PointerRoutedEventArgs e)
 		{
+			if (Host!.CurrentActiveMode == this)
+				return;
+
 			_isHoveredOver = true;
 			_isPressed = false;
 			UpdateVisualStates();
 		}
 
 		private void OmnibarMode_PointerPressed(object sender, PointerRoutedEventArgs e)
 		{
+			if (Host!.CurrentActiveMode == this)
+				return;
+
 			_isHoveredOver = false;
 			_isPressed = true;
 			UpdateVisualStates();
 		}
 
 		private void OmnibarMode_PointerReleased(object sender, PointerRoutedEventArgs e)
 		{
+			if (Host!.CurrentActiveMode == this)
+				return;
+
 			_isHoveredOver = true;
 			_isPressed = false;
 			UpdateVisualStates();
-
-			if (Host!.CurrentActiveMode == this)
-				Host.ChangeExpandedMode(this);
+			Host.ChangeExpandedMode(this);
 		}
 
 		private void OmnibarMode_PointerExited(object sender, PointerRoutedEventArgs e)
 		{
+			//if (Host!.CurrentActiveMode == this)
+			//	return;
+
 			_isHoveredOver = _isPressed = false;
 			UpdateVisualStates();
 		}

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

@@ -19,6 +19,13 @@
 		<Setter Property="CornerRadius" Value="{StaticResource OmnibarDefaultCornerRadius}" />
 		<Setter Property="VerticalAlignment" Value="Stretch" />
 		<Setter Property="IsFocusEngagementEnabled" Value="True" />
+		<Setter Property="Transitions">
+			<Setter.Value>
+				<TransitionCollection>
+					<RepositionThemeTransition />
+				</TransitionCollection>
+			</Setter.Value>
+		</Setter>
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:OmnibarMode">

tests/Files.App.UITests/Data/DummyItem1.cs

@@ -0,0 +1,7 @@
+// Copyright (c) Files Community
+// Licensed under the MIT License.
+
+namespace Files.App.UITests.Data
+{
+	internal record DummyItem1(string Title, string Description, string HotKeys);
+}

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

@@ -5,6 +5,7 @@
 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 	xmlns:controls="using:Files.App.Controls"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	xmlns:data="using:Files.App.UITests.Data"
 	xmlns:local="using:Files.App.UITests.Views"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	mc:Ignorable="d">
@@ -68,6 +69,7 @@
 				<controls:OmnibarMode
 					HideContentOnInactive="True"
 					IsDefault="True"
+					SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
 					Text="Path..."
 					TextPlaceholder="Enter text..."
 					ToolTip="Path">
@@ -78,8 +80,8 @@
 						<controls:ThemedIcon Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
 					</controls:OmnibarMode.IconOnInactive>
 					<controls:OmnibarMode.SuggestionItemTemplate>
-						<DataTemplate>
-							<TextBlock Text="Text here..." />
+						<DataTemplate x:DataType="data:DummyItem1">
+							<TextBlock Text="{x:Bind Title}" />
 						</DataTemplate>
 					</controls:OmnibarMode.SuggestionItemTemplate>
 				</controls:OmnibarMode>

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

@@ -1,16 +1,28 @@
 // Copyright (c) Files Community
 // Licensed under the MIT License.
 
+using Files.App.UITests.Data;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using System.Collections.ObjectModel;
 
 namespace Files.App.UITests.Views
 {
 	public sealed partial class OmnibarPage : Page
 	{
+		private ObservableCollection<DummyItem1> DummyItems1 = [];
+
 		public OmnibarPage()
 		{
 			InitializeComponent();
+
+			DummyItems1 =
+			[
+				new("Title", "Description", "HotKeys"),
+				new("Title", "Description", "HotKeys"),
+				new("Title", "Description", "HotKeys"),
+				new("Title", "Description", "HotKeys"),
+			];
 		}
 	}
 }