阴影位于文本上方 [英] Drop shadow is above the text

问题描述

我正在向 Xamarin.UWP 项目添加阴影(但问题并非真正特定于 Xamarin，而是一般的 UWP):

I'm adding a drop shadow to a Xamarin.UWP project (but the question is not really Xamarin-specific but UWP in general):

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 坐标决定，但没有负值、正值或零值改变任何东西.阴影看起来像这样:

It runs and the shadow appears—but above the text, not beneath it. At first I thought this would be determined by the Z coordinate of the offset, but no negative, positive or zero value there changes anything. The shadow looks like this:

这本身并不是一个坏影响，但不是我们所要求的:白色文本和其下方的深灰色阴影.

Which is not a bad effect on its own but it's not what was requested: white text and a dark grey shadow beneath it.

推荐答案

问题在于 SetElementChildVisual 将视觉设置为给定元素的最后一个子元素，这会使阴影出现在TextBlock.不幸的是，即使 TextBlock 的父元素也不够，你应该有一个相邻的元素来承载阴影:

The problem is that the SetElementChildVisual sets the visual as the last child of the given element, which will make the shadow appear above the TextBlock. Unfortunately not even the parent of the TextBlock is enough, you should instead have a adjacent element that will host the shadow:

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

现在在你的代码中使用 ShadowHost 而不是 Control，除了 GetAlphaMask 调用你应该使用 TextBlock> 代替.

Now use ShadowHost instead of Control in your code except for the GetAlphaMask call where you should use the TextBlock instead.

当然，这需要大量的工作才能使阴影起作用，这就是为什么您可以尝试使用 Windows Community Toolkit 的 DropShadowPanel 代替 - 请参阅 文档 了解更多信息.

Of course this is quite some work to make shadows work, which is why you can try to use the Windows Community Toolkit's DropShadowPanel instead - see documentation for more info.

这篇关于阴影位于文本上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！