Skip to content

Commit bdf0973

Browse files
0x5bfa0x5bfa
committed
Improved the implementation
1 parent 851e7ae commit bdf0973

File tree

11 files changed

+273
-69
lines changed

11 files changed

+273
-69
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,23 @@ public partial class Omnibar
1616
{
1717
[GeneratedDependencyProperty]
1818
public partial IList<OmnibarMode>? Modes { get; set; }
19+
20+
[GeneratedDependencyProperty]
21+
public partial OmnibarMode? CurrentActiveMode { get; set; }
22+
23+
[GeneratedDependencyProperty]
24+
public partial FrameworkElement? DefaultInactiveMode { get; set; }
25+
26+
partial void OnDefaultInactiveModeChanged(FrameworkElement? newValue)
27+
{
28+
if (Modes is null)
29+
return;
30+
31+
foreach (var mode in Modes)
32+
{
33+
//if (mode.UseDefaultInactiveMode)
34+
// mode.ContentOnInactive = newValue;
35+
}
36+
}
1937
}
2038
}

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

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright (c) Files Community
22
// Licensed under the MIT License.
33

4+
using CommunityToolkit.WinUI;
45
using Microsoft.UI.Xaml;
56
using Microsoft.UI.Xaml.Controls;
67
using Microsoft.UI.Xaml.Media;
@@ -17,12 +18,16 @@ namespace Files.App.Controls
1718
[TemplatePart(Name = "PART_ModesHostGrid", Type = typeof(Grid))]
1819
// Visual states
1920
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
20-
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
21+
[TemplateVisualState(Name = "Normal", GroupName = "FocusStates")]
2122
public partial class Omnibar : Control
2223
{
2324
private const string ModesHostGrid = "PART_ModesHostGrid";
25+
private const string AutoSuggestPopup = "PART_AutoSuggestPopup";
26+
private const string AutoSuggestBoxBorder = "PART_AutoSuggestBoxBorder";
2427

2528
private Grid? _modesHostGrid;
29+
private Popup? _autoSuggestPopup;
30+
private Border? _autoSuggestBoxBorder;
2631
private bool _isFocused;
2732

2833
public Omnibar()
@@ -36,11 +41,19 @@ protected override void OnApplyTemplate()
3641
{
3742
_modesHostGrid = GetTemplateChild(ModesHostGrid) as Grid
3843
?? throw new MissingFieldException($"Could not find {ModesHostGrid} in the given {nameof(Omnibar)}'s style.");
44+
_autoSuggestPopup = GetTemplateChild(AutoSuggestPopup) as Popup
45+
?? throw new MissingFieldException($"Could not find {AutoSuggestPopup} in the given {nameof(Omnibar)}'s style.");
46+
_autoSuggestBoxBorder = GetTemplateChild(AutoSuggestBoxBorder) as Border
47+
?? throw new MissingFieldException($"Could not find {AutoSuggestBoxBorder} in the given {nameof(Omnibar)}'s style.");
3948

4049
if (Modes is null)
4150
return;
4251

43-
// Populate the modes1
52+
// Add shadow to the popup and set the proper width
53+
_autoSuggestBoxBorder!.Translation = new(0, 0, 32);
54+
_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
55+
56+
// Populate the modes
4457
foreach (var mode in Modes)
4558
{
4659
// Insert a divider
@@ -63,9 +76,14 @@ protected override void OnApplyTemplate()
6376
_modesHostGrid.ColumnDefinitions.Add(new() { Width = GridLength.Auto });
6477
Grid.SetColumn(mode, _modesHostGrid.Children.Count);
6578
_modesHostGrid.Children.Add(mode);
66-
mode.Host = _modesHostGrid;
79+
mode.Host = this;
80+
81+
//if (mode.UseDefaultInactiveMode)
82+
// mode.ContentOnInactive = DefaultInactiveMode;
6783
}
6884

85+
_modesHostGrid.SizeChanged += _modesHostGrid_SizeChanged;
86+
6987
GotFocus += Omnibar_GotFocus;
7088
LostFocus += Omnibar_LostFocus;
7189

@@ -74,28 +92,60 @@ protected override void OnApplyTemplate()
7492
base.OnApplyTemplate();
7593
}
7694

77-
// Private methods
95+
// Methods
96+
97+
internal void ChangeExpandedMode(OmnibarMode modeToExpand)
98+
{
99+
if (_modesHostGrid is null || Modes is null)
100+
throw new NullReferenceException();
101+
102+
// Reset
103+
foreach (var column in _modesHostGrid.ColumnDefinitions)
104+
column.Width = GridLength.Auto;
105+
foreach (var mode in Modes)
106+
{
107+
VisualStateManager.GoToState(mode, "Unfocused", true);
108+
}
109+
110+
// Expand the given mode
111+
VisualStateManager.GoToState(modeToExpand, "Focused", true);
112+
_modesHostGrid.ColumnDefinitions[_modesHostGrid.Children.IndexOf(modeToExpand)].Width = new(1, GridUnitType.Star);
113+
114+
CurrentActiveMode = modeToExpand;
115+
}
78116

79117
private void UpdateVisualStates()
80118
{
81119
VisualStateManager.GoToState(
82120
this,
83121
_isFocused ? "Focused" : "Normal",
84122
true);
123+
124+
if (CurrentActiveMode is not null)
125+
VisualStateManager.GoToState(CurrentActiveMode, _isFocused ? "Focused" : "CurrentUnfocused", true);
85126
}
86127

87128
// Events
88129

130+
private void _modesHostGrid_SizeChanged(object sender, SizeChangedEventArgs e)
131+
{
132+
_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
133+
}
134+
89135
private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
90136
{
91137
_isFocused = true;
92138
UpdateVisualStates();
139+
140+
_autoSuggestPopup!.IsOpen = true;
93141
}
94142

95143
private void Omnibar_LostFocus(object sender, RoutedEventArgs e)
96144
{
97145
_isFocused = false;
98146
UpdateVisualStates();
147+
148+
_autoSuggestPopup!.IsOpen = false;
99149
}
100150
}
101151
}

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

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
</ResourceDictionary>
1414
</ResourceDictionary.ThemeDictionaries>-->
1515

16-
<x:Double x:Key="OmnibarDefaultHeight">36</x:Double>
17-
<CornerRadius x:Key="OmnibarDefaultCornerRadius">18</CornerRadius>
16+
<x:Double x:Key="OmnibarDefaultHeight">38</x:Double>
17+
<CornerRadius x:Key="OmnibarDefaultCornerRadius">19</CornerRadius>
1818
<Thickness x:Key="OmnibarFocusedBorderThickness">2</Thickness>
1919
<Thickness x:Key="OmnibarUnfocusedBorderThickness">1</Thickness>
2020
<Thickness x:Key="OmnibarUnfocusedRootPadding">1</Thickness>
@@ -26,11 +26,10 @@
2626

2727
<Style x:Key="DefaultOmnibarStyle" TargetType="local:Omnibar">
2828
<Setter Property="IsTabStop" Value="True" />
29-
<Setter Property="Height" Value="{StaticResource OmnibarDefaultHeight}" />
3029
<Setter Property="UseSystemFocusVisuals" Value="True" />
3130
<Setter Property="HorizontalAlignment" Value="Stretch" />
3231
<Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
33-
<Setter Property="Padding" Value="{ThemeResource OmnibarUnfocusedRootPadding}" />
32+
<Setter Property="Padding" Value="{StaticResource OmnibarUnfocusedRootPadding}" />
3433
<Setter Property="BorderBrush" Value="{ThemeResource CircleElevationBorderBrush}" />
3534
<Setter Property="BorderThickness" Value="{StaticResource OmnibarUnfocusedBorderThickness}" />
3635
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -40,24 +39,69 @@
4039
<Setter Property="Template">
4140
<Setter.Value>
4241
<ControlTemplate TargetType="local:Omnibar">
43-
<Grid
44-
x:Name="PART_RootGrid"
45-
Padding="{TemplateBinding Padding}"
46-
Background="{TemplateBinding Background}"
47-
BorderBrush="{TemplateBinding BorderBrush}"
48-
BorderThickness="{TemplateBinding BorderThickness}"
49-
CornerRadius="{TemplateBinding CornerRadius}">
50-
<Grid x:Name="PART_ModesHostGrid" />
42+
<Grid x:Name="PART_RootGrid">
43+
<Grid.RowDefinitions>
44+
<RowDefinition Height="Auto" />
45+
<RowDefinition Height="Auto" />
46+
</Grid.RowDefinitions>
47+
<!-- Input area -->
48+
<Grid
49+
x:Name="PART_ModesHostGrid"
50+
Grid.Row="0"
51+
Height="{StaticResource OmnibarDefaultHeight}"
52+
Padding="{TemplateBinding Padding}"
53+
Background="{TemplateBinding Background}"
54+
BorderBrush="{TemplateBinding BorderBrush}"
55+
BorderThickness="{TemplateBinding BorderThickness}"
56+
CornerRadius="{TemplateBinding CornerRadius}" />
57+
58+
<!-- Auto-suggest box area -->
59+
<Popup
60+
x:Name="PART_AutoSuggestPopup"
61+
Grid.Row="1"
62+
HorizontalAlignment="Stretch"
63+
ShouldConstrainToRootBounds="False">
64+
65+
<Border
66+
x:Name="PART_AutoSuggestBoxBorder"
67+
Padding="8"
68+
Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
69+
BorderBrush="{ThemeResource SurfaceStrokeColorFlyoutBrush}"
70+
BorderThickness="1"
71+
CornerRadius="{ThemeResource OverlayCornerRadius}">
72+
<Border.Shadow>
73+
<ThemeShadow />
74+
</Border.Shadow>
75+
76+
<ListView
77+
HorizontalAlignment="Stretch"
78+
IsItemClickEnabled="True"
79+
ItemTemplate="{Binding CurrentActiveMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
80+
ItemsSource="{Binding CurrentActiveMode.SuggestionItemsSource, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
81+
82+
</Border>
83+
</Popup>
5184

5285
<VisualStateManager.VisualStateGroups>
5386

5487
<VisualStateGroup x:Name="PointerStates">
5588
<VisualState x:Name="Normal" />
5689
<VisualState x:Name="Focused">
5790
<VisualState.Setters>
58-
<Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
59-
<Setter Target="PART_RootGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
60-
<Setter Target="PART_RootGrid.Margin" Value="-1" />
91+
<Setter Target="PART_ModesHostGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
92+
<Setter Target="PART_ModesHostGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
93+
<Setter Target="PART_ModesHostGrid.Margin" Value="-1" />
94+
</VisualState.Setters>
95+
</VisualState>
96+
</VisualStateGroup>
97+
98+
<VisualStateGroup x:Name="PopupVisibilityStates">
99+
<VisualState x:Name="Closed" />
100+
<VisualState x:Name="Opened">
101+
<VisualState.Setters>
102+
<Setter Target="PART_ModesHostGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
103+
<Setter Target="PART_ModesHostGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
104+
<Setter Target="PART_ModesHostGrid.Margin" Value="-1" />
61105
</VisualState.Setters>
62106
</VisualState>
63107
</VisualStateGroup>

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,33 @@ public partial class OmnibarMode
1818
public partial string? Text { get; set; }
1919

2020
[GeneratedDependencyProperty]
21-
public partial bool HideContentOnInactive { get; set; }
21+
public partial string? TextPlaceholder { get; set; }
22+
23+
[GeneratedDependencyProperty]
24+
public partial string? ToolTip { get; set; }
25+
26+
[GeneratedDependencyProperty]
27+
public partial bool UseDefaultInactiveMode { get; set; }
28+
29+
[GeneratedDependencyProperty]
30+
public partial FrameworkElement? ContentOnInactive { get; set; }
2231

2332
[GeneratedDependencyProperty]
2433
public partial FrameworkElement? IconOnActive { get; set; }
2534

2635
[GeneratedDependencyProperty]
2736
public partial FrameworkElement? IconOnInactive { get; set; }
2837

38+
[GeneratedDependencyProperty]
39+
public partial object? SuggestionItemsSource { get; set; }
40+
2941
[GeneratedDependencyProperty]
3042
public partial DataTemplate? SuggestionItemTemplate { get; set; }
3143

3244
[GeneratedDependencyProperty]
3345
public partial bool IsDefault { get; set; }
3446

3547
[GeneratedDependencyProperty]
36-
internal partial Grid? Host { get; set; }
37-
38-
partial void OnHostChanged(Grid? newValue)
39-
{
40-
UpdateVisualStates();
41-
}
48+
internal partial Omnibar? Host { get; set; }
4249
}
4350
}

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

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,19 @@
1010

1111
namespace Files.App.Controls
1212
{
13+
// Template parts
14+
[TemplatePart(Name = "PART_ModeClickBorder", Type = typeof(Border))]
15+
[TemplatePart(Name = "PART_ModeIconPresenter", Type = typeof(ContentPresenter))]
16+
[TemplatePart(Name = "PART_InputTextBox", Type = typeof(TextBox))]
17+
// Visual states
18+
[TemplateVisualState(GroupName = "CommonStates", Name = "PointerNormal")]
19+
[TemplateVisualState(GroupName = "CommonStates", Name = "PointerOver")]
20+
[TemplateVisualState(GroupName = "CommonStates", Name = "PointerPressed")]
21+
[TemplateVisualState(GroupName = "CommonStates", Name = "Focused")]
22+
[TemplateVisualState(GroupName = "InputVisibilityStates", Name = "Collapsed")]
23+
[TemplateVisualState(GroupName = "InputVisibilityStates", Name = "Visible")]
24+
[TemplateVisualState(GroupName = "IconStates", Name = "InactiveIcon")]
25+
[TemplateVisualState(GroupName = "IconStates", Name = "ActiveIcon")]
1326
public partial class OmnibarMode : Control
1427
{
1528
private const string ModeClickBorder = "PART_ModeClickBorder";
@@ -33,6 +46,9 @@ protected override void OnApplyTemplate()
3346
_inputTextBox = GetTemplateChild(InputTextBox) as TextBox
3447
?? throw new MissingFieldException($"Could not find {InputTextBox} in the given {nameof(OmnibarMode)}'s style.");
3548

49+
if (IsDefault)
50+
Host!.ChangeExpandedMode(this);
51+
3652
UpdateVisualStates();
3753

3854
_modeClickArea.PointerEntered += OmnibarMode_PointerEntered;
@@ -49,39 +65,46 @@ private void UpdateVisualStates()
4965
this,
5066
_isPressed ? "PointerPressed" : _isHoveredOver ? "PointerOver" : "PointerNormal",
5167
true);
52-
53-
if (IsDefault && Host is not null)
54-
{
55-
VisualStateManager.GoToState(this, "Visible",true);
56-
Host.ColumnDefinitions[Host.Children.IndexOf(this)].Width = new(1, GridUnitType.Star);
57-
}
5868
}
5969

6070
// Events
6171

6272
private void OmnibarMode_PointerEntered(object sender, PointerRoutedEventArgs e)
6373
{
74+
if (Host!.CurrentActiveMode == this)
75+
return;
76+
6477
_isHoveredOver = true;
6578
_isPressed = false;
6679
UpdateVisualStates();
6780
}
6881

6982
private void OmnibarMode_PointerPressed(object sender, PointerRoutedEventArgs e)
7083
{
84+
if (Host!.CurrentActiveMode == this)
85+
return;
86+
7187
_isHoveredOver = false;
7288
_isPressed = true;
7389
UpdateVisualStates();
7490
}
7591

7692
private void OmnibarMode_PointerReleased(object sender, PointerRoutedEventArgs e)
7793
{
94+
if (Host!.CurrentActiveMode == this)
95+
return;
96+
7897
_isHoveredOver = true;
7998
_isPressed = false;
8099
UpdateVisualStates();
100+
Host.ChangeExpandedMode(this);
81101
}
82102

83103
private void OmnibarMode_PointerExited(object sender, PointerRoutedEventArgs e)
84104
{
105+
//if (Host!.CurrentActiveMode == this)
106+
// return;
107+
85108
_isHoveredOver = _isPressed = false;
86109
UpdateVisualStates();
87110
}

0 commit comments

Comments
 (0)