UWP：在XAML中创建阴影

问题描述：

我目前正在尝试在UWP中创建一个带有两个椭圆元素的圆形按钮，并希望其中一个按特定角度投射阴影。我找到了一种方法在WPF这样做，看起来像这样：UWP：在XAML中创建阴影

WPF XAML：

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

是什么在UWP等价？

答

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

所以第一只安装

安装，包装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>

快速正确的答案，非常感谢！ –

答

在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);

不利的一面，这不是非常简单。您可以使用不同的画笔来显示图像，纯色或其他东西，它不适用于屏幕上的现有视觉效果（据我了解）。你可以阅读更多关于基本知识here。 Probalby你需要使用表面刷，它可以容纳各种不同的视觉类型，如图像。目前看起来不存在用于椭圆的现成组件。

或者，存在一个xaml扩展名，它将为您使用纯xaml，might be worth a shot并可能还支持省略号。

作为结束语，所有这些目前都是微软部分正在开展的工作，将来应成为UWP API的本地部分。

UWP：在XAML中创建阴影

相关推荐