(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效果就创建完成啦，大家可以自己动手试试~