Skip to content

feat: Enhance the no search result state #2255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zakaria Tahri (Zakariathr22) wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Enhance the no search result state #2255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added WinUIGallery/Assets/NoResults.dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added WinUIGallery/Assets/NoResults.light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
134 changes: 102 additions & 32 deletions WinUIGallery/Pages/SearchResultsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,122 @@
mc:Ignorable="d">

<Grid Background="{ThemeResource HomePageBackgroundBrush}">
<NavigationView
x:Name="resultsNavView"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
Loaded="OnResultsNavViewLoaded"
MenuItemsSource="{x:Bind Filters, Mode=OneWay}"
PaneDisplayMode="Top"
SelectionChanged="OnResultsNavViewSelectionChanged">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<ImageSource x:Key="ImageSource">ms-appx:///Assets/NoResults.dark.png</ImageSource>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<ImageSource x:Key="ImageSource">ms-appx:///Assets/NoResults.light.png</ImageSource>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Grid.Resources>

<NavigationView x:Name="resultsNavView"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
Loaded="OnResultsNavViewLoaded"
MenuItemsSource="{x:Bind Filters, Mode=OneWay}"
PaneDisplayMode="Top"
SelectionChanged="OnResultsNavViewSelectionChanged">
<UserControl>
<GridView
x:Name="resultsGridView"
Padding="36,24,36,36"
AutomationProperties.AutomationId="ResultsGridView"
AutomationProperties.Name="Search Results"
ContainerContentChanging="OnItemGridViewContainerContentChanging"
IsItemClickEnabled="True"
IsSwipeEnabled="False"
ItemClick="OnItemGridViewItemClick"
ItemContainerStyle="{StaticResource GridViewItemStyle}"
ItemTemplate="{StaticResource ControlItemTemplate}"
ItemsSource="{x:Bind ((local:Filter)resultsNavView.SelectedItem).Items, Mode=OneWay}"
Loaded="OnItemGridViewLoaded"
SelectionMode="None"
TabIndex="1">
<GridView x:Name="resultsGridView"
Padding="36,24,36,36"
AutomationProperties.AutomationId="ResultsGridView"
AutomationProperties.Name="Search Results"
ContainerContentChanging="OnItemGridViewContainerContentChanging"
IsItemClickEnabled="True"
IsSwipeEnabled="False"
ItemClick="OnItemGridViewItemClick"
ItemContainerStyle="{StaticResource GridViewItemStyle}"
ItemTemplate="{StaticResource ControlItemTemplate}"
ItemsSource="{x:Bind ((local:Filter)resultsNavView.SelectedItem).Items, Mode=OneWay}"
Loaded="OnItemGridViewLoaded"
SelectionMode="None"
TabIndex="1">
<GridView.Resources>
<CornerRadius x:Key="GridViewItemCornerRadius">8</CornerRadius>
</GridView.Resources>
</GridView>
</UserControl>
</NavigationView>

<StackPanel x:Name="noResultsPanel"
VerticalAlignment="Center"
Spacing="12"
Visibility="Collapsed">

<Image Source="{ThemeResource ImageSource}"
Height="160"
HorizontalAlignment="Center" />

<TextBlock x:Name="noResultsTextBlock"
Style="{StaticResource TitleTextBlockStyle}"
HorizontalAlignment="Center" />

<TextBlock Style="{StaticResource BodyTextBlockStyle}"
Text="Try a different search term or browse the samples below."
HorizontalAlignment="Center"
TextWrapping="Wrap"
MaxWidth="500" />

<InfoBar Title="Search tips"
IsOpen="True"
IsClosable="False"
MaxWidth="500"
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}">
<InfoBar.IconSource>
<FontIconSource Glyph="&#xEA80;" />
</InfoBar.IconSource>

<InfoBar.Content>
<RichTextBlock Margin="0,-16,16,16"
Foreground="{ThemeResource TextFillColorPrimaryBrush}">
<Paragraph>
• Search by sample name, for example, Button.
</Paragraph>
<Paragraph>
• Search by concept, for example, Data binding.
</Paragraph>
<Paragraph>
• Search by keyword, for example, Animation.
</Paragraph>
</RichTextBlock>
</InfoBar.Content>
</InfoBar>

<Button x:Name="AllSamplesButton"
Margin="0,12,0,0"
Padding="15,9,15,10"
HorizontalAlignment="Center"
Style="{StaticResource AccentButtonStyle}"
CornerRadius="20"
AutomationProperties.Name="View all samples"
Click="AllSamplesButton_Click">

<StackPanel Orientation="Horizontal"
Spacing="8"
VerticalAlignment="Center">

<FontIcon Glyph="&#xF0E2;"
VerticalAlignment="Center" />

<TextBlock
x:Name="noResultsTextBlock"
Margin="24,24,0,0"
AutomationProperties.HeadingLevel="Level2"
Style="{StaticResource TitleTextBlockStyle}"
Text="No results match your search."
Visibility="Collapsed" />
<TextBlock Text="View all samples"
VerticalAlignment="Center" />
</StackPanel>
</Button>
</StackPanel>

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ResultStates">
<VisualState x:Name="ResultsFound" />
<!-- When there are no results, the results panel is replaced with an informational TextBlock -->
<!-- When there are no results, the results panel is replaced with an informational panel -->
<VisualState x:Name="NoResultsFound">
<VisualState.Setters>
<Setter Target="resultsNavView.Visibility" Value="Collapsed" />
<Setter Target="noResultsTextBlock.Visibility" Value="Visible" />
<Setter Target="noResultsPanel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down
6 changes: 6 additions & 0 deletions WinUIGallery/Pages/SearchResultsPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ private void BuildFilterList(string queryText)

if (filterList.Count == 0)
{
noResultsTextBlock.Text = $"No results found for \"{queryText}\"";
// Display informational text when there are no search results.
VisualStateManager.GoToState(this, "NoResultsFound", false);
}
Expand Down Expand Up @@ -139,6 +140,11 @@ protected override bool GetIsNarrowLayoutState()
{
return LayoutVisualStates.CurrentState == NarrowLayout;
}

private void AllSamplesButton_Click(object sender, RoutedEventArgs e)
{
App.MainWindow.Navigate(typeof(AllControlsPage));
}
}

/// <summary>
Expand Down
5 changes: 5 additions & 0 deletions WinUIGallery/WinUIGallery.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,11 @@
<Compile Remove="Helpers\ColorCode.internal\ExtensionMethods.cs" Condition="'$(IsInWinUIRepo)' != 'true'" />
</ItemGroup>

<ItemGroup>
<None Remove="Assets\NoResults.dark.png" />
<None Remove="Assets\NoResults.light.png" />
</ItemGroup>

<!-- In the WinUI repo, package reference versions are controlled centrally by a Packages.props. We will
just add versionless PackageReferences here. They will be updated to their actual versions by either the Packages.props file
in the WinUI repo, or the next ItemGroup below when standalone. -->
Expand Down