當(dāng)前位置：首頁 >

win10 uwp 毛玻璃

發(fā)布時(shí)間：2025/3/21 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 win10 uwp 毛玻璃小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文:win10 uwp 毛玻璃

版權(quán)聲明：博客已遷移到 http://lindexi.gitee.io 歡迎訪問。如果當(dāng)前博客圖片看不到，請到 http://lindexi.gitee.io 訪問博客。本文地址 https://blog.csdn.net/lindexi_gd/article/details/73456809

毛玻璃在UWP很簡單，不會(huì)和WPF那樣傷性能。

本文告訴大家，如何在 UWP 使用 win2d 做毛玻璃。

毛玻璃可以使用 win2D 方法，也可以使用 Compositor 。

使用 win2d 得到軟件內(nèi)控件毛玻璃，而使用 Compositor 可以獲得窗口毛玻璃。

先來說下如何使用 Compositor 做窗口毛玻璃，感覺小伙伴感興趣的是窗口毛玻璃。

Compositor 創(chuàng)建毛玻璃

先寫最簡單的頁面，只有一個(gè) Grid，給他名稱 GlassHost，這個(gè)控件用于顯示毛玻璃

然后在構(gòu)造函數(shù)使用InitializeFrostedGlass，這個(gè)函數(shù)用于在一個(gè)控件顯示毛玻璃

public MainPage(){InitializeComponent();InitializeFrostedGlass(GlassHost);}private void InitializeFrostedGlass(UIElement glassHost){Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);Compositor compositor = hostVisual.Compositor;var backdropBrush = compositor.CreateHostBackdropBrush();var glassVisual = compositor.CreateSpriteVisual();glassVisual.Brush = backdropBrush;ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);glassVisual.StartAnimation("Size", bindSizeAnimation);}

這樣就可以看到毛玻璃效果

這個(gè)代碼是從 http://www.jianshu.com/p/3b49fd3d7edb 復(fù)制的

大概解釋一下， compositor.CreateHostBackdropBrush() 獲得創(chuàng)建之前繪制窗口后面視覺效果的區(qū)域，然后把他添加到Grid就可以了。

但是模糊的玻璃可以看不到里面控件，于是就把控件放在一個(gè)Grid 的最前，這樣看起來背景就是毛玻璃

<Grid > 最外層的 Grid 不要設(shè)置 BackGround <Grid x:Name="GlassHost"></Grid> 把他放在最前<ListView ItemsSource="{x:Bind AvaloniaCol}" IsItemClickEnabled="True" ItemClick="ListViewBase_OnItemClick" ><ListView.ItemTemplate><DataTemplate><Grid Background="#FFFFFF" PointerPressed="UIElement_OnPointerPressed"><TextBlock Text="{Binding}"></TextBlock></Grid></DataTemplate></ListView.ItemTemplate></ListView><Button Content="添加" Click="ButtonBase_OnClick"></Button> 可以看到按鈕，是清晰的</Grid>

如何去掉標(biāo)題欄，上面的博客也有說，于是我就不多說啦。

win2D

下面介紹使用 win2d 做毛玻璃

使用 win2D 方法，需要使用 Nuget 安裝，如果速度太慢，推薦使用博客園的鏡像

這個(gè)方法可以獲得控件的毛玻璃，但是不可以獲得窗口毛玻璃

接下來告訴大家如何做上圖的效果。

但是可以看到，上面的圖做了其他的，如拖動(dòng)時(shí)顯示后面的圖片。為了顯示最短的代碼，讓大家知道毛玻璃是如何做的，下面先來做效果。

第一步，獲得顯示的圖片

參見：win10 uwp 截圖獲取屏幕顯示界面保存圖片

于是在界面顯示一個(gè)圖片，界面的左邊就是圖片，右邊就是毛玻璃。之所以需要獲得圖片的截圖是因?yàn)槊Ａ枰斎朐?#xff0c;于是界面代碼如下

<Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid Margin="10 10 10 10">必須把圖片的路徑修改為自己工程的路徑，需要在工程存在圖片<Image x:Name="Image" Source="Assets/2017年5月31日 210702.jpg" Stretch="UniformToFill" /></Grid><Grid Grid.Column="1" Margin="10 10 10 10"><xaml:CanvasControl x:Name="Canvas" CreateResources="Canvas_CreateResources" Draw="Canvas_Draw" /></Grid>

毛玻璃效果寫在 CanvasControl ，
需要對顯示截圖，把圖片做效果。然后把得到的效果顯示

但是在什么時(shí)候截圖？也就是什么時(shí)候才是截圖最好的時(shí)候？

我認(rèn)為可以在 CreateResources 事件進(jìn)行截圖，請看代碼

第二步就是把圖片進(jìn)行效果，代碼很少

void Canvas_Draw(CanvasControl sender, CanvasDrawEventArgs args){using (var session = args.DrawingSession){var blur = new GaussianBlurEffect{BlurAmount = 50.0f, // increase this to make it more blurry or vise versa.//Optimization = EffectOptimization.Balanced, // default value//BorderMode = EffectBorderMode.Soft // default valueSource = _bitmap};session.DrawImage(blur, new Rect(0, 0, sender.ActualWidth, sender.ActualHeight),new Rect(0, 0, _bitmap.SizeInPixels.Width, _bitmap.SizeInPixels.Height), 0.9f);}}

現(xiàn)在看起來就是

如果需要修改模糊，請把 BlurAmount 修改為你想要的

上面的代碼就是主要的，接下來就是做上圖的效果

首先xaml代碼：

可以看到，這里引用 CanvasControl ，還有很多代碼需要寫在后面

void Canvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args){args.TrackAsyncAction(CreateResourcesAsync(sender).AsAsyncAction());}async Task CreateResourcesAsync(CanvasControl sender){// give it a little bit delay to ensure the image is load, ideally you want to Image.ImageOpened event insteadawait Task.Delay(200);using (var stream = new InMemoryRandomAccessStream()){// get the stream from the background imagevar target = new RenderTargetBitmap();await target.RenderAsync(this.Image2);var pixelBuffer = await target.GetPixelsAsync();var pixels = pixelBuffer.ToArray();var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, (uint) target.PixelWidth, (uint) target.PixelHeight, 96, 96, pixels);await encoder.FlushAsync();stream.Seek(0);// load the stream into our bitmap_bitmap = await CanvasBitmap.LoadAsync(sender, stream);}}void Canvas_Draw(CanvasControl sender, CanvasDrawEventArgs args){using (var session = args.DrawingSession){var blur = new GaussianBlurEffect{BlurAmount = 50.0f, // increase this to make it more blurry or vise versa.//Optimization = EffectOptimization.Balanced, // default value//BorderMode = EffectBorderMode.Soft // default valueSource = _bitmap};session.DrawImage(blur, new Rect(0, 0, sender.ActualWidth, sender.ActualHeight),new Rect(0, 0, _bitmap.SizeInPixels.Width, _bitmap.SizeInPixels.Height), 0.9f);}}void Overlay_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e){// 重新設(shè)置 _x_x = (float) this.ImagePanel2.ActualWidth;}void Overlay_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e){//獲得當(dāng)前的x，用于下面計(jì)算_x += (float) e.Delta.Translation.X;//如果當(dāng)前的x超過了，或者已經(jīng)最小if (_x > ImagePanel2.ActualWidth || _x < 0)return;//我們剪輯覆蓋，用于顯示下面的圖片Clip.Rect = new Rect(0, 0, _x, this.ImagePanel2.ActualHeight);}void Overlay_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e){// 重置剪輯顯示完整的覆蓋Clip.Rect = new Rect(0, 0, this.ImagePanel2.ActualWidth, this.ImagePanel2.ActualHeight);}

上面的代碼就是獲得圖片，把圖片使用 GaussianBlurEffect 得到毛玻璃

實(shí)際代碼做的就是如下面顯示，做出毛玻璃效果，其他代碼都是為了做剛才的圖

關(guān)于拖動(dòng)使用裁剪顯示后面的圖，我就不多說了，實(shí)際代碼看起來很多，但是不是很難，我就不說拉。

請看下面的效果，這就是不停修改 BlurAmount 得到。

代碼很簡單，所以我就不說。

最簡單方法

當(dāng)然，還有最簡單的代碼，只需要一句話，請看文檔
Acrylic material
因?yàn)椴恢牢④浭欠襁€更改，所以我就不寫了。

為了說明代碼的簡單，我需要給個(gè)例子，上面那么長的代碼，現(xiàn)在只需要一行

參見：https://stackoverflow.com/questions/31987817/how-to-make-frosted-glass-effect-in-windows-10-universal-app

http://microsoft.github.io/Win2D/html/N_Microsoft_Graphics_Canvas_Effects.htm

（UWP）應(yīng)用窗口實(shí)現(xiàn)毛玻璃效果 - 簡書

本作品采用知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議進(jìn)行許可。歡迎轉(zhuǎn)載、使用、重新發(fā)布，但務(wù)必保留文章署名林德熙(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用于商業(yè)目的，基于本文修改后的作品務(wù)必以相同的許可發(fā)布。如有任何疑問，請與我聯(lián)系。

總結(jié)

以上是生活随笔為你收集整理的win10 uwp 毛玻璃的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：网易云轻舟微服务深度解读:基于开源,强于
下一篇： nosql介绍、memrcached介绍