Attached Shadows (Composition and Win2D + Animations) #4179

michael-hawker · 2021-08-12T20:34:35Z

Fixes #3122 #3607 #3516

Also implements #3693 for the new DropShadow.

FYI @seanocali as this is a different implementation approach (which is simpler to use outside of the DropShadowPanel we've been working on) but should hopefully achieve the same result.

This PR adds attached shadows which can easily be attached to any FrameworkElement without needing to modify the layout like DropShadowPanel does today. They can also be shared using a resource, added to the style of an element, and animated! All the things! 🎉

PR Type

What kind of change does this PR introduce?

Feature by @Ryken100 and integrated/extended by @michael-hawker

What is the current behavior?

DropShadowPanel is clunky and requires modifying how you layout your app.

What is the new behavior?

Just attach a shadow and be done! (DropShadowPanel is deprecated.)

PR Checklist

Composition Only Shadow Support? (with Target)
Add XML Docs
Animation Support to Explicit Animation System?
Bug can't use AttachedCardShadow directly with Border?

Please check if your PR fulfills the following requirements:

Tested code with current supported SDKs
Pull Request has been submitted to the documentation repository instructions. Link:
Sample in sample app has been added / updated (for bug fixes / features)
- Icon has been created (if new sample) following the Thumbnail Style Guide and templates
New major technical changes in the toolkit have or will be added to the Wiki e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
Tests for the changes have been added (for bug fixes / features) (if applicable)
Header has been added to all new source files (run build/UpdateHeaders.bat)
Contains NO breaking changes

Other information

ghost · 2021-08-12T20:34:38Z

Thanks michael-hawker for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

michael-hawker · 2021-08-12T20:38:26Z

Microsoft.Toolkit.Uwp.UI/Shadows/Shadows.cs

+    /// <summary>
+    /// Helper class for attaching <see cref="AttachedShadowBase"/> shadows to <see cref="FrameworkElement"/>s.
+    /// </summary>
+    public static class Shadows


Community Suggested we call this Effects and have the property be called Shadow so we'd get:
<ui:Effects.Shadow> for the attached property.

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs

michael-hawker · 2021-08-19T18:12:32Z

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs

+            // Position our shadow in the correct spot to match the corresponding element.
+            context.SpriteVisual.Size = context.Element.RenderSize.ToVector2();
+            context.SpriteVisual.Offset = context.Element.CoordinatesFrom(CastTo).ToVector3();


@Ryken100 suggested somehow using composition animation to lock the two together? @Sergio0694 thoughts on this too?

Right now I just update the size/offset when the mask is created and in OnSizeChanged below. This seems to work alright for most basic scenarios, but I would imagine would break down with extra translations and if the element casting is animated?

Just an idea, but thinking we might be able to use a composition animation to bind the two together like we're doing with BindSize for the brushes? I mean not with exactly the same code, but by reusing the same concept:

WindowsCommunityToolkit/Microsoft.Toolkit.Uwp.UI.Media/Extensions/Windows.UI.Composition/CompositionObjectExtensions.cs

Lines 25 to 34 in b605154

public static void BindSize(this CompositionObject source, UIElement target)

{

var visual = ElementCompositionPreview.GetElementVisual(target);

var bindSizeAnimation = source.Compositor.CreateExpressionAnimation($"{nameof(visual)}.Size");

bindSizeAnimation.SetReferenceParameter(nameof(visual), visual);

// Start the animation

source.StartAnimation("Size", bindSizeAnimation);

}

Yeah, that could work for Size, but Offset may not work the same as we need to do the absolute offset, eh?

Which means we still need the SizeChanged on the parent at least as that effects the offsets...?

michael-hawker · 2021-08-25T18:13:32Z

Ugh, need to update to latest. Will fix that and then also need to double-check if I deprecated DropShadowPanel fully...

…e for simplification

… itself is 1809+ now. Add Deprecation message we missed to RadialProgressBar control.

Add additional shortcuts/fallbacks for parsing other Vector formats to different types

Had to create static Attached Property location Had to convert Vector3 to string for XAML parsing Made empty strings return zerod

…rder)

michael-hawker · 2021-08-25T20:08:33Z

Need to update the Vector tests to account for the new format options I added for better string parsing.

…Shadow PR

michael-hawker · 2021-08-25T23:18:15Z

Alright, Vector unit tests are passing locally now (and added new ones). So we should be all good with the new behavior now. Hopefully @Sergio0694 won't mind... 🙈

They do map to existing constructors of the underlying types, so feels good. Also re-used the underlying methods to not add extra complexity to implementation even if it's a bit less performant, but we're doing string parsing here after all still... 😋

This was needed to make shadows play nicer as they're technically Vector3 properties but the Z value is ignored, so it's easier in the Sample App to just take a "16,16" value and make the Vector3.

XAML-Knight

Approved - nice shadows

Microsoft.Toolkit.Uwp.SampleApp/Common/Vector3Converter.cs

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedShadowCompositionXaml.bind

…adowCompositionXaml.bind

Rosuavio

Love the API and it works well from my testing!

ghost · 2021-08-27T21:05:48Z

Hello @michael-hawker!

Because this pull request has the auto merge :zap: label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.

Sergio0694 · 2021-08-27T21:08:54Z

@michael-hawker Removed the auto-merge one sec, I'm going through the code and had a couple of questions to ask 😄

Sergio0694

Sorry for the delay, left a few notes 😄

Microsoft.Toolkit/TypedResourceKey.cs

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedShadowBase.cs

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs

Microsoft.Toolkit.Uwp.UI/Shadows/IAttachedShadow.cs

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedShadowElementContext.cs

Co-authored-by: Sergio Pedri <sergio0694@live.com>

ghost · 2021-08-27T21:36:24Z

This PR has been marked as "needs attention 👋" and awaiting a response from the team.

Sergio0694

LGTM!

michael-hawker added the extensions ⚡ label Aug 12, 2021

michael-hawker added this to the 7.1 milestone Aug 12, 2021

ghost requested review from azchohfi and Rosuavio August 12, 2021 20:34

ghost added the feature request 📬 A request for new changes to improve functionality label Aug 12, 2021

michael-hawker commented Aug 12, 2021

View reviewed changes

michael-hawker commented Aug 19, 2021

View reviewed changes

Microsoft.Toolkit.Uwp.UI/Shadows/AttachedDropShadow.cs Outdated Show resolved Hide resolved

michael-hawker commented Aug 19, 2021

View reviewed changes

This was referenced Aug 19, 2021

[Feature] Shadow Receiver XAML Helpers #3122

Closed

Color picker fixes #4134

Merged

michael-hawker added the next preview ✈️ Label for marking what we want to include in the next preview release for developers to try. label Aug 24, 2021

michael-hawker changed the title ~~🚧 Draft - Ryken100 - Attached Shadows~~ Attached Shadows (Composition and Win2D + Animations) Aug 25, 2021

michael-hawker marked this pull request as ready for review August 25, 2021 18:12

chris-blackman and others added 15 commits August 25, 2021 11:42

Initial attached shadow code

ab486ec

Documentation update

795c57e

Fixed member access

5d1c7bf

Move DropShadowPanel sample into shared folder and remove backing pag…

bb9dc4b

…e for simplification

Clean-up out-dated min version warnings on samples as the Toolkit min…

863e75c

… itself is 1809+ now. Add Deprecation message we missed to RadialProgressBar control.

Move common Shadow base helpers to a folder in Uwp.UI

e3c6fe2

Move AttachedShadow to root namespace for Uwp.UI.Media

f2a8254

Add Vector3 support for Sample Bindings

72d524c

Add additional shortcuts/fallbacks for parsing other Vector formats to different types

Add AttachedShadow Sample

ed42e41

Had to create static Attached Property location Had to convert Vector3 to string for XAML parsing Made empty strings return zerod

Clean-up some documentation and info about min version to sample app

f48df97

Rename Shadows.Attached to Effects.Shadow

75e53c9

Add more samples (though one doesn't work for some reason with raw Bo…

4a651dd

…rder)

Fix Border based Example

2096e5d

Add initial Composition based AttachedDropShadow support

0459a89

Add initial basic animation support for Shadows

8647919

Deprecate DropShadowPanel

b34f441

michael-hawker force-pushed the ryken100/feature-AttachedShadows branch from b88e4a2 to b34f441 Compare August 25, 2021 18:53

michael-hawker mentioned this pull request Aug 25, 2021

[Future] 7.1 Release Plan #4045

Closed

27 tasks

Update String to Vector Unit Tests to address new scenarios added in …

c932579

…Shadow PR

XAML-Knight approved these changes Aug 27, 2021

View reviewed changes

Microsoft.Toolkit.Uwp.SampleApp/Common/Vector3Converter.cs Outdated Show resolved Hide resolved

Merge branch 'main' into ryken100/feature-AttachedShadows

5ab106e

michael-hawker commented Aug 27, 2021

View reviewed changes

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedShadowCompositionXaml.bind Outdated Show resolved Hide resolved

Update Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedSh…

f3b0e5c

…adowCompositionXaml.bind

michael-hawker mentioned this pull request Aug 27, 2021

x:Bind initialization timing conflict when used in ResourceDictionary - NullReferenceException microsoft/microsoft-ui-xaml#5786

Open

Rosuavio approved these changes Aug 27, 2021

View reviewed changes

Update Microsoft.Toolkit.Uwp.SampleApp/Common/Vector3Converter.cs

01c9fa3

michael-hawker added the auto merge ⚡ label Aug 27, 2021

Sergio0694 removed the auto merge ⚡ label Aug 27, 2021

Sergio0694 requested changes Aug 27, 2021

View reviewed changes

ghost added the needs author feedback 📝 label Aug 27, 2021

Make field initialization static

2404be9

Co-authored-by: Sergio Pedri <sergio0694@live.com>

ghost added needs attention 👋 and removed needs author feedback 📝 labels Aug 27, 2021

Clean-up Shadow internal part usage based on @Sergio0694 PR comments

e418928

michael-hawker added the auto merge ⚡ label Aug 27, 2021

Sergio0694 approved these changes Aug 27, 2021

View reviewed changes

ghost merged commit 5d5d86f into CommunityToolkit:main Aug 27, 2021

michael-hawker mentioned this pull request Sep 1, 2021

🚨 7.1 Package Size Regressions #4218

Closed

5 tasks

michael-hawker mentioned this pull request Sep 20, 2021

Add ConstrainedBox and Attached Shadow docs MicrosoftDocs/WindowsCommunityToolkitDocs#567

Merged

5 tasks

Sergio0694 mentioned this pull request Sep 27, 2021

Fixed incorrect paths for pipeline sample resources #4280

Merged

11 tasks

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Attached Shadows (Composition and Win2D + Animations) #4179

Attached Shadows (Composition and Win2D + Animations) #4179

michael-hawker commented Aug 12, 2021 •

edited

Loading

ghost commented Aug 12, 2021

michael-hawker Aug 12, 2021

michael-hawker Aug 19, 2021

Sergio0694 Aug 23, 2021

michael-hawker Aug 23, 2021

michael-hawker commented Aug 25, 2021

michael-hawker commented Aug 25, 2021

michael-hawker commented Aug 25, 2021

XAML-Knight left a comment

Rosuavio left a comment

ghost commented Aug 27, 2021

Sergio0694 commented Aug 27, 2021

Sergio0694 left a comment

ghost commented Aug 27, 2021

Sergio0694 left a comment

	public static void BindSize(this CompositionObject source, UIElement target)
	{
	var visual = ElementCompositionPreview.GetElementVisual(target);
	var bindSizeAnimation = source.Compositor.CreateExpressionAnimation($"{nameof(visual)}.Size");

	bindSizeAnimation.SetReferenceParameter(nameof(visual), visual);

	// Start the animation
	source.StartAnimation("Size", bindSizeAnimation);
	}

Attached Shadows (Composition and Win2D + Animations) #4179

Attached Shadows (Composition and Win2D + Animations) #4179

Conversation

michael-hawker commented Aug 12, 2021 • edited Loading

Fixes #3122 #3607 #3516

PR Type

What is the current behavior?

What is the new behavior?

PR Checklist

Other information

ghost commented Aug 12, 2021

michael-hawker Aug 12, 2021

Choose a reason for hiding this comment

michael-hawker Aug 19, 2021

Choose a reason for hiding this comment

Sergio0694 Aug 23, 2021

Choose a reason for hiding this comment

michael-hawker Aug 23, 2021

Choose a reason for hiding this comment

michael-hawker commented Aug 25, 2021

michael-hawker commented Aug 25, 2021

michael-hawker commented Aug 25, 2021

XAML-Knight left a comment

Choose a reason for hiding this comment

Rosuavio left a comment

Choose a reason for hiding this comment

ghost commented Aug 27, 2021

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.

Sergio0694 commented Aug 27, 2021

Sergio0694 left a comment

Choose a reason for hiding this comment

ghost commented Aug 27, 2021

Sergio0694 left a comment

Choose a reason for hiding this comment

michael-hawker commented Aug 12, 2021 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msftbot`) and give me an instruction to get started! Learn more here.