From 015e054f097623cbb23af62e1fd3c206378ca3d6 Mon Sep 17 00:00:00 2001
From: Stephen Peters <stpete@microsoft.com>
Date: Wed, 24 Mar 2021 15:31:14 -0700
Subject: [PATCH] Fix foreground brush color property changing  not affecting
 animated icon's visuals.

---
 dev/AnimatedIcon/AnimatedIcon.cpp             | 34 +++++---
 dev/AnimatedIcon/AnimatedIcon.h               |  5 +-
 dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml | 79 +++++++++++++------
 .../TestUI/AnimatedIcon_TestUI.projitems      |  1 +
 .../TestUI/ColorToSolidColorBrushConverter.cs | 22 ++++++
 5 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs

diff --git a/dev/AnimatedIcon/AnimatedIcon.cpp b/dev/AnimatedIcon/AnimatedIcon.cpp
index 7adde6ffda..50a9dd9208 100644
--- a/dev/AnimatedIcon/AnimatedIcon.cpp
+++ b/dev/AnimatedIcon/AnimatedIcon.cpp
@@ -51,10 +51,8 @@ void AnimatedIcon::OnApplyTemplate()
         {
             winrt::ElementCompositionPreview::SetElementChildVisual(panel, visual.RootVisual());
         }
-        if (auto const source = Source())
-        {
-            TrySetForegroundProperty(source);
-        }
+
+        TrySetForegroundProperty();
     }
 }
 
@@ -496,17 +494,33 @@ void AnimatedIcon::SetRootPanelChildToFallbackIcon()
 
 void AnimatedIcon::OnForegroundPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args)
 {
-    TrySetForegroundProperty(Source());
+    m_foregroundColorPropertyChangedRevoker.revoke();
+    if (auto const foregroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
+    {
+        m_foregroundColorPropertyChangedRevoker = RegisterPropertyChanged(foregroundSolidColorBrush, winrt::SolidColorBrush::ColorProperty(), { this, &AnimatedIcon::OnForegroundBrushColorPropertyChanged });
+        TrySetForegroundProperty(foregroundSolidColorBrush.Color());
+    }
+}
+
+void AnimatedIcon::OnForegroundBrushColorPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args)
+{
+    TrySetForegroundProperty(sender.GetValue(args).as<winrt::Color>());
 }
 
 void AnimatedIcon::TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source)
 {
-    if (source)
+    if (auto const foregroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
     {
-        if (auto const ForegroundSolidColorBrush = Foreground().try_as<winrt::SolidColorBrush>())
-        {
-            source.SetColorProperty(s_foregroundPropertyName, ForegroundSolidColorBrush.Color());
-        }
+        TrySetForegroundProperty(foregroundSolidColorBrush.Color(), source);
+    }
+}
+
+void AnimatedIcon::TrySetForegroundProperty(winrt::Color color, winrt::IAnimatedVisualSource2 const& source)
+{
+    auto const localSource = source ? source : Source();
+    if (localSource)
+    {
+        localSource.SetColorProperty(s_foregroundPropertyName, color);
     }
 }
 
diff --git a/dev/AnimatedIcon/AnimatedIcon.h b/dev/AnimatedIcon/AnimatedIcon.h
index 907edbb82b..e0a12e35d3 100644
--- a/dev/AnimatedIcon/AnimatedIcon.h
+++ b/dev/AnimatedIcon/AnimatedIcon.h
@@ -47,9 +47,11 @@ class AnimatedIcon :
     void TransitionAndUpdateStates(const winrt::hstring& fromState, const winrt::hstring& toState, float playbackMultiplier = 1.0f);
     void TransitionStates(const winrt::hstring& fromState, const winrt::hstring& toState, float playtbackMultiplier = 1.0f);
     void PlaySegment(float from, float to, float playbackMultiplier = 1.0f);
-    void TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source);
+    void TrySetForegroundProperty(winrt::Color color, winrt::IAnimatedVisualSource2 const& source = nullptr);
+    void TrySetForegroundProperty(winrt::IAnimatedVisualSource2 const& source = nullptr);
     void OnAnimationCompleted(winrt::IInspectable const&, winrt::CompositionBatchCompletedEventArgs const&);
     void OnForegroundPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args);
+    void OnForegroundBrushColorPropertyChanged(const winrt::DependencyObject& sender, const winrt::DependencyProperty& args);
     void SetRootPanelChildToFallbackIcon();
 
     tracker_ref<winrt::IAnimatedVisual> m_animatedVisual{ this };
@@ -74,6 +76,7 @@ class AnimatedIcon :
 
     ScopedBatchCompleted_revoker m_batchCompletedRevoker{ };
     winrt::FrameworkElement::LayoutUpdated_revoker m_layoutUpdatedRevoker{};
+    PropertyChanged_revoker m_foregroundColorPropertyChangedRevoker{};
 
     winrt::AnimatedIconAnimationQueueBehavior m_queueBehavior{ winrt::AnimatedIconAnimationQueueBehavior::SpeedUpQueueOne };
 };
diff --git a/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml b/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
index 5dddf1b4d3..d7e05be799 100644
--- a/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
+++ b/dev/AnimatedIcon/TestUI/AnimatedIconPage.xaml
@@ -15,7 +15,8 @@
     xmlns:myAnimatedvisuals="using:AnimatedVisuals"
     mc:Ignorable="d">
     <Page.Resources>
-        <SolidColorBrush x:Key="TestIconForeground" Color="#80808080"/>
+        <SolidColorBrush x:Key="TestIconForeground" Color="{StaticResource TestIconForegroundColor}"/>
+        <Color x:Key="TestIconForegroundColor">#80808080</Color>
         <Style TargetType="local:AnimatedIconHost">
             <Setter Property="Template">
                 <Setter.Value>
@@ -50,7 +51,7 @@
                                 </VisualStateGroup>
                             </VisualStateManager.VisualStateGroups>
                             <TextBlock Text="{TemplateBinding Title}"/>
-                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter" Foreground="{TemplateBinding Foreground}">
+                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter">
                                 <Border x:Name="Icon" controls:AnimatedIcon.State="Normal"/>
                             </ContentPresenter>
                             <TextBlock x:Name="StateTextBlock" HorizontalAlignment="Center"/>
@@ -119,7 +120,7 @@
                             </VisualStateManager.VisualStateGroups>
                             <CheckBox HorizontalAlignment="Right" IsChecked="{TemplateBinding IsChecked}" IsEnabled="False"/>
                             <TextBlock Text="{TemplateBinding Title}"/>
-                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter" Foreground="{TemplateBinding Foreground}">
+                            <ContentPresenter Height="200" Width="200" x:Name="IconPresenter">
                                 <Border x:Name="Icon" controls:AnimatedIcon.State="NormalOff"/>
                             </ContentPresenter>
                             <TextBlock x:Name="StateTextBlock" HorizontalAlignment="Center"/>
@@ -131,12 +132,14 @@
         </Style>
         
         <local:DoubleToStringConverter x:Key="DoubleToStringConverter"/>
+        <local:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter"/>
         
     </Page.Resources>
 
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12">
         <Grid.Resources>
             <local:DoubleToStringConverter x:Key="DoubleToStringConverter"/>
+            <local:ColorToSolidColorBrushConverter x:Key="ColorToSolidColorBrushConverter"/>
         </Grid.Resources>
         <Grid>
             <Grid.RowDefinitions>
@@ -144,17 +147,32 @@
                 <RowDefinition Height="auto"/>
                 <RowDefinition Height="auto"/>
                 <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
+                <RowDefinition Height="auto"/>
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
             <TextBlock HorizontalAlignment="Center" Text="Animation Duration Multiplier" Grid.Row="0"/>
             <Slider HorizontalAlignment="Center" Minimum="0.1" Maximum="5.0" StepFrequency="0.1" Value="1.0" ValueChanged="Slider_ValueChanged" Width="150" Grid.Row="1"/>
             <TextBlock HorizontalAlignment="Center" Text="Speed Up behavior Multiplier" Grid.Row="2"/>
             <Slider HorizontalAlignment="Center" Minimum="1.0" Maximum="15.0" StepFrequency="0.1" Value="7.0" ValueChanged="SpeedUpSlider_ValueChanged" Width="150" Grid.Row="3"/>
-            <ScrollViewer Grid.Row="4">
+            <TextBlock HorizontalAlignment="Center" Text="Foreground Color" Grid.Row="4"/>
+            <Button HorizontalAlignment="Center" Grid.Row="5">
+                <Rectangle Height="100" Width="100">
+                    <Rectangle.Fill>
+                        <SolidColorBrush Color="{Binding ElementName=ForegoundColorPicker, Path=Color}"/>
+                    </Rectangle.Fill>
+                </Rectangle>
+                <Button.Flyout>
+                    <Flyout>
+                        <controls:ColorPicker x:Name="ForegoundColorPicker"  Color="{StaticResource TestIconForegroundColor}"/>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
+            <ScrollViewer Grid.Row="6">
                 <StackPanel>
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_Cut" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_Cut" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -172,7 +190,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_Queue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_Queue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -190,7 +208,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIcon_SpeedUpQueue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="DropDownIcon_SpeedUpQueue" Title="AnimatedChevronDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -211,7 +229,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_Cut" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_Cut" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -229,7 +247,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_Queue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_Queue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -247,7 +265,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="DropDownIconNavView_SpeedUpQueue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="DropDownIconNavView_SpeedUpQueue" Title="AnimatedChevronUpDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -268,7 +286,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_Cut" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_Cut" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -286,7 +304,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_Queue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_Queue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -304,7 +322,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:ToggleAnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SideChevron_SpeedUpQueue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray">
+                            <local:ToggleAnimatedIconHost x:Name="SideChevron_SpeedUpQueue" Title="AnimatedChevronRightDownSmallVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:ToggleAnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -325,7 +343,7 @@
                     
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_Cut" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_Cut" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -340,7 +358,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_Queue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_Queue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -355,7 +373,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="HamburgerIcon_SpeedUpQueue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="HamburgerIcon_SpeedUpQueue" Title="AnimatedGlobalNavigationButtonVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -373,7 +391,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_Cut" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_Cut" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -388,7 +406,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_Queue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_Queue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -403,7 +421,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SettingsIcon_SpeedUpQueue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SettingsIcon_SpeedUpQueue" Title="AnimatedSettingsVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -421,7 +439,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_Cut" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_Cut" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -438,7 +456,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_Queue" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_Queue" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -455,7 +473,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="BackIcon_SpeedUpQueue" Title="AnimatedBackVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="BackIcon_SpeedUpQueue" Title="AnimatedBackVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -475,7 +493,7 @@
 
                     <StackPanel Orientation="Horizontal" Windows10FallCreatorsUpdate:Spacing="5">
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SearchIcon_Cut" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_Cut" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -490,7 +508,7 @@
                             <TextBlock Text="Cut Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}" x:Name="SearchIcon_Queue" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_Queue" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -505,7 +523,7 @@
                             <TextBlock Text="Queue Behavior" HorizontalAlignment="Center"/>
                         </StackPanel>
                         <StackPanel>
-                            <local:AnimatedIconHost Foreground="{StaticResource TestIconForeground}"  x:Name="SearchIcon_SpeedUpQueue" Title="AnimatedFindVisualSource" Background="DarkSlateGray">
+                            <local:AnimatedIconHost x:Name="SearchIcon_SpeedUpQueue" Title="AnimatedFindVisualSource" Background="DarkSlateGray" Foreground="{Binding ElementName=ForegoundColorPicker, Path=Color, Converter={StaticResource ColorToSolidColorBrushConverter}}">
                                 <local:AnimatedIconHost.IconSource>
                                     <controls:AnimatedIconSource>
                                         <controls:AnimatedIconSource.Source>
@@ -646,8 +664,11 @@
                                 </Setter>
                             </Style>
                         </StackPanel.Resources>
-                        <TextBlock Text="Button with AnimatedIcon in a StackPanel"/>
+                        <TextBlock Text="Button with AnimatedIcon in a StackPanel, notice the color does not change..."/>
                         <Button x:Name="myButton" Height="100" Width="100">
+                            <Button.Foreground>
+                                <SolidColorBrush Color="{Binding ElementName=ForegoundColorPicker, Path=Color}"/>
+                            </Button.Foreground>
                             <StackPanel>
                                 <TextBlock Text="Hello!"/>
                                 <!-- The two way binding in the template places the state property on the button, which allows the page to bind it into the animated icon. -->
@@ -656,6 +677,12 @@
                                 </controls:AnimatedIcon>
                             </StackPanel>
                         </Button>
+                        <controls:AnimatedIcon Height="50" Width="50">
+                            <controls:AnimatedIcon.Foreground>
+                                <SolidColorBrush Color="{Binding ElementName=ForegoundColorPicker, Path=Color}"/>
+                            </controls:AnimatedIcon.Foreground>
+                            <animatedvisuals:AnimatedFindVisualSource/>
+                        </controls:AnimatedIcon>
                         <StackPanel Background="Maroon">
                             <controls:AnimatedIcon Height="100" Width="100" Foreground="Pink">
                                 <controls:AnimatedIcon.FallbackIconSource>
diff --git a/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems b/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
index 8011a3996b..47125870a6 100644
--- a/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
+++ b/dev/AnimatedIcon/TestUI/AnimatedIcon_TestUI.projitems
@@ -21,6 +21,7 @@
       <DependentUpon>AnimatedIconPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)BrightnessSun.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)ColorToSolidColorBrushConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)DoubleToStringConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)MockIRichAnimatedIconSource.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ToggleAnimatedIconHost.cs" />
diff --git a/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs b/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs
new file mode 100644
index 0000000000..8250b441c6
--- /dev/null
+++ b/dev/AnimatedIcon/TestUI/ColorToSolidColorBrushConverter.cs
@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Windows.UI;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Media;
+
+namespace MUXControlsTestApp
+{
+    class ColorToSolidColorBrushConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            return new SolidColorBrush((Color)value);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            return ((SolidColorBrush)value).Color;
+        }
+    }
+}