c# - 如何解决 UWP Composition 中这个奇怪的 DropShadow 问题？

Question

在合成中使用投影时，我收到了不良效果。要重现此问题，请按照下列步骤操作:

第 1 步:创建一个新的 UWP 项目并定位 Windows 10 Fall Creators Update(10.0；Build 16299)

第 2 步:将以下内容复制到 MainPage.xaml

<Page x:Class="App1.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>
        <Canvas x:Name="_shadow" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left"/>

        <Canvas x:Name="_shadowSource" Width="500" Height="500" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Ellipse Width="50" Height="50" Fill="DarkOrange" Canvas.Top="50" Canvas.Left="50"/>
            <Ellipse Width="50" Height="50" Fill="Aquamarine" Canvas.Top="100" Canvas.Left="100"/>
            <Ellipse Width="50" Height="50" Fill="Crimson" Canvas.Top="150" Canvas.Left="150"/>
            <Ellipse Width="50" Height="50" Fill="BlueViolet" Canvas.Top="200" Canvas.Left="200"/>
            <Ellipse Width="50" Height="50" Fill="DarkGreen" Canvas.Top="250" Canvas.Left="250"/>
            <Ellipse Width="50" Height="50" Fill="Gold" Canvas.Top="300" Canvas.Left="300"/>
            <Ellipse Width="50" Height="50" Fill="MediumAquamarine" Canvas.Top="350" Canvas.Left="350"/>
            <Ellipse Width="50" Height="50" Fill="Violet" Canvas.Top="400" Canvas.Left="400"/>
            <Ellipse Width="50" Height="50" Fill="LightSeaGreen" Canvas.Top="450" Canvas.Left="450"/>
        </Canvas>
    </Grid>
</Page>

第 3 步:将以下内容复制到 MainPage.xaml.cs

using System.Numerics;
using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Hosting;

namespace App1
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();

            var compositor = Window.Current.Compositor;
            var shadow = compositor.CreateDropShadow();
            var layer = compositor.CreateLayerVisual();

            shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;

            layer.Shadow = shadow;
            layer.Size = new Vector2(500, 500);

            var visual = ElementCompositionPreview.GetElementVisual(_shadowSource);

            layer.Children.InsertAtBottom(visual);

            ElementCompositionPreview.SetElementChildVisual(_shadow, layer);
        }
    }
}

_shadowSource 的内容被移动到阴影设置为 InheritFromVisualContent 的新层。当应用加载时，您会看到阴影渲染良好，但调整应用大小会产生视觉故障。

下面是注释行 //layer.Shadow = shadow; 时发生的情况

这里发生了什么？为什么阴影会导致这种情况？

Answer 1

当您的窗口高度小于 500 时，_shadowSource 高度仍为 500，因为您的 XAML 中有 Width="500"Height="500"。所以它被剪掉了，只有上半部分是可见的。

但是您将阴影添加到另一个名为 _shadow 的元素中。这个没有固定大小，所以它会调整到你窗口的大小，即不会发生裁剪。这就是为什么你的圆圈会扭曲成椭圆形，并且你会在窗口的下部看到这些令人讨厌的伪影 - 如果你的阴影布局正确，图层的这些部分将被剪掉并且不可见。