Microsoft-ui-xaml: Proposal: A better shadow API

[h82258652]

Proposal: A better shadow API

Summary

Require a new shadow API to apply shadow for any controls. Take an example like this:

<Style x:Key="FloatingCircleButton" TargetType="Button">
    <Setter Property="Width" Value="48" />
    <Setter Property="Height" Value="48" />
    <Setter Property="CornerRadius" Value="24" />
    <Setter Property="Shadow">
        <Setter.Value>
            <DropShadow /> <!-- New API here -->
        </Setter.Value>
    </Setter>
</Style>

Without any csharp codes like ThemeShadow. It is only xaml so you can put it in the styles.

Rationale

ThemeShadow is too complex, it requires you to add the receiver in the csharp code that makes it is very hard to code in the styles.

[mdtauk]

Ideally this new Shadow API would respect the actual shape of the element of which is casting it, but at the very least, it could use the Corner Radius value to better match the shape.

[jesbis]

We created the Shadow base class so that we could theoretically implement <DropShadow /> in the future. That's definitely something we should consider for future releases but it would have to be after WinUI 3.0.

[cghersi]

We worked heavily on this topic in the past months. Here's what we would like to see in the next API:
1) performance (time to load and time to re-paint)
2) ability to attach to an existing element as a child, not as the parent
3) ability to follow the shape of the subject
4) ability to "blend" into a single layer the shadows of several shapes with intersections (e.g. on different Z indexes)
5) Make sure the shadow is on the bottom Z index possible, behind any other Xaml control

[mdtauk]

I wonder if the shadow system could get performance benefit by working on layers, rather than individual elements as casters and receivers?

So as elements are moved in Z space, they are treated as a layer in the XAML rendering, the control shapes become a mask/primitive, and the shadow is generated around all the shapes in that layer.

[cghersi]

@mdtauk I think this is a superior idea! Actually, from a usability perspective, it would be great if a generic Xaml control could just have a property "Shadow", which the user can turn on/off, and that interacts with this "Shadow layer", drawn on the bottom of everything.
Such capability could easily solve my requirements 2-3-4-5, and I guess it could heavily help in req 1.

[michael-hawker]

@h82258652 we're working on a helper for this in the toolkit here: https://github.com/windows-toolkit/WindowsCommunityToolkit/issues/3122

Though, the 5 ThemeShadow Limit is really harsh... especially as it's number of shadows not definitions of shadows that are re-used.