问题描述
我正在向 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.
这篇关于阴影位于文本上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!