阴影位于文本上方

我正在向 Xamarin.UWP 项目添加阴影（但问题并不是真正特定于 Xamarin，而是一般来说是 UWP）：

bool IsShadowSupported => ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 3); // SDK >= 14393

if (IsShadowSupported) {
  var compositor = ElementCompositionPreview.GetElementVisual(Control).Compositor;
  dropShadow = compositor.CreateDropShadow();
  if (Control is Windows.UI.Xaml.Controls.TextBlock textBlock)
    dropShadow.Mask = textBlock.GetAlphaMask();
  shadowVisual = compositor.CreateSpriteVisual();
  shadowVisual.Shadow = dropShadow;
  ElementCompositionPreview.SetElementChildVisual(Control, shadowVisual);
  ...
  dropShadow.Offset = new Vector3((float)Shadow.GetDistanceX(Element), (float)Shadow.GetDistanceY(Element), -5f);
}

它运行并出现阴影 - 但在文本上方，而不是在文本下方。起初我认为这将由偏移的 Z 坐标决定，但没有负值、正值或零值会改变任何东西。阴影看起来像这样：

这本身并不是一个坏的效果，但它不是所要求的：白色文本和其下方的深灰色阴影。

问题是SetElementChildVisual将视觉效果设置为给定元素的最后一个子元素，这将使阴影出现在元素上方TextBlock。不幸的是，连孩子的父母都没有TextBlock就足够了，您应该有一个相邻的元素来承载阴影：

<Grid x:Name="ShadowHost" />
<TextBlock x:Name="Hello" Text="Hello" />

Now use ShadowHost代替Control在你的代码中，除了GetAlphaMask调用你应该使用的地方TextBlock反而。

当然，要使阴影发挥作用，需要做很多工作，这就是为什么您可以尝试使用 Windows Community Toolkit 的原因DropShadowPanel相反 - 请参阅文档 https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/dropshadowpanel了解更多信息。