[Feature] XamlLight Composition XAML Helper

[michael-hawker]

Describe the problem this feature would solve

We deprecated our Light behavior; however, we pointed to a composition API which isn't as easy to use and requires some setup with code-behind.

Describe the solution

It'd be great to have another XAML helper in line with our other composition API XAML helpers for this scenario. Similar to what we want to do with ThemeShadows in #3122 as well.

I'd imagine being able to do the entire process from the composition example in XAML like so:

Option 1 - Organize Light with what it shines on together - (Mimic ThemeShadow API proposal #3122):

<StackPanel Width="100">
    <StackPanel.Lights>
        <media:SpotLight x:Name="OrangeSpotLight" InnerConeColor="Orange" OuterConeColor="Yellow" InnerConeAngle="30" OuterConeAngle="45">
           <media:SpotLight.CastTo>
               <ex:Surface Target="{x:Bind SpotLightBrush}"/>
               <ex:Surface Target="{x:Bind SpotLightUIElement}"/>
            </media:SpotLight.CastTo>
         </media:SpotLight>
    </StackPanel.Lights>

    <!-- This border is lit by the OrangeSpotLight, but its content is not. -->
    <Border BorderThickness="4" Margin="2">
        <Border.BorderBrush>
            <SolidColorBrush x:Name="SpotLightBrush" Color="White"/>
        </Border.BorderBrush>
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>

    <!-- This border and its content are lit by the OrangeSpotLight. -->
    <Border x:Name="SpotLightUIElement" BorderThickness="4" BorderBrush="PaleGreen" Margin="2">
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>

    <!-- This border and its content are not lit by the OrangeSpotLight. -->
    <Border BorderThickness="4" BorderBrush="PaleGreen" Margin="2">
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>
</StackPanel>

Option 2 - Tie to element being lit:

<StackPanel Width="100">
    <StackPanel.Lights>
        <media:SpotLight x:Name="OrangeSpotLight" InnerConeColor="Orange" OuterConeColor="Yellow" InnerConeAngle="30" OuterConeAngle="45"/>
    </StackPanel.Lights>

    <!-- This border is lit by the OrangeSpotLight, but its content is not. -->
    <Border BorderThickness="4" Margin="2">
        <Border.BorderBrush>
           <SolidColorBrush x:Name="SpotLightBrush" Color="White"
                            media:SpotLight.Source="{x:Bind OrangeSpotLight}"/>
        </Border.BorderBrush>
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>

    <!-- This border and its content are lit by the OrangeSpotLight. -->
    <Border x:Name="SpotLightUIElement" BorderThickness="4" BorderBrush="PaleGreen" Margin="2"
            media:SpotLight.Source="{x:Bind OrangeSpotLight}">
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>

    <!-- This border and its content are not lit by the OrangeSpotLight. -->
    <Border BorderThickness="4" BorderBrush="PaleGreen" Margin="2">
        <Rectangle Fill="LightGray" Height="20"/>
    </Border>
</StackPanel>

Hello, 'michael-hawker! 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!

[michael-hawker]

🦙 I'm leaning towards Option 1.

[michael-hawker]

Split apart the examples, liking option 2 more... I mean theoretically we could support both syntaxes?