UWP：在XAML中创建阴影

Question

我目前正在尝试在UWP中创建一个带有两个椭圆元素的圆形按钮，并希望其中一个元素以特定角度投射阴影。我在WPF中找到了一种实现方法，如下所示：

WPF XAML：

<Ellipse>
  <Ellipse.BitmapEffect>
    <DropShadowBitmapEffect Color="Black" Direction="-50" ShadowDepth="50" Softness=".7"/>
  </Ellipse.BitmapEffect>
</Ellipse>

在UWP中的等效方法是什么？

- Nigel-Lee

Answer 1

最简单的方法是使用来自 UWP 社区工具包 的 DropShadowPanel。

首先，只需安装：

Install-Package Microsoft.Toolkit.Uwp.UI.Controls -Version 2.0.0

然后在您的 XAML 中使用以下代码：

<controls:DropShadowPanel Color="Black"
                          OffsetX="-50"
                          OffsetY="-50"
                          BlurRadius="50"
                          ShadowOpacity=".7"
                          Width="120"
                          Height="120"
                          HorizontalContentAlignment="Stretch"
                          VerticalContentAlignment="Stretch">
    <Ellipse />
</controls:DropShadowPanel>

- Justin XL

---

快速而正确的回答，非常感谢！ - Nigel-Lee

我在这里做错了什么？我以为我按照你说的做了一切... :-/ https://i.imgur.com/gGZRoGe.png - kayleeFrye_onDeck

@kayleeFrye_onDeck 你需要从NuGet安装工具包。 - Justin XL

@JustinXL 我做了...我确实按照你在答案中说的一切去做了，这就是为什么我想知道我哪里做错了。我使用了VS中的包管理控制台，然后你可以在截图中看到我做了什么。 - kayleeFrye_onDeck

尝试更新NuGet包。至少现在是5.0版本。 - Justin XL

Answer 2

在UWP中，有一个不同的组件来完成这项工作。它被称为Composition API，并且可以在NuGet包“Win2D.uwp”中找到。

基本上，您需要使用以下代码获取可视对象的合成器：

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

并使用合成器创建一个下拉阴影。

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

// create a red sprite visual
var myVisual = _compositor.CreateSpriteVisual();
myVisual.Brush = _compositor.CreateColorBrush(Colors.Red);
myVisual.Size = new System.Numerics.Vector2(100, 100);

// create a blue drop shadow
var shadow = _compositor.CreateDropShadow();
shadow.Offset = new System.Numerics.Vector3(30, 30, 0);
shadow.Color = Colors.Blue;
myVisual.Shadow = shadow;

// render on page
ElementCompositionPreview.SetElementChildVisual(this, myVisual);

缺点是，这不是很直接的。您可以使用不同的画笔来显示图像、纯色或其他内容，但它不会应用于屏幕上现有的可视化元素（就我所理解的而言）。您可以在此处了解更多基础知识。可能需要使用一个表面画笔，它可以容纳各种不同的可视化类型，如图像。目前似乎没有现成的组件适用于椭圆形。

另外，存在一个XAML扩展，可以使用纯XAML为您完成所有这些工作，也许值得一试，也可能支持椭圆形。

最后要注意的是，所有这些都是微软正在进行的工作，并且将来应该成为UWP API的本地部分。

- CShark