UWP中如何用GetAlphaMask實現(xiàn)陰影-創(chuàng)新互聯(lián)
1. 前言
要在UWP中制作長陰影的話，可以用GetAlphaMask拿到輪廓，做成灰色，然后復(fù)制一百幾十個擺在后面。GetAlphaMask的使用場景十分有限，Github上能搜到的內(nèi)容都是用來配合DropShadow的，所以這篇文章也以介紹DropShadow為主。
2. 合成陰影
先介紹一下合成陰影。Compositor.CreateDropShadow()可以創(chuàng)建一個DropShadow，將這個DropShadowDropShadow賦值到SpriteVisual的Shadow屬性，然后使用ElementCompositionPreview.SetElementChildVisual 將這個SpriteVisual設(shè)置到某個UIElement的可視化層里，再將這個UIElement放到需要陰影的元素后面，這樣基本的合成陰影就完成了。
具體代碼如下：
private readonly Compositor _compositor;
private readonly SpriteVisual _backgroundVisual;
private readonly DropShadow _dropShadow;
public MainPage() : base()
{
InitializeComponent();
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
//創(chuàng)建并配置DropShadow
_dropShadow = _compositor.CreateDropShadow();
_dropShadow.BlurRadius = 16;
_dropShadow.Offset = new Vector3(8);
//創(chuàng)建SpriteVisual并設(shè)置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裁剪陰影
上面的代碼需要可以實現(xiàn)陰影，但只能實現(xiàn)矩形的陰影，在WPF和Silverlight中常用的Shape的陰影，或者文字的陰影都做不出來。
例如將XAML改成這樣的話，結(jié)果絕不是我想要的東西：
這時候就需要用到GetAlphaMask這個函數(shù)。
Image、 TextBlock和Shape分別實現(xiàn)一個名為GetAlphaMask的方法, 該方法返回一個CompositionBrush , 該方法表示具有元素形狀的灰度圖像。
官當(dāng)文檔 中是這樣描述GetAlphaMask函數(shù)的，簡單來說就是拿到一個Image、TextBlock或Shape的輪廓，這個輪廓可以作為DropShadow.Mask的值，這樣DropShadow的形狀就可調(diào)用GetAlphaMask的元素的形狀一樣了。
具體代碼和結(jié)果如下，這才是我想要的效果：
_dropShadow.Mask = Host.GetAlphaMask();4. 使用DropShadowPanel
如果覺得自己寫代碼太過復(fù)雜， 可以使用Toolkit中的DropShadowPanel。
DropShadowPanel繼承自ContentControl，當(dāng)它的Cotnent為Shape、TextBlock、Image之一（或Toolkit中實現(xiàn)了GetAlphaMask的其它控件）時，它就調(diào)用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;之后它的做法和上面介紹的一樣，把這個陰影設(shè)置到一個元素放在ContentPresenter后面，看起來就實現(xiàn)了Content的陰影：
_border = GetTemplateChild(PartShadow) as Border;
if (_border != null)
{
ElementCompositionPreview.SetElementChildVisual(_border, _shadowVisual);
}
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章題目：UWP中如何用GetAlphaMask實現(xiàn)陰影-創(chuàng)新互聯(lián)
文章地址：http://www.jiaotiyi.com/article/ddsish.html