Update control to use animated icon

microsoft · Jul 13, 2021 · c725a3b · c725a3b
1 parent 0f96472
commit c725a3b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 8 deletions.
diff --git a/ContosoApp/UserControls/CollapsibleSearchBox.xaml b/ContosoApp/UserControls/CollapsibleSearchBox.xaml
@@ -4,6 +4,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Contoso.App.UserControls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="300"
     d:DesignWidth="400"
@@ -14,23 +16,42 @@
             x:Name="searchButton"
             Width="32"
             Height="32"
-            Padding="0"
+            Padding="6"
             HorizontalAlignment="Right"
             VerticalAlignment="Top"
             Checked="SearchButton_Checked"
-            Visibility="Collapsed">
-            <FontIcon
-                FontFamily="Segoe MDL2 Assets"
-                FontSize="12"
-                Glyph="&#xE11A;" />
+            Visibility="Collapsed"
+            muxc:AnimatedIcon.State="Normal"
+            PointerEntered="ToggleButton_PointerEntered"
+            PointerExited="ToggleButton_PointerExited">
+            <muxc:AnimatedIcon>
+                <animatedvisuals:AnimatedFindVisualSource/>
+            <!-- FallbackIconSource uses FontIconSource because the FontSize needs to be
+                 set to a size that fits into the same space allowed for the animated icon. -->
+                <muxc:AnimatedIcon.FallbackIconSource>
+                    <muxc:FontIconSource
+                        FontSize="16"
+                        Glyph="&#xE11A;"/>
+                </muxc:AnimatedIcon.FallbackIconSource>
+            </muxc:AnimatedIcon>
         </ToggleButton>
 
         <AutoSuggestBox
             x:Name="searchBox"
             LostFocus="SearchBox_LostFocus"
             PlaceholderText="Search..."
-            QueryIcon="Find"
-            Visibility="Visible" />
+            Visibility="Visible">
+            <AutoSuggestBox.QueryIcon>
+                <muxc:AnimatedIcon>
+                    <animatedvisuals:AnimatedFindVisualSource/>
+                    <muxc:AnimatedIcon.FallbackIconSource>
+                        <muxc:FontIconSource
+                            FontSize="16"
+                            Glyph="&#xE11A;"/>
+                    </muxc:AnimatedIcon.FallbackIconSource>
+                </muxc:AnimatedIcon>
+            </AutoSuggestBox.QueryIcon>
+        </AutoSuggestBox>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup>
                 <VisualState x:Name="OpenState" />

diff --git a/ContosoApp/UserControls/CollapsibleSearchBox.xaml.cs b/ContosoApp/UserControls/CollapsibleSearchBox.xaml.cs
@@ -24,6 +24,8 @@
 
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+using muxc = Microsoft.UI.Xaml.Controls;
 
 namespace Contoso.App.UserControls
 {
@@ -35,6 +37,7 @@ public CollapsibleSearchBox()
         {
             InitializeComponent();
             Loaded += CollapsableSearchBox_Loaded;
+            Unloaded += CollapsibleSearchBox_Unloaded;
             Window.Current.SizeChanged += Current_SizeChanged;
             myAutoSuggestBox = searchBox;
         }
@@ -58,10 +61,23 @@ public AutoSuggestBox AutoSuggestBox
 
         private void CollapsableSearchBox_Loaded(object sender, RoutedEventArgs e)
         {
+            searchButton.AddHandler(PointerPressedEvent,
+                new PointerEventHandler(ToggleButton_PointerPressed), true);
+            searchButton.AddHandler(UIElement.PointerReleasedEvent,
+                new PointerEventHandler(ToggleButton_PointerReleased), true);
+
             RequestedWidth = Width;
             SetState(Window.Current.Bounds.Width);
         }
 
+        private void CollapsibleSearchBox_Unloaded(object sender, RoutedEventArgs e)
+        {
+            searchButton.RemoveHandler(UIElement.PointerPressedEvent,
+                (PointerEventHandler)ToggleButton_PointerPressed);
+            searchButton.RemoveHandler(UIElement.PointerReleasedEvent,
+                (PointerEventHandler)ToggleButton_PointerReleased);
+        }
+
         private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
         {
             SetState(e.Size.Width);
@@ -96,5 +112,26 @@ private void SearchButton_Checked(object sender, RoutedEventArgs e)
                 searchBox.Focus(FocusState.Programmatic);
             }
         }
+
+        // Set states for animated icon in toggle button.
+        private void ToggleButton_PointerEntered(object sender, PointerRoutedEventArgs e)
+        {
+            muxc.AnimatedIcon.SetState((UIElement)sender, "PointerOver");
+        }
+
+        private void ToggleButton_PointerPressed(object sender, PointerRoutedEventArgs e)
+        {
+            muxc.AnimatedIcon.SetState((UIElement)sender, "Pressed");
+        }
+
+        private void ToggleButton_PointerReleased(object sender, PointerRoutedEventArgs e)
+        {
+            muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
+        }
+
+        private void ToggleButton_PointerExited(object sender, PointerRoutedEventArgs e)
+        {
+            muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
+        }
     }
 }