UWP中如何用GetAlphaMask实现阴影-创新互联
1. 前言
要在UWP中制作长阴影的话，可以用GetAlphaMask拿到轮廓，做成灰色，然后复制一百几十个摆在后面。GetAlphaMask的使用场景十分有限，Github上能搜到的内容都是用来配合DropShadow的，所以这篇文章也以介绍DropShadow为主。
2. 合成阴影
先介绍一下合成阴影。Compositor.CreateDropShadow()可以创建一个DropShadow，将这个DropShadowDropShadow赋值到SpriteVisual的Shadow属性，然后使用ElementCompositionPreview.SetElementChildVisual 将这个SpriteVisual设置到某个UIElement的可视化层里，再将这个UIElement放到需要阴影的元素后面，这样基本的合成阴影就完成了。
具体代码如下：
private readonly Compositor _compositor;
private readonly SpriteVisual _backgroundVisual;
private readonly DropShadow _dropShadow;
public MainPage() : base()
{
InitializeComponent();
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
//创建并配置DropShadow
_dropShadow = _compositor.CreateDropShadow();
_dropShadow.BlurRadius = 16;
_dropShadow.Offset = new Vector3(8);
//创建SpriteVisual并设置Shadow
_backgroundVisual = _compositor.CreateSpriteVisual();
_backgroundVisual.Shadow = _dropShadow;
//将SpriteVisual放到可视化树
ElementCompositionPreview.SetElementChildVisual(BackgroundGrid, _backgroundVisual);
Host.SizeChanged += OnHostSizeChanged;
}
private void OnHostSizeChanged(object sender, SizeChangedEventArgs e)
{
Vector2 newSize = new Vector2(0, 0);
Vector3 centerPoint = new Vector3(0, 0, 0);
if (Host != null)
{
newSize = new Vector2((float)Host.ActualWidth, (float)Host.ActualHeight);
centerPoint = new Vector3((float)Host.ActualWidth / 2, (float)Host.ActualHeight / 2, 0);
}
_backgroundVisual.CenterPoint = centerPoint;
_backgroundVisual.Size = newSize;
}3. 使用GetAlphaMask裁剪阴影
上面的代码需要可以实现阴影，但只能实现矩形的阴影，在WPF和Silverlight中常用的Shape的阴影，或者文字的阴影都做不出来。
例如将XAML改成这样的话，结果绝不是我想要的东西：
这时候就需要用到GetAlphaMask这个函数。
Image、 TextBlock和Shape分别实现一个名为GetAlphaMask的方法, 该方法返回一个CompositionBrush , 该方法表示具有元素形状的灰度图像。
官当文档 中是这样描述GetAlphaMask函数的，简单来说就是拿到一个Image、TextBlock或Shape的轮廓，这个轮廓可以作为DropShadow.Mask的值，这样DropShadow的形状就可调用GetAlphaMask的元素的形状一样了。
具体代码和结果如下，这才是我想要的效果：
_dropShadow.Mask = Host.GetAlphaMask();4. 使用DropShadowPanel
如果觉得自己写代码太过复杂， 可以使用Toolkit中的DropShadowPanel。
DropShadowPanel继承自ContentControl，当它的Cotnent为Shape、TextBlock、Image之一（或Toolkit中实现了GetAlphaMask的其它控件）时，它就调用GetAlphaMask获取阴影的形状，否则就是简单的举行，代码如下：
CompositionBrush mask = null;
if (Content is Image)
{
mask = ((Image)Content).GetAlphaMask();
}
else if (Content is Shape)
{
mask = ((Shape)Content).GetAlphaMask();
}
else if (Content is TextBlock)
{
mask = ((TextBlock)Content).GetAlphaMask();
}
else if (Content is ImageExBase imageExBase)
{
imageExBase.ImageExInitialized += ImageExInitialized;
if (imageExBase.IsInitialized)
{
imageExBase.ImageExInitialized -= ImageExInitialized;
mask = ((ImageExBase)Content).GetAlphaMask();
}
}
_dropShadow.Mask = mask;之后它的做法和上面介绍的一样，把这个阴影设置到一个元素放在ContentPresenter后面，看起来就实现了Content的阴影：
_border = GetTemplateChild(PartShadow) as Border;
if (_border != null)
{
ElementCompositionPreview.SetElementChildVisual(_border, _shadowVisual);
}
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：UWP中如何用GetAlphaMask实现阴影-创新互联
本文URL：http://myzitong.com/article/ddsish.html