From b067739fb3a1f3807a3cb2e852bfbec61a129571 Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Wed, 28 Apr 2021 11:08:06 -0700
Subject: [PATCH 1/5] Add AnimatedIcon to Combobox

---
 dev/AnimatedIcon/AnimatedIcon.cpp         |  7 +++--
 dev/ComboBox/ComboBox_themeresources.xaml | 33 +++++++++++++++++------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/dev/AnimatedIcon/AnimatedIcon.cpp b/dev/AnimatedIcon/AnimatedIcon.cpp
index cfe773d98d..c00d1f9d0d 100644
--- a/dev/AnimatedIcon/AnimatedIcon.cpp
+++ b/dev/AnimatedIcon/AnimatedIcon.cpp
@@ -165,12 +165,11 @@ winrt::Size AnimatedIcon::ArrangeOverride(winrt::Size const& finalSize)
             std::min(finalSize.Height / scale.y, visualSize.y)
         };
         const auto offset = (finalSize - (visualSize * scale)) / 2;
-        const auto z = 0.0F;
         const auto rootVisual = visual.RootVisual();
-        rootVisual.Offset({ offset, z });
+        rootVisual.Offset({ offset, 0.0f });
         rootVisual.Size(arrangedSize);
-        rootVisual.Scale({ scale, z });
-        return finalSize;
+        rootVisual.Scale({ scale, 1.0f });
+        return __super::ArrangeOverride(finalSize);
     }
     else
     {
diff --git a/dev/ComboBox/ComboBox_themeresources.xaml b/dev/ComboBox/ComboBox_themeresources.xaml
index 6107e6c20d..6f273babe2 100644
--- a/dev/ComboBox/ComboBox_themeresources.xaml
+++ b/dev/ComboBox/ComboBox_themeresources.xaml
@@ -7,6 +7,8 @@
   xmlns:contract5Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,5)"
   xmlns:contract5NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:controls="using:Microsoft.UI.Xaml.Controls"
+  xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
   xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives">
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
@@ -446,6 +448,9 @@
                                             <contract5Present:DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForegroundPointerOver}}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="DropDownGlyph.(local:AnimatedIcon.State)" Value="PointerOver"/>
+                                    </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
@@ -463,6 +468,9 @@
                                             <contract5Present:DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForegroundPressed}}" />
                                         </ObjectAnimationUsingKeyFrames>
                                     </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="DropDownGlyph.(local:AnimatedIcon.State)" Value="Pressed"/>
+                                    </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="Disabled">
                                     <Storyboard>
@@ -604,7 +612,7 @@
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="32" />
+                            <ColumnDefinition Width="40" />
                         </Grid.ColumnDefinitions>
                         <ContentPresenter x:Name="HeaderContentPresenter"
                             Grid.Row="0"
@@ -691,26 +699,35 @@
                             Grid.Row="1"
                             Grid.Column="1"
                             Background="Transparent"
-                            Margin="-4,4,4,4"
+                            Margin="1,5,5,5"
                             Visibility="Collapsed"
                             contract7Present:CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
                             contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}"
                             Width="30"
                             HorizontalAlignment="Right"
                             x:Load="False" />
-                        <FontIcon x:Name="DropDownGlyph"
+                        <controls:AnimatedIcon x:Name="DropDownGlyph"
+                            controls:AnimatedIcon.State="Normal"
                             MinHeight="{ThemeResource ComboBoxMinHeight}"
                             Grid.Row="1"
                             Grid.Column="1"
                             IsHitTestVisible="False"
-                            Margin="0,0,14,0"
+                            Margin="0,0,12,0"
                             Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
-                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
-                            FontSize="12"
-                            Glyph="&#xE0E5;"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                            AutomationProperties.AccessibilityView="Raw" />
+                            AutomationProperties.AccessibilityView="Raw"
+                            Width="16"
+                            Height="16">
+                            <animatedVisuals:AnimatedChevronDownSmallVisualSource/>
+                            <controls:AnimatedIcon.FallbackIconSource>
+                                <controls:FontIconSource 
+                                    Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
+                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                    FontSize="12"
+                                    Glyph="&#xE0E5;"/>
+                            </controls:AnimatedIcon.FallbackIconSource>
+                        </controls:AnimatedIcon>
                         <contract7Present:ContentPresenter x:Name="DescriptionPresenter"
                             Grid.Row="2"
                             Grid.Column="0"

From 9b3c92b874f20d5a374c26294d4ece2143105e9c Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Wed, 28 Apr 2021 15:13:23 -0700
Subject: [PATCH 2/5] Fix editable combobox size changes.

---
 dev/ComboBox/ComboBox_themeresources.xaml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/dev/ComboBox/ComboBox_themeresources.xaml b/dev/ComboBox/ComboBox_themeresources.xaml
index 6f273babe2..f5399794c8 100644
--- a/dev/ComboBox/ComboBox_themeresources.xaml
+++ b/dev/ComboBox/ComboBox_themeresources.xaml
@@ -359,7 +359,7 @@
     <Thickness x:Key="ComboBoxDropdownContentMargin">0,4</Thickness>
     <Thickness x:Key="ComboBoxTopHeaderMargin">0,0,0,8</Thickness>
     <Thickness x:Key="ComboBoxPadding">12,5,0,7</Thickness>
-    <Thickness x:Key="ComboBoxEditableTextPadding">11,5,32,6</Thickness>
+    <Thickness x:Key="ComboBoxEditableTextPadding">11,5,38,6</Thickness>
 
     <CornerRadius x:Key="ComboBoxHiglightBorderCornerRadius">7</CornerRadius>
     <CornerRadius x:Key="ComboBoxDropDownButtonBackgroundCornerRadius">4</CornerRadius>
@@ -589,7 +589,6 @@
                                     <VisualState.Setters>
                                         <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
                                         <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxFocusedDropDownBackgroundPointerPressed}" />
-                                        <Setter Target="DropDownOverlay.Margin" Value="0,2,2,2" />
                                     </VisualState.Setters>
                                 </VisualState>
                                 <VisualState x:Name="TextBoxOverlayPointerOver">
@@ -612,7 +611,7 @@
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="40" />
+                            <ColumnDefinition Width="38" />
                         </Grid.ColumnDefinitions>
                         <ContentPresenter x:Name="HeaderContentPresenter"
                             Grid.Row="0"
@@ -699,7 +698,7 @@
                             Grid.Row="1"
                             Grid.Column="1"
                             Background="Transparent"
-                            Margin="1,5,5,5"
+                            Margin="4,4,4,4"
                             Visibility="Collapsed"
                             contract7Present:CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
                             contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}"

From a669b61fda121bdc10dd9a6703c432e201059dce Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Thu, 29 Apr 2021 11:13:03 -0700
Subject: [PATCH 3/5] Update Visual Verification

---
 .../verification/ComboBox-4.xml               | 55 +++++++++++++++----
 .../verification/ComboBox-7.xml               | 33 +++++------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/test/MUXControlsTestApp/verification/ComboBox-4.xml b/test/MUXControlsTestApp/verification/ComboBox-4.xml
index cb28efdc52..021ce2b792 100755
--- a/test/MUXControlsTestApp/verification/ComboBox-4.xml
+++ b/test/MUXControlsTestApp/verification/ComboBox-4.xml
@@ -11,7 +11,7 @@
     FocusVisualPrimaryThickness=2,2,2,2
     FocusVisualPrimaryBrush=#E4000000
     Visibility=Visible
-    RenderSize=64,32
+    RenderSize=70,32
   [Windows.UI.Xaml.Controls.Grid]
       Padding=0,0,0,0
       CornerRadius=0,0,0,0
@@ -25,7 +25,7 @@
       FocusVisualPrimaryThickness=2,2,2,2
       FocusVisualPrimaryBrush=#E4000000
       Visibility=Visible
-      RenderSize=64,32
+      RenderSize=70,32
     [Windows.UI.Xaml.Controls.Border]
         Padding=0,0,0,0
         CornerRadius=4,4,4,4
@@ -39,7 +39,7 @@
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=72,40
+        RenderSize=78,40
     [Windows.UI.Xaml.Controls.Border]
         Padding=0,0,0,0
         CornerRadius=4,4,4,4
@@ -54,7 +54,7 @@
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=64,32
+        RenderSize=70,32
     [Windows.UI.Xaml.Shapes.Rectangle]
         StrokeThickness=1
         Width=3
@@ -93,17 +93,19 @@
           FocusVisualPrimaryBrush=#E4000000
           Visibility=Visible
           RenderSize=20,20
-    [Windows.UI.Xaml.Controls.FontIcon]
+    [Microsoft.UI.Xaml.Controls.AnimatedIcon]
         Foreground=#9E000000
+        Width=16
         Name=DropDownGlyph
         MinHeight=32
-        Margin=0,0,14,0
+        Margin=0,0,12,0
+        Height=16
         FocusVisualSecondaryThickness=1,1,1,1
         FocusVisualSecondaryBrush=#B3FFFFFF
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=12,32
+        RenderSize=16,32
       [Windows.UI.Xaml.Controls.Grid]
           Padding=0,0,0,0
           CornerRadius=0,0,0,0
@@ -116,9 +118,17 @@
           FocusVisualPrimaryThickness=2,2,2,2
           FocusVisualPrimaryBrush=#E4000000
           Visibility=Visible
-          RenderSize=12,32
-        [Windows.UI.Xaml.Controls.TextBlock]
-            Padding=0,0,0,0
+          RenderSize=16,32
+        [Windows.UI.Xaml.Shapes.Path]
+            StrokeThickness=1
+            Margin=0,0,0,0
+            FocusVisualSecondaryThickness=1,1,1,1
+            FocusVisualSecondaryBrush=#B3FFFFFF
+            FocusVisualPrimaryThickness=2,2,2,2
+            FocusVisualPrimaryBrush=#E4000000
+            Visibility=Collapsed
+            RenderSize=0,0
+        [Windows.UI.Xaml.Controls.FontIcon]
             Foreground=#9E000000
             Margin=0,0,0,0
             FocusVisualSecondaryThickness=1,1,1,1
@@ -126,7 +136,30 @@
             FocusVisualPrimaryThickness=2,2,2,2
             FocusVisualPrimaryBrush=#E4000000
             Visibility=Visible
-            RenderSize=12,12
+            RenderSize=16,32
+          [Windows.UI.Xaml.Controls.Grid]
+              Padding=0,0,0,0
+              CornerRadius=0,0,0,0
+              BorderThickness=0,0,0,0
+              BorderBrush=[NULL]
+              Background=#00000000
+              Margin=0,0,0,0
+              FocusVisualSecondaryThickness=1,1,1,1
+              FocusVisualSecondaryBrush=#B3FFFFFF
+              FocusVisualPrimaryThickness=2,2,2,2
+              FocusVisualPrimaryBrush=#E4000000
+              Visibility=Visible
+              RenderSize=16,32
+            [Windows.UI.Xaml.Controls.TextBlock]
+                Padding=0,0,0,0
+                Foreground=#9E000000
+                Margin=0,0,0,0
+                FocusVisualSecondaryThickness=1,1,1,1
+                FocusVisualSecondaryBrush=#B3FFFFFF
+                FocusVisualPrimaryThickness=2,2,2,2
+                FocusVisualPrimaryBrush=#E4000000
+                Visibility=Visible
+                RenderSize=16,12
     [Windows.UI.Xaml.Controls.Primitives.Popup]
         Name=Popup
         Margin=0,0,0,0
diff --git a/test/MUXControlsTestApp/verification/ComboBox-7.xml b/test/MUXControlsTestApp/verification/ComboBox-7.xml
index 0f29107891..f3ff7900ef 100755
--- a/test/MUXControlsTestApp/verification/ComboBox-7.xml
+++ b/test/MUXControlsTestApp/verification/ComboBox-7.xml
@@ -11,7 +11,7 @@
     FocusVisualPrimaryThickness=2,2,2,2
     FocusVisualPrimaryBrush=#E4000000
     Visibility=Visible
-    RenderSize=64,32
+    RenderSize=70,32
   [Windows.UI.Xaml.Controls.Grid]
       Padding=0,0,0,0
       CornerRadius=0,0,0,0
@@ -25,7 +25,7 @@
       FocusVisualPrimaryThickness=2,2,2,2
       FocusVisualPrimaryBrush=#E4000000
       Visibility=Visible
-      RenderSize=64,32
+      RenderSize=70,32
     [Windows.UI.Xaml.Controls.Border]
         Padding=0,0,0,0
         CornerRadius=7,7,7,7
@@ -39,7 +39,7 @@
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=72,40
+        RenderSize=78,40
     [Windows.UI.Xaml.Controls.Border]
         Padding=0,0,0,0
         CornerRadius=4,4,4,4
@@ -54,7 +54,7 @@
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=64,32
+        RenderSize=70,32
     [Windows.UI.Xaml.Shapes.Rectangle]
         StrokeThickness=1
         Width=3
@@ -94,7 +94,7 @@
           Visibility=Visible
           RenderSize=20,19
     [Windows.UI.Xaml.Controls.TextBox]
-        Padding=11,5,32,6
+        Padding=11,5,38,6
         Foreground=#9E000000
         BorderThickness=1,1,1,1
         BorderBrush=#00FFFFFF
@@ -116,24 +116,26 @@
         Background=#00FFFFFF
         Width=30
         Name=DropDownOverlay
-        Margin=-4,4,4,4
+        Margin=4,4,4,4
         FocusVisualSecondaryThickness=1,1,1,1
         FocusVisualSecondaryBrush=#B3FFFFFF
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Collapsed
         RenderSize=0,0
-    [Windows.UI.Xaml.Controls.FontIcon]
+    [Microsoft.UI.Xaml.Controls.AnimatedIcon]
         Foreground=#9E000000
+        Width=16
         Name=DropDownGlyph
         MinHeight=32
-        Margin=0,0,14,0
+        Margin=0,0,12,0
+        Height=16
         FocusVisualSecondaryThickness=1,1,1,1
         FocusVisualSecondaryBrush=#B3FFFFFF
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=12,32
+        RenderSize=16,32
       [Windows.UI.Xaml.Controls.Grid]
           Padding=0,0,0,0
           CornerRadius=0,0,0,0
@@ -146,17 +148,16 @@
           FocusVisualPrimaryThickness=2,2,2,2
           FocusVisualPrimaryBrush=#E4000000
           Visibility=Visible
-          RenderSize=12,32
-        [Windows.UI.Xaml.Controls.TextBlock]
-            Padding=0,0,0,0
-            Foreground=#9E000000
+          RenderSize=16,32
+        [Windows.UI.Xaml.Shapes.Path]
+            StrokeThickness=1
             Margin=0,0,0,0
             FocusVisualSecondaryThickness=1,1,1,1
             FocusVisualSecondaryBrush=#B3FFFFFF
             FocusVisualPrimaryThickness=2,2,2,2
             FocusVisualPrimaryBrush=#E4000000
-            Visibility=Visible
-            RenderSize=12,12
+            Visibility=Collapsed
+            RenderSize=0,0
     [Windows.UI.Xaml.Controls.ContentPresenter]
         Foreground=#99000000
         Padding=0,0,0,0
@@ -171,7 +172,7 @@
         FocusVisualPrimaryThickness=2,2,2,2
         FocusVisualPrimaryBrush=#E4000000
         Visibility=Visible
-        RenderSize=64,0
+        RenderSize=70,0
     [Windows.UI.Xaml.Controls.Primitives.Popup]
         Name=Popup
         Margin=0,0,0,0

From 8f0e9116d13a21e6c8c2eeb9929c1ec86beab627 Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Mon, 3 May 2021 13:40:19 -0700
Subject: [PATCH 4/5] revert arrange override.

---
 dev/AnimatedIcon/AnimatedIcon.cpp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev/AnimatedIcon/AnimatedIcon.cpp b/dev/AnimatedIcon/AnimatedIcon.cpp
index c00d1f9d0d..34831acaf1 100644
--- a/dev/AnimatedIcon/AnimatedIcon.cpp
+++ b/dev/AnimatedIcon/AnimatedIcon.cpp
@@ -169,7 +169,7 @@ winrt::Size AnimatedIcon::ArrangeOverride(winrt::Size const& finalSize)
         rootVisual.Offset({ offset, 0.0f });
         rootVisual.Size(arrangedSize);
         rootVisual.Scale({ scale, 1.0f });
-        return __super::ArrangeOverride(finalSize);
+        return finalSize;
     }
     else
     {

From 032f680ac3cb6f03e4dd25574e25808069fca746 Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Tue, 4 May 2021 11:48:50 -0700
Subject: [PATCH 5/5] update visual verification files

---
 test/MUXControlsTestApp/verification/ComboBox-7.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/MUXControlsTestApp/verification/ComboBox-7.xml b/test/MUXControlsTestApp/verification/ComboBox-7.xml
index f3ff7900ef..8b873ff035 100755
--- a/test/MUXControlsTestApp/verification/ComboBox-7.xml
+++ b/test/MUXControlsTestApp/verification/ComboBox-7.xml
@@ -148,7 +148,7 @@
           FocusVisualPrimaryThickness=2,2,2,2
           FocusVisualPrimaryBrush=#E4000000
           Visibility=Visible
-          RenderSize=16,32
+          RenderSize=0,0
         [Windows.UI.Xaml.Shapes.Path]
             StrokeThickness=1
             Margin=0,0,0,0