[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>

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 🙌

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!!!