天天看點

UWP 圖檔模糊

先看一下效果:

這是微識别的個人中心頁面,頂部有頭像,以及背景圖檔模糊。

UWP 圖檔模糊

要實作這樣的效果,有兩種方法。

第一種麻煩點,也是我現在用的。想看簡單的,翻到最後

1、

首先看一下xaml代碼:

我是定義了一個StackPanel,圓角=7,xName=rbCover。就是對它的背景進行模糊

在背景cs代碼的實作是:

 其實關鍵代碼是

因為我的背景圖檔是讓使用者自己選擇的,并且存儲在了sqlite中,是以前面加了一大堆讀取的代碼。

然後代碼可以封裝成一個函數,在OnNavigatedTo或者loaded中調用都行。

第二種方法,比較簡單,就是使用UCT(UWP Community Toolkit)中的控件,

看效果

UWP 圖檔模糊

 xaml:

 别忘記引用 xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"

 我用了一個Slider來實作了動态調節,一般實際用的時候,你隻需要直接指定 media:BackdropBlurBrush的Amount即可。