Iconograpy page tag buttons (#1693)

<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
This PR will add "tag" buttons to the icon details pane on the
"Iconography" page. When the "tag" button is clicked, the "tag" will be
set to the icon search box to filter icons by the "tag" text.

This PR will also update the placeholder on the icon search box to
"Search icons by name, code, tags...".

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->
Tested on VS.

## Screenshots (if appropriate):

![image](https://github.com/user-attachments/assets/45a431bc-2b95-4f8d-8664-22c9e31cccf5)

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

---------

Co-authored-by: Niels Laute <[email protected]>
Co-authored-by: Marcel W. <[email protected]>

WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml

@@ -16,6 +16,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:WinUIGallery.Controls"
     xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
+    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
@@ -36,7 +37,7 @@
             <Setter Property="SampleType" Value="Inline" />
             <Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
             <Setter Property="VerticalContentAlignment" Value="Center" />
-            <Setter Property="Margin" Value="0,4,0,16" />
+            <Setter Property="Margin" Value="0,4,0,4" />
         </Style>
 
         <DataTemplate x:Key="IconTemplate">
@@ -77,6 +78,9 @@
                 </Grid>
             </ItemContainer>
         </DataTemplate>
+
+        <converters:EmptyCollectionToObjectConverter x:Key="emptyCollectionToFalseConverter" EmptyValue="False" NotEmptyValue="True" />
+        <converters:EmptyCollectionToObjectConverter x:Key="emptyCollectionToTrueConverter" EmptyValue="True" NotEmptyValue="False" />
     </Page.Resources>
 
     <Grid HorizontalAlignment="Stretch" RowSpacing="8">
@@ -140,7 +144,7 @@
                 MinWidth="304"
                 MaxWidth="320"
                 HorizontalAlignment="Left"
-                PlaceholderText="Search icons"
+                PlaceholderText="Search icons by name, code, or tags"
                 QueryIcon="Find"
                 TextChanged="SearchTextBox_TextChanged" />
         </StackPanel>
@@ -187,15 +191,13 @@
                             Style="{StaticResource SubtitleTextBlockStyle}"
                             Text="{Binding SelectedItem.Name, Mode=OneWay}" />
                         <FontIcon
-                            Margin="0,12,0,32"
+                            Margin="0,12,0,12"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             FontFamily="{StaticResource SymbolThemeFontFamily}"
                             FontSize="{x:Bind (x:Double)FontsizeComboBox.SelectedValue, Mode=OneWay}"
                             Glyph="{Binding SelectedItem.Character, Mode=OneWay}" />
 
-                        <TextBlock Text="Icon name" />
-                        <controls:SampleCodePresenter Code="{Binding SelectedItem.Name, Mode=OneWay}" Style="{StaticResource CodeValuePresenterStyle}" />
                         <TextBlock Text="Unicode point" />
                         <controls:SampleCodePresenter Code="{Binding SelectedItem.Code, Mode=OneWay}" Style="{StaticResource CodeValuePresenterStyle}" />
                         <TextBlock Text="Text glyph" />
@@ -206,6 +208,27 @@
                         <controls:SampleCodePresenter x:Name="XAMLCodePresenter" Style="{StaticResource CodeValuePresenterStyle}" />
                         <TextBlock Text="C#" />
                         <controls:SampleCodePresenter x:Name="CSharpCodePresenter" Style="{StaticResource CodeValuePresenterStyle}" />
+                        <TextBlock Text="Tags" />
+                        <ItemsView
+                            x:Name="TagsItemsView"
+                            x:Load="{x:Bind SelectedItem.Tags, Mode=OneWay, Converter={StaticResource emptyCollectionToFalseConverter}}"
+                            ItemsSource="{Binding SelectedItem.Tags, Mode=OneWay}"
+                            Margin="0,4,0,4">
+                            <ItemsView.Layout>
+                                <LinedFlowLayout LineSpacing="4" MinItemSpacing="4" />
+                            </ItemsView.Layout>
+                            <ItemsView.ItemTemplate>
+                                <DataTemplate x:DataType="x:String">
+                                    <ItemContainer>
+                                        <Button Content="{x:Bind Mode=OneWay}" Click="TagButton_Click" />
+                                    </ItemContainer>
+                                </DataTemplate>
+                            </ItemsView.ItemTemplate>
+                        </ItemsView>
+                        <TextBlock
+                            x:Name="NoTagsTextBlock"
+                            x:Load="{x:Bind SelectedItem.Tags, Mode=OneWay, Converter={StaticResource emptyCollectionToTrueConverter}}"
+                            Text="No tags" />
 
                         <StackPanel Orientation="Vertical" Visibility="Collapsed">
                             <TextBlock

WinUIGallery/ControlPages/DesignGuidance/IconographyPage.xaml.cs

@@ -144,5 +144,13 @@ private void IconsItemsView_SelectionChanged(ItemsView sender, ItemsViewSelectio
 
             }
         }
+
+        private void TagButton_Click(object sender, RoutedEventArgs e)
+        {
+            if ((sender as Button).Content is string tag)
+            {
+                IconsAutoSuggestBox.Text = tag;
+            }
+        }
     }
 }