2017-09-05 63 views
1

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

WPF XAML:

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

是什么在UWP等价?

回答

4

最简单的方法是从使用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> 
+1

快速正确的答案,非常感谢! –

1

在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的本地部分。