如何解决UWP Composition中DropShadow的异常问题？

我之前在做UWP项目时也碰到过Composition DropShadow窗口resize时出问题的情况，结合你给出的复现场景，我来帮你拆解问题并给出可行的解决思路：

当在UWP中使用Composition的DropShadow，并且将阴影源内容移到设置了InheritFromVisualContent的新图层时，应用启动时阴影显示正常，但调整窗口大小后会出现阴影错位、断裂或不更新的异常效果。

• 创建新的UWP项目，目标版本设置为Windows 10 Fall Creators Update (10.0; Build 16299)
• 将对应的XAML代码复制到MainPage.xaml中（示例结构如下）：

  <Page
      x:Class="ShadowDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
  
      <Grid x:Name="shadowSource" Background="White" Margin="20">
          <!-- 你的内容元素 -->
          <TextBlock Text="Shadow Test" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Grid>
  </Page>
  

• 将对应的C#代码复制到MainPage.xaml.cs中（示例结构如下）：

  using Windows.UI.Composition;
  using Windows.UI.Xaml;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Hosting;
  
  namespace ShadowDemo
  {
      public sealed partial class MainPage : Page
      {
          private DropShadow _shadow;
          private Visual _shadowLayer;
  
          public MainPage()
          {
              this.InitializeComponent();
              this.Loaded += MainPage_Loaded;
          }
  
          private void MainPage_Loaded(object sender, RoutedEventArgs e)
          {
              var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
              _shadow = compositor.CreateDropShadow();
              _shadow.Source = ElementCompositionPreview.GetElementVisual(shadowSource);
              _shadow.InheritFromVisualContent = true;
  
              _shadowLayer = compositor.CreateSpriteVisual();
              _shadowLayer.Shadow = _shadow;
              ElementCompositionPreview.SetElementChildVisual(shadowSource, _shadowLayer);
          }
      }
  }
  

出现这个问题的核心原因是：Composition视觉树没有和XAML布局系统同步更新。当窗口大小调整时，shadowSource元素的布局边界会发生变化，但手动创建的DropShadow及其关联的视觉层并不会自动感知到XAML的布局变化，导致阴影的计算边界还是旧的，最终出现错位或异常显示。

这里提供几种有效的解决办法，你可以根据项目情况选择：

1. 监听布局变化，手动更新阴影 #

在页面或阴影源元素的SizeChanged事件中，手动更新阴影的关联视觉或边界，确保阴影和元素布局同步：

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _shadow = compositor.CreateDropShadow();
    _shadow.Source = ElementCompositionPreview.GetElementVisual(shadowSource);
    _shadow.InheritFromVisualContent = true;

    _shadowLayer = compositor.CreateSpriteVisual();
    _shadowLayer.Shadow = _shadow;
    ElementCompositionPreview.SetElementChildVisual(shadowSource, _shadowLayer);

    // 添加布局变化监听
    shadowSource.SizeChanged += ShadowSource_SizeChanged;
}

private void ShadowSource_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var sourceVisual = ElementCompositionPreview.GetElementVisual(shadowSource);
    // 更新阴影的源视觉，确保同步布局变化
    _shadow.Source = sourceVisual;
    // 或者直接更新阴影的边界
    _shadow.Bounds = sourceVisual.Bounds;
}

2. 使用内置的DropShadowPanel（更简便） #

微软提供的DropShadowPanel控件（属于Windows Community Toolkit）已经封装了阴影的布局同步逻辑，比手动使用Composition更稳定：
首先确保已安装Windows Community Toolkit NuGet包，然后在XAML中使用：

<Page
    x:Class="ShadowDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">

    <controls:DropShadowPanel BlurRadius="12" ShadowOpacity="0.6" OffsetY="3" Margin="20">
        <Grid Background="White" Width="Auto" Height="Auto">
            <TextBlock Text="Shadow Test" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </controls:DropShadowPanel>
</Page>

3. 重新创建阴影实例（极端情况） #

如果上述方法都无效，可以在布局变化时销毁旧阴影并重新创建，确保完全同步：

private void ShadowSource_SizeChanged(object sender, SizeChangedEventArgs e)
{
    // 清理旧阴影
    _shadowLayer.Shadow = null;
    _shadow.Dispose();

    // 重新创建阴影
    var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
    _shadow = compositor.CreateDropShadow();
    _shadow.Source = ElementCompositionPreview.GetElementVisual(shadowSource);
    _shadow.InheritFromVisualContent = true;
    _shadowLayer.Shadow = _shadow;
}

内容的提问来源于stack exchange，提问作者Laith