Proposal: Controls and ThemeShadow compatbility.

[Yakehira]

Currently if you use a ThemeShadow the Shadow will also be behind the element of the control, interfering with the look of controls using transparency.

Here is an example with ThemeShadow applied to the AutoSuggestBox, looks more like a gradient.

Restyled Control with round corners with same transparency at 0px Elevation where you can clearly see the sharp shadow corners, Shadow need to adapt to shape of control.

Here the same control with use of solid colors with no transparency for background, and focus.

Controls like AutoSuggestBox that have transparent backgrounds don't work well with ThemeShadow applied without changes to the control, this should be Addressed going forward so Developers do not have to fix the shortcomings themselves if they plan on using ThemeShadow.

One way this could be addressed is by adding a new Property to Border/Shapes etc that is behind the property Background so we can have a solid backplate, acrylic/effect backplate, or just transparent depending on the situation, making it much easier to restyle the control because then we can just set the Backplate="{StaticResource CustomBrush}" while keeping the Background styling intact and it will all layer nicely and if we need to change both, it's not any more work because it's just one more line.

[mdtauk]

The ThemeShadow should really be masking out the actual control when rendering the shadow.

The control would render above the shadow, and that space will be pre-masked, so the shadow will not be visible behind.

But most likely for performance reasons, these shadows are being faked - guessing with a 9Grid image which updates based on elevation.

And because of this faking, they do not factor the Corner Radius, or the control's actual shape into the rendering of the shadows, instead assuming the 2 or 4 px radius, and a rectangular or square shape.

---

Without taking a performance hit and actually doing these shadows properly, this will continue. I would also be in favour of keeping the fake way, as long as you can configure the corner radius, and ability to cutout a space for the control itself, as many controls like buttons and textboxes, use a translucent background colour.

[jevansaks]

This is currently how ThemeShadow works, you'll need the thing on top to be opaque. Yes, @mdtauk it should be masking ... I don't know if that's on the horizon for the Composition API we use under the covers.

[Yakehira]

Yes i initially thought about just Masking the Control.

I maybe should have opened what i propose as separate issue. My thinking was more around what could be addressed to fix this, but at the same time add something new to Styling as part of addressing it.

Right now you have the Background which is pretty much used to give you that 'highlight' or 'focus' effects etc. If you want to actually have something to have a background behind this, you have to re-tamplate the whole thing to add another element, If you do Background='transparent' for example it will put the base-state of the thing to transparent, but has no intereaction with the visual states because they overwrite it.

[mdtauk]

Yes i initially thought about just Masking the Control.

I maybe should have opened what i propose as separate issue. My thinking was more around what could be addressed to fix this, but at the same time add something new to Styling as part of addressing it.

Right now you have the Background which is pretty much used to give you that 'highlight' or 'focus' effects etc. If you want to actually have something to have a background behind this, you have to re-tamplate the whole thing to add another element, If you do Background='transparent' for example it will put the base-state of the thing to transparent, but has no intereaction with the visual states because they overwrite it.

You wont always know what background the control will be on. A search box on an acrylic surface, for instance, would not be solved by an additional backing plate.

That's not to mention effects like Reveal with elevated elements.

A shadow layer, with a masked cutout - with its own CornerRadius value, would work in many cases, despite still being rectangular.

Creating a White shape, with the shadow, and using a blending mode like Multiply for the whole shadow layer, would achieve the same kind of thing.

These would still fake it, and hopefully not add much in the way of performance hit.

---

Actually generating shadows with accurate masking would be the best solution, or including a shape within a control template, which would act as the shadow casting shape - but I suspect these XAML generated shadows are eventually to be used by the new modern shells, overlapping windows, win32 rendered surfaces - and so performance is essential to preserve.

[chigy]

@Yakehira , what's the reason why you are adding the shadow to AutoSuggest control? We intend the ThemeShadow to be used for transient UI to receive attention of the user to get quick action but not intended to used for this type of UI and thus not designed to work well. https://docs.microsoft.com/en-us/windows/uwp/design/layout/depth-shadow

[robloo]

I ran across this one myself.

Shadow is very useful for a number of things. The most common example is to highlight a selected 'card' in a collection like below. Now imagine the center color has a transparency -- the shadow incorrectly affects the color.

Bottom line I'm finally coming around to using shadows in real controls and I discover a lot of limitations that shouldn't really be there. Composition is powerful enough to handle all of this and mobile was dropped. I've even seen a glow/shadow effect added to XBox selected items which is really good -- i.e. we need to be able to specify the color of the shadow but that's a separate issue.