阴影在文本上方答案

【问题标题】：Drop shadow is above the text阴影在文本上方
【发布时间】：2019-01-05 21:10:22
【问题描述】：

我正在向 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 坐标决定，但没有负值、正值或零值会改变任何东西。影子是这样的：

这本身并没有什么不好的影响，但它不是所要求的：白色文本和其下方的深灰色阴影。

【问题讨论】：

标签： xamarin uwp xamarin.uwp

【解决方案1】：

问题在于SetElementChildVisual 将视觉对象设置为给定元素的最后一个子元素，这将使阴影出现在TextBlock 上方。不幸的是，即使TextBlock 的父级也不够，您应该有一个相邻的元素来承载阴影：

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

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

当然，要让阴影发挥作用，需要做很多工作，这就是为什么您可以尝试使用 Windows 社区工具包的 DropShadowPanel 来代替 - 请参阅 documentation 了解更多信息。

【讨论】：

是的，我知道面板。不，这不是我的解决方案，我在这里处于 Xamarin Forms 平台效果中，因此有必要提供独立的解决方案。我会按照你的建议试试。
您可以创建一个自定义标签控件，该控件在 UWP 上具有自定义渲染器，该渲染器使用 DropShadowPanel 和 TextBlock 控件，这可能会很好用
是的。但考虑到我的代码执行与DropShadowPanel 完全相同的操作，毕竟我也可以插入额外的 Grid 并完成它。
在平台效果中我无法访问控件的父级（它始终为空），除了自定义渲染器之外别无他法，是的。在我的特殊情况下，我可以使用更简单的解决方法（交换文本和阴影颜色并取消阴影偏移），但这不是一个通用的解决方案。
嗨@Gábor，对不起，我明白了。