fix(shadows): background theming issue

[Xiaoy312]

GitHub Issue (If applicable): closes: #707

PR Type

What kind of change does this PR introduce?

• Bugfix

What is the current behavior?

ShadowContainer currently strips its child's background and use it as the background for the image-brush. This is done because the inner shadows need to be drawn on top of the content background. This approach has a few problems where it doesnt subscribes to updates to the background property, nor theme updates from the {ThemeResource} brush.

What is the new behavior?

ShadowContainer now creates two layers of shadows, one for background shadows and one for foreground shadows, that sandwiches the content.

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• Tested the changes where applicable:
  • UWP
  • WinUI
  • iOS
  • Android
  • WASM
  • MacOS
• Updated the documentation as needed:
  • General Doc Update
  • Controls Doc Update
  • Extensions Doc Update
  • controls-styles.md
  • lightweight-styling.md (LightWeight Styling Resource Keys)
• Runtime Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• Contains NO breaking changes
• Associated with an issue (GitHub or internal)
• Commits must be following the Conventional Commits specification.

Other information

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-737.eastus2.azurestaticapps.net

[Xiaoy312]

@agneszitte
im unlinking 707, because there are currently multiple issues in that one
and this only addresses one of them
(i explicitly used re instead of closes keyword)

edit: this also fixes the other one too.

[Xiaoy312]

sanity-check done: winui, skia, wasm, ios, droid

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-737.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://polite-field-01aa64f0f-737.eastus2.azurestaticapps.net

[kazo0]

I'm seeing some strange behaviors if I add an extra shadow using the ShadowContainerSamplePage here (tested on Skia so far):

Before adding new shadow:

After adding new shadow:

It seems to also break on main but in a different way:

Before adding new shadow:

After adding new shadow:

Not sure if it's really related to these changes but something is different

[Xiaoy312]

@kazo0 There might be re-layout issue with the SC on skia, that was previously not much noticeable due to background/border breaking on changes on skia. I think this just uncovers it.

[agneszitte]

@Mergifyio backport legacy/3x

[mergify]

backport legacy/3x

✅ Backports have been created

• #750 fix(shadows): background theming issue (backport #737) has been created for branch legacy/3x but encountered conflicts