Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DatePicker and TimePicker flyout visual updates #3947

Merged
merged 14 commits into from Mar 31, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion FeatureAreas.props 100644 → 100755
Expand Up @@ -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'">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that the inner loop feature areas need to be updated as well.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you be more specific about what is missing or what needs to change?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You will need to add this feature to the DatePicker group in line 73 since we need to build this project if want the styles for DatePicker to work as expected.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thats right, DatePicker should not be dependent on ColorFilterOverlayControl so this PropertyGroup needs to add that as a ProductOnly dependency.

</PropertyGroup>
<!-- Dependencies for AnimatedIcon -->
<PropertyGroup Condition="Exists('InnerLoopAreas.props') And $(SolutionName) == 'MUXControlsInnerLoop' And $(FeatureAnimatedIconEnabled) == 'true'">
<FeatureAnimatedVisualPlayerEnabled>productOnly</FeatureAnimatedVisualPlayerEnabled>
</PropertyGroup>
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions MUXControls.sln 100644 → 100755
Expand Up @@ -722,6 +722,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
Expand Down Expand Up @@ -797,6 +803,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
Expand Down Expand Up @@ -862,6 +869,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
Expand Down Expand Up @@ -948,6 +956,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
Expand Down Expand Up @@ -975,6 +984,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
Expand Down Expand Up @@ -1082,6 +1092,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
Expand Down Expand Up @@ -1804,6 +1815,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}
Expand Down
20 changes: 20 additions & 0 deletions MUXControlsInnerLoop.sln
Expand Up @@ -535,6 +535,16 @@ 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_APITests", "dev\ColorFilterOverlayControl\APITests\ColorFilterOverlayControl_APITests.shproj", "{821DA6EA-5C66-46BB-BD44-A635E7FB4758}"
EndProject
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "ColorFilterOverlayControl_TestUI", "dev\ColorFilterOverlayControl\TestUI\ColorFilterOverlayControl_TestUI.shproj", "{52AAA6ED-E5A0-41BB-8858-66249333A8D4}"
EndProject
Project("{D954291E-2A0B-460D-934E-DC6B0785DB48}") = "ColorFilterOverlayControl_InteractionTests", "dev\ColorFilterOverlayControl\InteractionTests\ColorFilterOverlayControl_InteractionTests.shproj", "{A92B880B-EFD1-49F6-9B95-4C5777AEEF61}"
EndProject
Global
GlobalSection(SharedMSBuildProjectFiles) = preSolution
dev\ComboBox\ComboBox.vcxitems*{00523caf-422a-4185-9392-d374b72a019a}*SharedItemsImports = 9
Expand Down Expand Up @@ -607,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
Expand All @@ -626,6 +637,7 @@ Global
dev\Common\Common.vcxitems*{80ad7f51-8997-47b9-bb41-078b81cff9b0}*SharedItemsImports = 9
dev\NumberBox\APITests\NumberBox_APITests.projitems*{80af98ca-bc1d-4011-8460-5671799ec419}*SharedItemsImports = 13
dev\Interactions\SliderInteraction\TestUI\SliderInteraction_TestUI.projitems*{80f1f883-d49b-407d-9e77-c9b0e62b61a9}*SharedItemsImports = 13
dev\ColorFilterOverlayControl\APITests\ColorFilterOverlayControl_APITests.projitems*{821da6ea-5c66-46bb-bd44-a635e7fb4758}*SharedItemsImports = 13
dev\RadioButtons\TestUI\RadioButtons_TestUI.projitems*{833a6892-a079-469a-81c7-54d4cd88029b}*SharedItemsImports = 13
dev\AnimatedIcon\TestUI\AnimatedIcon_TestUI.projitems*{83fd36c0-189f-4e95-8002-9b73905ca301}*SharedItemsImports = 13
dev\TestHooks\TestHooks.vcxitems*{848448d5-f717-4f88-8f99-311cd60587fa}*SharedItemsImports = 9
Expand Down Expand Up @@ -659,6 +671,7 @@ Global
dev\ColorPicker\InteractionTests\ColorPicker_InteractionTests.projitems*{a4d2fae8-e7fc-4100-91ff-2202fac91c70}*SharedItemsImports = 13
dev\CommonStyles\TestUI\CommonStyles_TestUI.projitems*{a7f6d6c4-a5a9-43eb-930c-b766417a5e5c}*SharedItemsImports = 13
dev\Materials\Acrylic\TestUI\AcrylicBrush_TestUI.projitems*{a800e818-7212-4fd7-ae3a-1dcab539db87}*SharedItemsImports = 13
dev\ColorFilterOverlayControl\InteractionTests\ColorFilterOverlayControl_InteractionTests.projitems*{a92b880b-efd1-49f6-9b95-4c5777aeef61}*SharedItemsImports = 13
dev\PagerControl\PagerControl.vcxitems*{ab3261a7-9a8d-4a27-aea2-3aac0419c889}*SharedItemsImports = 9
dev\AnimatedIcon\AnimatedIcon.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
dev\AnimatedVisualPlayer\AnimatedVisualPlayer.vcxitems*{ad0c90b0-4845-4d4b-88f1-86f653f8171b}*SharedItemsImports = 4
Expand Down Expand Up @@ -703,6 +716,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
Expand Down Expand Up @@ -1217,6 +1231,12 @@ 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}
{8AFF7072-9957-475B-83B7-D0B786228232} = {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}
{821DA6EA-5C66-46BB-BD44-A635E7FB4758} = {AED8C469-E765-4A92-A66E-D20513A049A5}
{52AAA6ED-E5A0-41BB-8858-66249333A8D4} = {AED8C469-E765-4A92-A66E-D20513A049A5}
{A92B880B-EFD1-49F6-9B95-4C5777AEEF61} = {AED8C469-E765-4A92-A66E-D20513A049A5}
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {D93836AB-52D3-4DE2-AE25-23F26F55ECED}
Expand Down
113 changes: 113 additions & 0 deletions 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();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

compositor [](start = 13, length = 10)

nit: const


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::Composition::Effects::ColorMatrixEffect>();
colorMatrixEffect->Source(winrt::CompositionEffectSourceParameter{ L"source" });
winrt::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);
}

}
35 changes: 35 additions & 0 deletions 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.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{};
};
19 changes: 19 additions & 0 deletions dev/ColorFilterOverlayControl/ColorFilterOverlayControl.idl
@@ -0,0 +1,19 @@
namespace MU_XCP_NAMESPACE
{

[WUXC_VERSION_PREVIEW]
[webhosthidden]
[MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
[MUX_PROPERTY_CHANGED_CALLBACK_METHODNAME("OnPropertyChanged")]
unsealed runtimeclass ColorFilterOverlayControl : Windows.UI.Xaml.Controls.Grid
StephenLPeters marked this conversation as resolved.
Show resolved Hide resolved
{
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; };
}

}