阴影在文本上方

Question

我正在为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坐标确定，但是没有，没有负值，正值或零值会改变任何东西。阴影看起来像这样：

这本身并不是什么不好的效果，但并不是要求的：白色文本和其下方的深灰色阴影。

Answer 1

问题在于SetElementChildVisual将视觉设置为给定元素的最后一个子元素，这将使阴影出现在TextBlock上方。不幸的是，甚至TextBlock的父元素还不够，您应该有一个可以容纳阴影的相邻元素：

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

现在在代码中使用ShadowHost代替Control，除了GetAlphaMask调用之外，应该使用TextBlock。

当然，要使阴影有效，这是很多工作，这就是为什么您可以尝试使用Windows Community Toolkit的DropShadowPanel的原因-有关更多信息，请参见documentation。