Describe the bug
I somehow stumbled upon a NullReferenceException in the generated x:Bind code when the element containing the binding was null. However, it only occurs in a certain scenario when the resource is not directly referenced from outside the ResourceDictionary. i.e. if the resource is only referenced from within the resource dictionary the binding to it fails; however, when the resource is used within the main visuals below it, the binding works.

However, it seems to only reproduce with specific sets of XAML trees as well. There's definitely some weird timing/initialization issue going on here.

Steps to reproduce the bug
Steps to reproduce the behavior:

1. Install the Microsoft.Toolkit.Uwp.UI package version 7.1-rc1 or later.
2. Create a page with the following resources:

  xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"/>

  <Page.Resources>
    <ui:AttachedDropShadow
      x:Key="CommonShadow"
      CastTo="{x:Bind ShadowTarget}"
      Offset="4" />

    <Style TargetType="Button">
      <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}" />
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="Background" Value="Red" />
    </Style>
  </Page.Resources>

3. This is a base working case for the page content (as expected):

  <Grid>
    <Grid x:Name="ShadowTarget" />
    <Image
      Width="100"
      Height="100"
      ui:Effects.Shadow="{StaticResource CommonShadow}"
      Source="ms-appx:///Assets/Photos/Owl.jpg" />
  </Grid>

4. There are a few different scenarios which can show the problem occurring, this is a minimal (if not practical) version of it which shows the same failure line:

  <Grid>
    <Grid x:Name="ShadowTarget" />
    <!--  Uncomment the button and it works  -->
    <!--<Button
      Margin="0,8,0,0"
      VerticalAlignment="Top"
      Content="Hello" />-->
    <Image
      Width="100"
      Height="100"
      Source="ms-appx:///Assets/Photos/Owl.jpg" />
  </Grid>

If you uncomment out the button, then the binding is successful.

5. In this more complex tree, it seems to fail even though the button implicitly is still referencing it like the above example. I'm not sure about what this tree causes the difference:

  <ScrollViewer>
    <Grid>
      <Grid x:Name="ShadowTarget" />
      <StackPanel VerticalAlignment="Center" Spacing="32">
        <Button Content="I Have a Shadow!" />
        <Image
          Width="100"
          Height="100"
          
          Source="ms-appx:///Assets/Photos/Owl.jpg" />
        <Rectangle
          Width="200"
          Height="100"
          
          Fill="#80FF0000"
          RadiusX="4"
          RadiusY="4" />
        <Button Content="I Also have a Shadow!" />
      </StackPanel>
    </Grid>
  </ScrollViewer>

This now fails even though it appears similar to step 4 scenario when the button is uncommented. If you add the ui:Effects.Shadow="{StaticResource CommonShadow}" property to the blank lines in the first Image and/or the last Rectangle then the sample works fine again! 🤷‍♂️

6. It appears to work if you remove the ScrollViewer...?

Expected behavior
Binding doesn't throw null reference exception, still should bind...

Screenshots

Version Info

NuGet package version: None, WUX OS XAML UWP

Additional context
Discovered in final testing of our Attached Shadow Toolkit PR here: CommunityToolkit/WindowsCommunityToolkit#4179