[Feature] Shadow Receiver XAML Helpers

[michael-hawker]

Describe the problem this feature would solve

To use the new Shadow API in XAML without code-behind. See blog here for more examples.

Describe the solution

A way to make it easier to use shadows in apps via XAML. Initial Proposal example:

<Grid x:Name="BgGrid" …>
 <ex:ShadowExt.Receivers>
   <ex:ShadowExt.Receiver Source="{StaticResource BgGridShadow}">
   <ex:ShadowExt.Receiver Source="{StaticResource HeroImageShadow}">
 </ex:ShadowExt.Receivers>
...
</Grid>

[ghost]

Hello michael-hawker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

[ghost]

Thanks for submitting a new feature request! I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[niels9001]

Yes please! The ThemeShadow is super powerful and creates super nice effects, but it's hard to use. This would really simplify stuff and useable for DataTemplates as well!

[michael-hawker]

@niels9001 we just got this to work on my dev stream! 🎉🎉🎉

Have a proof of concept that I'll need to create a PR for the toolkit for and test in other scenarios, but basically we have this syntax now for setting up Shadows, it's super nice 🦙❤:

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <ThemeShadow x:Key="BackgroundGridShadow">
                <ex:ShadowExtensions.CastTo>
                    <ex:Surface Target="{x:Bind BackgroundGrid}"/>
                </ex:ShadowExtensions.CastTo>
            </ThemeShadow>
            
            <ThemeShadow x:Key="PoolShadow">
                <ex:ShadowExtensions.CastTo>
                    <ex:Surface Target="{x:Bind BackgroundGrid}"/>
                    <ex:Surface Target="{x:Bind BedroomGrid}"/>
                    <ex:Surface Target="{x:Bind LoungeGrid}"/>
                </ex:ShadowExtensions.CastTo>
            </ThemeShadow>
        </Grid.Resources>

        <Grid x:Name="BackgroundGrid"/>

        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid x:Name="BedroomGrid" Background="White" Grid.Column="0" Width="255" Height="124" Shadow="{StaticResource BackgroundGridShadow}" Translation="0,0,8">
                <Image Source="ms-appx:///Assets/BedRoom.jfif" Stretch="UniformToFill"/>
            </Grid>
            <Grid x:Name="LoungeGrid" Background="White" Grid.Column="2" Width="255" Height="124" Margin="-48,0,0,0" Shadow="{StaticResource BackgroundGridShadow}"
                  Translation="0,0,32">
                <Image Source="ms-appx:///Assets/Lounge.jfif" Stretch="UniformToFill"/>
            </Grid>
            <Grid x:Name="PoolGrid" Background="White" 
                  Grid.Column="1" Width="320" Height="156"
                  Shadow="{StaticResource PoolShadow}"
                  Translation="0,0,64">
                <Image Source="ms-appx:///Assets/Pool.jfif" Stretch="UniformToFill"/>
            </Grid>
        </Grid>
    </Grid>

Still have to test with transitions and data templates and such, but seems like a promising start. Let me know if this syntax seems good to you too!

[niels9001]

Great stuff :)! This is super helpful!!!

[michael-hawker]

6.1 is already pretty heavy, and I have a few other bits to focus on with higher priority. However, I think the secondary theme of our 7.0 release can be Animations and Composition helpers, including this one and maybe some others. :)

[niels9001]

@michael-hawker Just wanted to check, is this feature still on the roadmap for 7.0? That should drop in August/September if I recall correctly?

[michael-hawker]

@niels9001 this is indeed something we have on the 7.0 roadmap as high-priority, though we haven't set a specific release date yet. I think I said I'd be figuring out the date by Aug/Sept. 😋 Main reason is we haven't dug into evaluating the scope of work on the tech-debt called out in our release plan, that'll start happening at the end of August.

I have my prototype code that I did on stream for this a while back which I should upload somewhere. After UnoConf, I'll have be shifting focus back to clean-up and these shadow features. I'd like to try and improve DropShadowPanel as well to work more like the ThemeShadow helper I made, if its possible too.

[michael-hawker]

From F8R on Discord:

After some testing, it's turn out to remove the Shadow effect just set caster CasterElement.Shadow = null.
Using SharedShadow.Receivers.Remove(UIRecieverElement) will not.
It may not what I expected, I can't remove one or more shadow using SharedShadow.Receivers.Remove(UIRecieverElement).

Set CasterElement.Shadow = null, it will remove all shadow.

[vitordelucca]

Any news on this?

[michael-hawker]

Because ThemeShadow is limited, we're still planning to investigate if we can create a similar solution for DropShadows for 7.1. Something that's easier to add on top of existing XAML than having to insert special panels like DropShadowPanel today.

We do want to ensure it handles more scenarios like the request from #3607 as well.

[michael-hawker]

See the PR with the new shadow system we have for Drop Shadows here: #4179

Super simple to use with Win2D, and not much harder to use with just composition!