1. 什麼是長陰影

前幾年扁平化設計（Flat Design）十分流行，後來在扁平化的基礎上又流行起了長陰影（Long Shadow）。長陰影其實就是擴充套件了物件的投影，感覺是一種光線照射下的影子，通常採用角度為 45 度的投影，給物件添加了一份立體感。長陰影快速發展為流行的設計趨勢，並經常被應用到扁平設計方案的物件。它很適合用在較小的元素上，一時之間幾乎應用的圖示都加上了長陰影。（不過現在又不流行了）

2. 使用GetAlphaMask和ContainerVisual製作長陰影

要在UWP中製作長陰影的話，可以用GetAlphaMask拿到輪廓，做成灰色，然後複製一百幾十個擺在後面。不過當然並不是直接建立這麼多個UIElement，而是使用ContainerVisual類實現這個功能。ContainerVisual

下面是具體的實現例子，和上篇文章介紹的一樣，首先在需要陰影的元素（TitleElement）後面放一個用於顯示陰影的UIElement（ShadowElement），佈局如下：

<Grid Background="#FFE87A69" Padding="40" Margin="50" x:Name="ShadowRoot">
    <Rectangle x:Name="ShadowElement" />
    <TextBlock Text="One Pomodoro" Foreground="#FFfee8da"  FontSize="64" x:Name="TitleElement"/>
</Grid>
 

然後在程式碼裡建立一個ContainerVisual並使用ElementCompositionPreview.SetElementChildVisual將這個ContainerVisual設定到ShadowElement的視覺化層：

var textVisual = ElementCompositionPreview.GetElementVisual(TitleElement);
compositor = textVisual.Compositor;
containerVisual = compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(ShadowElement, containerVisual);
 

之後呼叫TitleElement的GetAlphaMask獲取輪廓，然後將這個輪廓作為Mask設定到CompositionMaskBrush的Mask屬性，重複一百次：

var mask = TitleElement.GetAlphaMask();

var shadowColor = Color.FromArgb(255, 160, 59, 49);
int depth = 100;
for (int i = 0; i < depth; i++)
{
    //建立Brush
    var maskBrush = compositor.CreateMaskBrush();
    maskBrush.Mask = mask;
    maskBrush.Source = compositor.CreateColorBrush(shadowColor);

    //建立Visual
    var visual = compositor.CreateSpriteVisual();
    visual.Brush = maskBrush;
    visual.Offset = new Vector3(i + 1, i + 1, 0);

    //將Visual新增到ContainerVisual
    containerVisual.Children.InsertAtBottom(visual);

    //同步Visual和TextVisual的尺寸
    var bindSizeAnimation = compositor.CreateExpressionAnimation("textVisual.Size");
    bindSizeAnimation.SetReferenceParameter("textVisual", textVisual);
    visual.StartAnimation("Size", bindSizeAnimation);
}

然後終於……

……還是沒完成，還需要為ContainerVisual設定Clip以免陰影越界。看起來需要寫很多程式碼去實現，但其實有個簡單的方法，將外面那層的ShadowRoot的CornerRadius設定為1，Grid就會自動自覺把超出範圍的內容裁剪掉。雖然不知道具體原理，但有需要的話其它情況也可以偷懶這樣做，也許有人不喜歡圓角，但區區1畫素的圓角你不說我不說又有誰會知道呢。

Grid Background="#FFE87A69" Padding="40" Margin="50" x:Name="ShadowRoot" CornerRadius="1">

這樣一個漂亮的長陰影就完成了。

3. 淡出的陰影

要實現淡出的陰影原理也很簡單，別想太複雜，就只是準備好多個顏色漸漸改變的Visual，插進去ContainerVisual裡就完成了。程式碼及效果如下（順便一提這種情況下Vector3真好用）：

int depth = 60;
float opacity = 0.3f;
Vector3 background = new Vector3(232, 122, 105);


var maskBrush = compositor.CreateMaskBrush();
maskBrush.Mask = mask;

//計算陰影的顏色
Vector3 shadowColor = background - (background - new Vector3(0, 0, 0)) * opacity;
shadowColor = Vector3.Max(Vector3.Zero, shadowColor);
shadowColor += (background - shadowColor) * i / depth;

maskBrush.Source = compositor.CreateColorBrush(Color.FromArgb(255, (byte)shadowColor.X, (byte)shadowColor.Y, (byte)shadowColor.Z));

4. 實際應用

就只是一個靜態的長陰影的話，那還不如用PS做成圖片在放進UWP裡。GetAlphaMask另一個好處是它並不僅獲取靜態的輪廓，而是一直和源頭同步。這樣可玩性就大多了，例如我把長陰影的設計元素新增到番茄鍾裡面，成果如下：

5. 結語

雖然長陰影已經有點過時了，但自己做起來還是覺得很酷很酷。剛開始還擔心這樣搞效能會很差，實際執行起來後發覺超級OK。上面的動畫可以安裝我的番茄鍾應用試玩一下，安裝地址：

一個番茄鍾

6. 參考

[ContainerVisual Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs]((https://docs.microsoft.com/en-us/uwp/api/windows.ui.composition.containervisual)

VisualCollection Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

Vector3 Struct (Windows.Foundation.Numerics) - Windows UWP applications Microsoft Docs

7. 原始碼

OnePomodoro_LongShadow.xaml.cs at master