[DatePicker | TimePicker] Update visual styles

FeatureAreas.props

@@ -221,7 +221,10 @@
   <!-- Dependencies for ImageIcon -->
   <PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureImageIconEnabled) == 'true'">
   </PropertyGroup>
-    <!-- Dependencies for AnimatedIcon -->
+  <!-- Dependencies for ColorFilterOverlayControl -->
+  <PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureColorFilterOverlayControlEnabled) == 'true'">
+  </PropertyGroup>
+  <!-- Dependencies for AnimatedIcon -->
   <PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureAnimatedIconEnabled) == 'true'">
     <FeatureAnimatedVisualPlayerEnabled>productOnly</FeatureAnimatedVisualPlayerEnabled>
   </PropertyGroup>
@@ -287,6 +290,7 @@
     <FeaturePipsPagerEnabled>true</FeaturePipsPagerEnabled>
     <FeatureImageIconEnabled>true</FeatureImageIconEnabled>
     <FeatureAnimatedIconEnabled>true</FeatureAnimatedIconEnabled>
+    <FeatureColorFilterOverlayControlEnabled>true</FeatureColorFilterOverlayControlEnabled>
   </PropertyGroup>
   <PropertyGroup>
     <DefineConstants Condition="$(FeatureScrollPresenterEnabled) =='true'">$(DefineConstants);FEATURE_SCROLLPRESENTER_ENABLED</DefineConstants>

MUXControls.sln

@@ -723,6 +723,12 @@ Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_TestUI", "dev\
 EndProject
 Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_APITests", "dev\AnimatedIcon\APITests\AnimatedIcon_APITests.shproj", "{DB15FF28-AB3A-4FED-A1D5-004A095A3FD5}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ColorFilterOverlayControl", "ColorFilterOverlayControl", "{7FA40D21-3085-41B3-9C46-6CBC2F56B442}"
+EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ColorFilterOverlayControl", "dev\ColorFilterOverlayControl\ColorFilterOverlayControl.vcxitems", "{D03847C1-7EE7-4423-82FD-3CB31DAF98D1}"
+EndProject
+Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "ColorFilterOverlayControl_TestUI", "dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.shproj", "{52AAA6ED-E5A0-41BB-8858-66249333A8D4}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
@@ -798,6 +804,7 @@ Global
 		dev\Expander\TestUI\Expander_TestUI.projitems*{50c1f1d3-20aa-49a8-9e4c-cf4e5811a1d8}*SharedItemsImports = 13
 		dev\RadioMenuFlyoutItem\TestUI\RadioMenuFlyoutItem_TestUI.projitems*{50e838a2-a886-46c9-ab0b-a57f510ce643}*SharedItemsImports = 13
 		dev\PersonPicture\APITests\PersonPicture_APITests.projitems*{5243ef2c-f250-48bd-b633-39cc2a0a38aa}*SharedItemsImports = 13
+		dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.projitems*{52aaa6ed-e5a0-41bb-8858-66249333a8d4}*SharedItemsImports = 13
 		dev\PullToRefresh\TestUI\PTR_TestUI.projitems*{549c8eb7-e099-4eab-a1f6-faa3fa79b9e0}*SharedItemsImports = 13
 		dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{55cb08ca-19fe-4db9-8160-a4ec47984b95}*SharedItemsImports = 13
 		dev\Breadcrumb\Breadcrumb.vcxitems*{563fe343-c6b0-447b-831a-b0ce3aa7a688}*SharedItemsImports = 9
@@ -863,6 +870,7 @@ Global
 		dev\CalendarView\CalendarView.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
 		dev\CheckBox\CheckBox.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
 		dev\Collections\Collections.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
+		dev\ColorFilterOverlayControl\ColorFilterOverlayControl.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
 		dev\ColorPicker\ColorPicker.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
 		dev\ComboBox\ComboBox.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
 		dev\CommandBarFlyout\CommandBarFlyout.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
@@ -949,6 +957,7 @@ Global
 		dev\AnimatedVisualPlayer\InteractionTests\AnimatedVisualPlayer_InteractionTests.projitems*{cbaaccf6-a27d-40b3-980b-adf51a2ebb89}*SharedItemsImports = 13
 		dev\InfoBar\InfoBar.vcxitems*{ccc102b7-f5ef-479d-94f1-008d189448b1}*SharedItemsImports = 9
 		dev\LayoutPanel\APITests\LayoutPanel_APITests.projitems*{cddf46ef-aa2d-4bb3-b33e-98b3dbb3c41b}*SharedItemsImports = 13
+		dev\ColorFilterOverlayControl\ColorFilterOverlayControl.vcxitems*{d03847c1-7ee7-4423-82fd-3cb31daf98d1}*SharedItemsImports = 9
 		dev\Interactions\SliderInteraction\SliderInteraction.vcxitems*{d097a4d5-6b61-424d-99f0-f335eff41665}*SharedItemsImports = 9
 		dev\TabView\InteractionTests\TabView_InteractionTests.projitems*{d1e297b4-5e5b-4807-8624-4141c817a98a}*SharedItemsImports = 13
 		dev\PipsPager\PipsPager.vcxitems*{d1eb61d8-c689-4ad1-bd61-fdaa50362563}*SharedItemsImports = 9
@@ -976,6 +985,7 @@ Global
 		dev\CalendarView\APITests\CalendarView_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\CalendarView\TestUI\CalendarView_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\CheckBox\TestUI\CheckBox_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
+		dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\ColorPicker\APITests\ColorPicker_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\ColorPicker\TestUI\ColorPicker_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\ComboBox\APITests\ComboBox_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
@@ -1083,6 +1093,7 @@ Global
 		dev\CalendarView\APITests\CalendarView_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\CalendarView\TestUI\CalendarView_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\CheckBox\TestUI\CheckBox_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
+		dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\ColorPicker\APITests\ColorPicker_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\ColorPicker\TestUI\ColorPicker_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\ComboBox\APITests\ComboBox_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
@@ -1810,6 +1821,9 @@ Global
 		{F1C8A5A1-B1B0-4095-8849-E550FCF2EBF6} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
 		{83FD36C0-189F-4E95-8002-9B73905CA301} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
 		{DB15FF28-AB3A-4FED-A1D5-004A095A3FD5} = {221D9F75-FFF3-49C1-A88B-7F3898A5756E}
+		{7FA40D21-3085-41B3-9C46-6CBC2F56B442} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
+		{D03847C1-7EE7-4423-82FD-3CB31DAF98D1} = {7FA40D21-3085-41B3-9C46-6CBC2F56B442}
+		{52AAA6ED-E5A0-41BB-8858-66249333A8D4} = {7FA40D21-3085-41B3-9C46-6CBC2F56B442}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}

MUXControlsInnerLoop.sln

@@ -538,6 +538,12 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "AnimatedIcon", "dev\Animate
 EndProject
 Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "AnimatedIcon_TestUI", "dev\AnimatedIcon\TestUI\AnimatedIcon_TestUI.shproj", "{83FD36C0-189F-4E95-8002-9B73905CA301}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "ColorFilterOverlayControl", "ColorFilterOverlayControl", "{AED8C469-E765-4A92-A66E-D20513A049A5}"
+EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ColorFilterOverlayControl", "dev\ColorFilterOverlayControl\ColorFilterOverlayControl.vcxitems", "{D03847C1-7EE7-4423-82FD-3CB31DAF98D1}"
+EndProject
+Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "ColorFilterOverlayControl_TestUI", "dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.shproj", "{52AAA6ED-E5A0-41BB-8858-66249333A8D4}"
+EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
@@ -611,6 +617,7 @@ Global
 		dev\Expander\TestUI\Expander_TestUI.projitems*{50c1f1d3-20aa-49a8-9e4c-cf4e5811a1d8}*SharedItemsImports = 13
 		dev\RadioMenuFlyoutItem\TestUI\RadioMenuFlyoutItem_TestUI.projitems*{50e838a2-a886-46c9-ab0b-a57f510ce643}*SharedItemsImports = 13
 		dev\PersonPicture\APITests\PersonPicture_APITests.projitems*{5243ef2c-f250-48bd-b633-39cc2a0a38aa}*SharedItemsImports = 13
+		dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.projitems*{52aaa6ed-e5a0-41bb-8858-66249333a8d4}*SharedItemsImports = 13
 		dev\PullToRefresh\TestUI\PTR_TestUI.projitems*{549c8eb7-e099-4eab-a1f6-faa3fa79b9e0}*SharedItemsImports = 13
 		dev\MenuBar\MenuBar_TestUI\MenuBar_TestUI.projitems*{55cb08ca-19fe-4db9-8160-a4ec47984b95}*SharedItemsImports = 13
 		dev\Breadcrumb\Breadcrumb.vcxitems*{563fe343-c6b0-447b-831a-b0ce3aa7a688}*SharedItemsImports = 9
@@ -707,6 +714,7 @@ Global
 		dev\AnimatedVisualPlayer\InteractionTests\AnimatedVisualPlayer_InteractionTests.projitems*{cbaaccf6-a27d-40b3-980b-adf51a2ebb89}*SharedItemsImports = 13
 		dev\InfoBar\InfoBar.vcxitems*{ccc102b7-f5ef-479d-94f1-008d189448b1}*SharedItemsImports = 9
 		dev\LayoutPanel\APITests\LayoutPanel_APITests.projitems*{cddf46ef-aa2d-4bb3-b33e-98b3dbb3c41b}*SharedItemsImports = 13
+		dev\ColorFilterOverlayControl\ColorFilterOverlayControl.vcxitems*{d03847c1-7ee7-4423-82fd-3cb31daf98d1}*SharedItemsImports = 9
 		dev\Interactions\SliderInteraction\SliderInteraction.vcxitems*{d097a4d5-6b61-424d-99f0-f335eff41665}*SharedItemsImports = 9
 		dev\TabView\InteractionTests\TabView_InteractionTests.projitems*{d1e297b4-5e5b-4807-8624-4141c817a98a}*SharedItemsImports = 13
 		dev\PipsPager\PipsPager.vcxitems*{d1eb61d8-c689-4ad1-bd61-fdaa50362563}*SharedItemsImports = 9
@@ -719,8 +727,6 @@ Global
 		dev\ImageIcon\TestUI\ImageIcon_TestUI.projitems*{dde1c022-6f9a-4067-89c2-81f2eeaf249f}*SharedItemsImports = 13
 		dev\TreeView\APITests\TreeView_APITests.projitems*{de885c66-929c-464e-bac4-3e076ec46483}*SharedItemsImports = 13
 		dev\Pivot\TestUI\Pivot_TestUI.projitems*{deb3fa60-e4a7-4735-89f2-363c7c56b428}*SharedItemsImports = 13
-		dev\AnimatedIcon\APITests\AnimatedIcon_APITests.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
-		dev\AnimatedIcon\TestUI\AnimatedIcon_TestUI.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\CommonManaged\CommonManaged.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		test\TestAppUtils\TestAppUtils.projitems*{dedc1e4f-cfa5-4443-83eb-e79d425df7e7}*SharedItemsImports = 4
 		dev\SplitButton\InteractionTests\SplitButton_InteractionTests.projitems*{e1c861e2-c4d9-41e1-aed7-5e203451bd4d}*SharedItemsImports = 13
@@ -740,8 +746,6 @@ Global
 		dev\InfoBar\InteractionTests\InfoBar_InteractionTests.projitems*{f470a64e-780e-45aa-abb7-73a8734e51d7}*SharedItemsImports = 13
 		dev\Materials\Acrylic\InteractionTests\AcrylicBrush_InteractionTests.projitems*{f601284a-00c1-49f9-99b3-70d45585f784}*SharedItemsImports = 13
 		dev\SplitButton\SplitButton.vcxitems*{faf114dd-af1f-4d9f-a511-354c19912aad}*SharedItemsImports = 9
-		dev\AnimatedIcon\APITests\AnimatedIcon_APITests.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
-		dev\AnimatedIcon\TestUI\AnimatedIcon_TestUI.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\CommonManaged\CommonManaged.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		test\TestAppUtils\TestAppUtils.projitems*{fbc396f5-26dd-4ca3-981e-c7bc9fea4546}*SharedItemsImports = 4
 		dev\Slider\Slider.vcxitems*{fc2178ca-7f72-40f0-916c-a2b3750bbb6c}*SharedItemsImports = 9
@@ -1222,6 +1226,9 @@ Global
 		{16AA0E0D-A66B-47D5-8051-541BE529F869} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
 		{F1C8A5A1-B1B0-4095-8849-E550FCF2EBF6} = {16AA0E0D-A66B-47D5-8051-541BE529F869}
 		{83FD36C0-189F-4E95-8002-9B73905CA301} = {16AA0E0D-A66B-47D5-8051-541BE529F869}
+		{AED8C469-E765-4A92-A66E-D20513A049A5} = {67599AD5-51EC-44CB-85CE-B60CD8CBA270}
+		{D03847C1-7EE7-4423-82FD-3CB31DAF98D1} = {AED8C469-E765-4A92-A66E-D20513A049A5}
+		{52AAA6ED-E5A0-41BB-8858-66249333A8D4} = {AED8C469-E765-4A92-A66E-D20513A049A5}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.cpp

@@ -0,0 +1,113 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+#include "pch.h"
+#include "common.h"
+#include "ColorFilterOverlayControl.h"
+#include "RuntimeProfiler.h"
+#include "ResourceAccessor.h"
+
+struct XamlCompBrush : winrt::Windows::UI::Xaml::Media::XamlCompositionBrushBaseT<XamlCompBrush>
+{
+    void SetCompositionBrush(winrt::CompositionBrush const& brush)
+    {
+        CompositionBrush(brush);
+    }
+};
+
+ColorFilterOverlayControl::ColorFilterOverlayControl()
+{
+    SizeChanged([this](auto&&...) {
+        InvalidateBrush();
+        });
+}
+
+void ColorFilterOverlayControl::OnPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
+{
+    winrt::IDependencyProperty property = args.Property();
+
+    InvalidateBrush();
+}
+
+void ColorFilterOverlayControl::InvalidateBrush()
+{
+    // Delay brush updates until Tick to coalesce changes and avoid rebuilding the effect when we don't need to.
+    if (!_needsBrushUpdate)
+    {
+        _needsBrushUpdate = true;
+        SharedHelpers::QueueCallbackForCompositionRendering([weakThis = get_weak(), this]() {
+            if (weakThis.get())
+            {
+                UpdateBrush();
+            }
+            _needsBrushUpdate = false;
+        });
+    }
+}
+
+void ColorFilterOverlayControl::UpdateBrush()
+{
+    if (auto targetElement = TargetElement())
+    {
+        auto const newColor = ReplacementColor();
+        if (_replacementColor != newColor)
+        {
+            _replacementColor = newColor;
+            _effectFactory = nullptr;
+        }
+
+        auto compositor = winrt::Window::Current().Compositor();
+
+        if (!_effectFactory)
+        {
+            // Build an effect that takes the source image and uses the alpha channel and replaces all other channels with
+            // the ReplacementColor's RGB.
+            auto colorMatrixEffect = winrt::make_self<Microsoft::UI::Private::Composition::Effects::ColorMatrixEffect>();
+            colorMatrixEffect->Source(winrt::CompositionEffectSourceParameter{ L"source" });
+            winrt::Microsoft::UI::Private::Composition::Effects::Matrix5x4 colorMatrix = {};
+
+            // If the ReplacementColor is not transparent then use the RGB values as the new color. Otherwise
+            // just show the target by using an Identity colorMatrix.
+            if (_replacementColor.A != 0)
+            {
+                colorMatrix.M51 = (float)((_replacementColor.R / 255.0));
+                colorMatrix.M52 = (float)((_replacementColor.G / 255.0));
+                colorMatrix.M53 = (float)((_replacementColor.B / 255.0));
+                colorMatrix.M44 = 1;
+            }
+            else
+            {
+                colorMatrix.M11 = colorMatrix.M22 = colorMatrix.M33 = colorMatrix.M44 = 1;
+            }
+            colorMatrixEffect->ColorMatrix(colorMatrix);
+
+            _effectFactory = compositor.CreateEffectFactory(*colorMatrixEffect);
+        }
+
+        auto const actualSize = winrt::float2{ (float)ActualWidth(), (float)ActualHeight() };
+        auto transform = TransformToVisual(targetElement);
+        auto const offset = transform.TransformPoint(winrt::Point{ 0, 0 });
+
+        // Create a VisualSurface positioned at the same location as this control and feed that
+        // through the color effect.
+        auto surfaceBrush = compositor.CreateSurfaceBrush();
+        surfaceBrush.Stretch(winrt::CompositionStretch::None);
+        auto surface = compositor.CreateVisualSurface();
+
+        // Select the source visual and the offset/size of this control in that element's space.
+        surface.SourceVisual(winrt::ElementCompositionPreview::GetElementVisual(targetElement));
+        surface.SourceOffset({ offset.X, offset.Y });
+        surface.SourceSize(actualSize);
+        surfaceBrush.Surface(surface);
+        surfaceBrush.Stretch(winrt::CompositionStretch::None);
+        auto compBrush = _effectFactory.CreateBrush();
+        compBrush.SetSourceParameter(L"source", surfaceBrush);
+
+        auto visual = compositor.CreateSpriteVisual();
+        visual.Size(actualSize);
+        visual.Brush(compBrush);
+
+        winrt::ElementCompositionPreview::SetElementChildVisual(*this, visual);
+    }
+
+}

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.h

@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+#pragma once
+
+#include "pch.h"
+#include "common.h"
+
+#include "ColorFilterOverlayControl.g.h"
+#include "ColorFilterOverlayControl.properties.h"
+
+#pragma warning(push)
+#pragma warning(disable: 6101)  // Returning uninitialized memory '<value>'.  A successful path through the function does not set the named _Out_ parameter.
+#include "microsoft.ui.private.composition.effects_impl.h"
+#pragma warning(pop)
+
+class ColorFilterOverlayControl :
+    public ReferenceTracker<ColorFilterOverlayControl, winrt::implementation::ColorFilterOverlayControlT>,
+    public ColorFilterOverlayControlProperties
+{
+
+public:
+    ColorFilterOverlayControl();
+    ~ColorFilterOverlayControl() {}
+
+    void OnPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);
+
+private:
+    void UpdateBrush();
+    void InvalidateBrush();
+
+    winrt::CompositionEffectFactory _effectFactory{ nullptr };
+    winrt::Color _replacementColor{};
+    bool _needsBrushUpdate{};
+};

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.idl

@@ -0,0 +1,19 @@
+namespace MU_XCP_NAMESPACE
+{
+
+[MUX_PUBLIC]
+[webhosthidden]
+[MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
+[MUX_PROPERTY_CHANGED_CALLBACK_METHODNAME("OnPropertyChanged")]
+unsealed runtimeclass ColorFilterOverlayControl : Windows.UI.Xaml.Controls.Grid
+{
+    ColorFilterOverlayControl();
+
+    Windows.UI.Xaml.UIElement TargetElement { get; set; };
+    Windows.UI.Color ReplacementColor { get; set; };
+
+    static Windows.UI.Xaml.DependencyProperty TargetElementProperty{ get; };
+    static Windows.UI.Xaml.DependencyProperty ReplacementColorProperty{ get; };
+}
+
+}

dev/ColorFilterOverlayControl/ColorFilterOverlayControl.vcxitems

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Label="Globals">
+    <MSBuildAllProjects>$(MSBuildAllProjects);$(MSBuildThisFileFullPath)</MSBuildAllProjects>
+    <HasSharedItems>true</HasSharedItems>
+    <ItemsProjectGuid>{D03847C1-7EE7-4423-82FD-3CB31DAF98D1}</ItemsProjectGuid>
+  </PropertyGroup>
+  <ItemDefinitionGroup>
+    <ClCompile>
+      <AdditionalIncludeDirectories>%(AdditionalIncludeDirectories);$(MSBuildThisFileDirectory)</AdditionalIncludeDirectories>
+      <PreprocessorDefinitions>%(PreprocessorDefinitions);ColorFilterOverlayControl_INCLUDED</PreprocessorDefinitions>
+    </ClCompile>
+  </ItemDefinitionGroup>
+  <ItemGroup>
+    <ProjectCapability Include="SourceItemsFromImports" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClInclude Include="$(MSBuildThisFileDirectory)ColorFilterOverlayControl.h" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Generated\ColorFilterOverlayControl.properties.cpp" />
+    <ClCompile Include="$(MSBuildThisFileDirectory)ColorFilterOverlayControl.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <Midl Include="$(MSBuildThisFileDirectory)ColorFilterOverlayControl.idl" />
+  </ItemGroup>
+</Project>