BlurOverlay 1.0.1

Add blur overlay with semi transparent dark overlay as backdrop for dialogs, messages, modals, etc. Blur the entire application screen to focus user's attention to the dialog that has appeared.

Install-Package BlurOverlay -Version 1.0.1
dotnet add package BlurOverlay --version 1.0.1
<PackageReference Include="BlurOverlay" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlurOverlay --version 1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlurOverlay, 1.0.1"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlurOverlay as a Cake Addin
#addin nuget:?package=BlurOverlay&version=1.0.1

// Install BlurOverlay as a Cake Tool
#tool nuget:?package=BlurOverlay&version=1.0.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

The structure of your XAML must be something like this: <AbsoluteLayout x:Name="body_wrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <StackLayout x:Name="content" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

</StackLayout>
<skia:SKCanvasView x:Name="blur_overlay" IsVisible="False" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
</skia:SKCanvasView>
<StackLayout IsVisible="False" x:Name="black_overlay" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" StyleClass="black_overlay"></StackLayout>

</AbsoluteLayout> This way the blurred overlay appears above the content of your application, and the black overlay is semitransparent and appears above the blurred overlay. You must set the black overlay in the constructor of the blur. Example usage: this.blur = new blur(this, this.black_overlay); this.blur.init_blur();

	this.tapped(this.click, async (s, e) => {
		await this.blur.make_blur();
		await this.blur.display_blur();
	});

	this.tapped(this.black_overlay, async (s, e) => {
		await this.blur.hide_blur();
	});

The structure of your XAML must be something like this: <AbsoluteLayout x:Name="body_wrap" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> <StackLayout x:Name="content" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

</StackLayout>
<skia:SKCanvasView x:Name="blur_overlay" IsVisible="False" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
</skia:SKCanvasView>
<StackLayout IsVisible="False" x:Name="black_overlay" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" StyleClass="black_overlay"></StackLayout>

</AbsoluteLayout> This way the blurred overlay appears above the content of your application, and the black overlay is semitransparent and appears above the blurred overlay. You must set the black overlay in the constructor of the blur. Example usage: this.blur = new blur(this, this.black_overlay); this.blur.init_blur();

	this.tapped(this.click, async (s, e) => {
		await this.blur.make_blur();
		await this.blur.display_blur();
	});

	this.tapped(this.black_overlay, async (s, e) => {
		await this.blur.hide_blur();
	});

Release Notes

On window resize the blur disappears but black overlay remains.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.1 165 11/23/2020
1.0.0 134 11/22/2020