前言
看了好久官方的Windows UI Dev Labs示例好久才有点心得，真是头大。（其实是英语幼儿园水平(⊙﹏⊙)b）
真的网上关于这个API的资料可以说几乎没有。
正文
首先用这东西的添加WIN2D。其实这个API实现阴影的步骤和正儿八经使用WIN2D差不多,但是我自己感觉比用WIN2D简单，毕竟微软大法做了封装就是要简单粗暴。差不多的实现都是自定义控件，官方的也是。
其实就这个API做阴影就是用了2个图层来实现的。
上图是CorelDRAW里的阴影效果图，明显看出是2个图层的堆叠。
so，用这个API来实现太简单了，只用控制下面几个属性就能完美实现了外加一个动画就搞定了。
前台XAML
<Grid Background="White">
<Canvas x:Name="ShadowHost"
Margin="50"/>
<Image x:Name="CircleImage"
Margin="50"
Source="Assets/3275.jpg" Canvas.ZIndex="1"/>
</Grid>
后退CS
首先在构造函数中定义一个方法来实现阴影。
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
DropShadow(ShadowHost, CircleImage);
}
private void DropShadow(UIElement shadowHost, Image shadowTarget)
{
Visual hostVisual = ElementCompositionPreview.GetElementVisual(shadowHost);
Compositor compositor = hostVisual.Compositor;
// 创建阴影
var dropShadow = compositor.CreateDropShadow();
dropShadow.Color = Color.FromArgb(255, 255, 0, 0);
dropShadow.BlurRadius = 20.0f;
dropShadow.Offset = new Vector3(2.5f, 2.5f, 0.0f);
dropShadow.Opacity = 50.0f;
// 拿到要做阴影的元素的外形用来做阴影的形状，比如我这里是矩形，那这个阴影就是矩形阴影，是圆是扁就看这里了
dropShadow.Mask = shadowTarget.GetAlphaMask();
// 创建一个视觉树来hold住阴影
var shadowVisual = compositor.CreateSpriteVisual();
shadowVisual.Shadow = dropShadow;
// 把自定义的阴影添加到视觉树
ElementCompositionPreview.SetElementChildVisual(shadowHost, shadowVisual);
// 用一个动画来保证阴影和视觉树同步，就是你变我也变，大家一起变。
var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
shadowVisual.StartAnimation("Size", bindSizeAnimation);
}
}
TIPS：GetAlphaMask()这个方法只有3个控件实现了：Image、Shape、TextBlock当时我看到就懵逼了，那么多控件怎么才实现这3个？，最后想想貌似绝大多数控件最外层都是Shape里的各种形状。
是否是发现了，既然阴影是用2个图层来实现的，那么这是不是共同点，有了共同点是不是就有了用户控件和模版控件的表演上了？
用户控件和模版控件我以前一直都懵逼的。最近看了好多别人的代码，最近突然就悟了，真悟了。吗蛋这和平时写的窗口程序有毛线区别- -，以前看的各种相关自定义控件的文章都是很高大上，各种牛逼，然并卵看不懂。
拿上面的阴影来说，要把他做成类库，在类库里定义一个用户控件，然后把上面的改造下就可以哪里需要哪里搬了。
自定义控件最让我等小白懵逼的就是依赖属性，看到那一坨就怕- -。
下面用阴影颜色来看看一个完整的依赖属性的定义。
1.
/// <summary> /// 设置阴影的颜色 /// 默认值为黑色 /// </summary> public Color Color { get { return (Color)GetValue(ColorProperty); } set { SetValue(ColorProperty, value); } } public static readonly DependencyProperty ColorProperty = DependencyProperty.Register(nameof(Color), typeof(Color), typeof(CompositionShadow), new PropertyMetadata(Colors.Black,OnBorederColorChaged));
2.
private static void OnBorederColorChaged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((CompositionShadow)d).OnBorederColorChaged((Color)e.NewValue); }
3.
private void OnBorederColorChaged(Color newValue) { _dropShadow.Color = newValue; }
看看2、3步是不是劫完财、再劫个色的套路，反正我理解能力有限，听到回调根本无法第一时间想到具体的东西，完全没概念。
现在看到回调第一个想法就是畜生，劫财还劫色。
现在要做的就是把上面的属性全撸成依赖属性。然后定义更新方法来更新SIZE、Mask、OFFset的变化就可以了。
private void UpdateShadowMask() { if (_castingElement != null) { CompositionBrush mask = null; if (_castingElement is Image) { mask = ((Image)_castingElement).GetAlphaMask(); } else if (_castingElement is Shape) { mask = ((Shape)_castingElement).GetAlphaMask(); } else if (_castingElement is TextBlock) { mask = ((TextBlock)_castingElement).GetAlphaMask(); } _dropShadow.Mask = mask; } else { _dropShadow.Mask = null; } } private void UpdateShadowOffset(float x, float y, float z) { _dropShadow.Offset = new Vector3(x, y, z); } private void UpdateShadowSize() { Vector2 newSize = new Vector2(0, 0); if (_castingElement != null) { newSize = new Vector2((float)_castingElement.ActualWidth, (float)_castingElement.ActualHeight); } _shadowVisual.Size = newSize; } private FrameworkElement _castingElement; private readonly DropShadow _dropShadow; private readonly SpriteVisual _shadowVisual;
总结
其实上面的代码在微软爸爸的各种示例代码中都有。大家搜索下Windows UI dev labs这个GitHub上。全是Composition API的使用例子
