UWP 使用GetAlphaMask製作陰影

2022-01-11 02:39:44 字數 2430 閱讀 2631

最近常常接觸到getalphamask,所以想寫這篇文章介紹下getalphamask怎麼使用。其實getalphamask的使用場景十分有限,github上能搜到的內容都是用來配合dropshadow的,所以這篇文章也以介紹dropshadow為主。

先介紹一下合成陰影。compositor.createdropshadow()可以建立乙個dropshadow,將這個dropshadowdropshadow賦值到spritevisual的shadow屬性,然後使用elementcompositionpreview.setelementchildvisual 將這個spritevisual設定到某個uielement的視覺化層裡,再將這個uielement放到需要陰影的元素後面,這樣基本的合成陰影就完成了。

具體**如下:

上面的**需要可以實現陰影,但只能實現矩形的陰影,在wpf和silverlight中常用的shape的陰影,或者文字的陰影都做不出來。

例如將xaml改成這樣的話,結果絕不是我想要的東西:

這時候就需要用到getalphamask這個函式。

image、 textblock和shape分別實現乙個名為getalphamask的方法, 該方法返回乙個compositionbrush , 該方法表示具有元素形狀的灰度影象。

官當文件 中是這樣描述getalphamask函式的,簡單來說就是拿到乙個image、textblock或shape的輪廓,這個輪廓可以作為dropshadow.mask的值,這樣dropshadow的形狀就可呼叫getalphamask的元素的形狀一樣了。

具體**和結果如下,這才是我想要的效果:

如果覺得自己寫**太過複雜, 可以使用toolkit中的dropshadowpanel。

dropshadowpanel繼承自contentcontrol,當它的cotnent為shape、textblock、image之一(或toolkit中實現了getalphamask的其它控制項)時,它就呼叫getalphamask獲取陰影的形狀,否則就是簡單的舉行,**如下:

compositionbrush mask = null;

if (content is image)

else if (content is shape)

else if (content is textblock)

else if (content is imageexbase imageexbase)

}_dropshadow.mask = mask;

之後它的做法和上面介紹的一樣,把這個陰影設定到乙個元素放在contentpresenter後面,看起來就實現了content的陰影:

_border = gettemplatechild(partshadow) as border;

if (_border != null)

windowscommunitytoolkit_microsoft.toolkit.uwp.ui.controls_dropshadowpanel at master

dropshadowpanel xaml control - windows community toolkit microsoft docs

UWP 在UWP平台中使用Lottie動畫

是的,你沒看錯,qq影音主介面上這個動畫效果是使用lottie動畫實現的!那就趁這個機會,來分享點關於lottie動畫的東西吧!lottie是airbnb開源的乙個面向ios android react native的動畫庫,它可以解析儲存為json格式的由bodymovin匯出的使用ae製作的動畫...

UWP 使用UCT的Markdown控制項

然後就突然有了乙個大膽的想法 這個玩意要是在uwp中實現,用來做更新日誌說明,豈不是美滋滋 嘿嘿嘿,是的,確實美滋滋。而且不用你親自去寫乙個markdown text,微軟團隊的uwp community toolkit,已經幫你完成了一切。在nuget裡面搜尋microsoft.toolkit.u...

UWP筆記 使用FFmpeg編譯碼

安裝nuget ffmpeginterop using ffmpeginterop public void log loglevel level,string message level,message 在應用程式由終端使用者正常啟動時進行呼叫。將在啟動應用程式以開啟特定檔案等情況下使用。有關啟動請...