(UWP开发)基于Windows10 Anniversary SDK创造出位于可视化层的DropShadow
Windows.UI.Composition API是可以从任何通用Windows平台应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象、动画和效果。
Composition API在 10586SDK 中就已经出现,但是在年度更新之后,该SDK变得更加完善,也有了更多样性的功能。今天我们就来谈谈如何在基于 Anniversary SDK 的UWP应用中使用Composition API创建DropShadow效果。
1.首先,假如我们想要为一个Ellipse对象创造DropShadow效果,那么第一步,我们需要先创建一个Canvas对象,这个对象位于Ellipse的“背后”,要被Ellipse遮挡住,比如这样:
<Grid> <Canvas x:Name="host"/> <Ellipse x:Name="target"/> </Grid>
2.使用ElementCompositionPreview.GetElementVisual()方法获得Canvas的Visual,然后得到该Visual的Compositor,其中下面代码中的host是我们在XMAL中创建的Canvas:
Visual hostvisual = ElementCompositionPreview.GetElementVisual(host);
Compositor compositor = hostvisual.Compositor;
3.现在我们要通过compositor创建一个新的SpriteVisual。SpriteVisual派生于ContainerVisual类,而ContainerVisual类派生于Visual类。相比起ContainerVisual,SpriteVisual类还包含了图像、效果和交换链形式的内容。在我们这篇blog中,我们就是通过这个SpriteVisual来构建DropShadow。创建好SpriteVisual之后,我们还需要使用ElementCompositionPreview.SetElementChildVisual()方法将这个SpriteVisual添加到XMAL的可视化树中:
SpriteVisual spritevisual = compositor.CreateSpriteVisual();
ElementCompositionPreview.SetElementChildVisual(host, spritevisual);
4.现在开始进入重要部分,开始构建shadow。我们还是需要使用compositor,通过它我们可以创造一个新的DropShadow。这个创造出的DropShadow就是我们需要的shadow啦!我们可以通过设置这个DropShadow的属性来的到我们需要的DropShadow:
DropShadow dropshadow = compositor.CreateDropShadow(); dropshadow.Color = apptheme.Gary_Color_Brush.Color; dropshadow.Opacity = 0.5f; dropshadow.Offset = new System.Numerics.Vector3(0f, 5f, 0f); dropshadow.Mask = (target as Shape).GetAlphaMask();
这里的这几行要解释一下:Color属性和Opacity属性都不需要怎么介绍了吧,就是代表着这个DropShadow的颜色和不透明度。Offset表示的是阴影的偏移量。这个偏移量是相对于Canvas在UI中的位置来说的,并且Vector3这个类型在上面代码中的构造函数的三个参数都是float类型,因此数值后面要加上f。最下面的Mask属性呢,可以通过Image、TextBlock 和 Shape 这三个类各自实现一个称为 GetAlphaMask 的方法,该方法返回一个 CompositionBrush,用于表示带有元素形状的灰度图像。 此 CompositionBrush 可充当复合DropShadow的输入,因此阴影可以反映元素的形状,而不是矩形。 这将为文本、带有 alpha 的图像和形状启用像素完美、基于轮廓的阴影。如果不是这三个类型的对象是不会带有GetAlphaMask()方法的,因此在使用时一定要注意,否则会抛出异常。
5.然后,我们要把这个DropShadow赋值给spritevisual的Shadow属性:
spritevisual.Shadow = dropshadow;
6.最后,我们要创建一个表达式动画。完成了这一步之后,DropShadow效果就实现啦:
ExpressionAnimation animation = compositor.CreateExpressionAnimation("hostvisual.Size"); animation.SetReferenceParameter("hostvisual", hostvisual); spritevisual.StartAnimation("Size", animation);
至此,我们的DropShadow效果就创建完成啦,大家可以自己动手试试~