How To Blur An Image Using UWP With XAML And C#

Before reading this article, please go through the following article.

Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

The Blur animation behavior selectively blurs a XAML element by increasing or decreasing pixel size. Sometimes you want an element to appear slightly out of focus, but to be familiar to the user from other locations within an app. Rather than having to rasterize the XAML into an image and apply a blur, you can apply a BlurBehavior to the original element at run time.

Reading this article, you can learn how to blur an image in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)

Now we can discuss step by step App development.

Step 1

Open Visual studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the Suitable Name for your App (UWPBlurImage)->OK.

After Choosing the Target and minimum platform version for your Windows Universal Application will support and the Project creates App.xaml and MainPage.xaml.

Step 2

Open (double Click) the file MainPage.xaml in the Solution Explorer and add the Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

For adding Reference, RightClick Your Project (UWPBlurImage) and Select Manage Nuget Packages.

Accept the Licence

Reference added your project

Step 3

Add TextBlock control and change the Name and text property for title,

Step 4

Add images in the Assets folder, images for Blurring

Step 5

Add the image control for displaying the image for Blurring

Step 6

Add the following Xaml namespaces and code for Blur in Mainpage.xaml,

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="blur"/>
</interactivity:Interaction.Behaviors>

Add a button control and add a Click Event method for blurring action

Note

Automatically the following code will be generated in XAML code view, while we are done in the design view.

<Page x:Class="UWPImageBlur.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPImageBlur" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" xmlns:core="using:Microsoft.Xaml.Interactions.Core" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="222,45,0,0" TextWrapping="Wrap" Text="Blur Image Test" VerticalAlignment="Top" Height="33" Width="203" FontWeight="Bold" FontSize="24" />
<Image x:Name="imgblur" HorizontalAlignment="Left" Height="92" Margin="222,143,0,0" VerticalAlignment="Top" Width="159" Source="Assets/01.jpg">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="blur" /> </interactivity:Interaction.Behaviors>
</Image>
<Button x:Name="btnBlur" Content="Click to Blur" HorizontalAlignment="Left" Margin="516,213,0,0" VerticalAlignment="Top" Click="btnBlur_Click" /> </Grid>
</Page>

Step 7

Add namespace and the following code in MainPage.xaml.cs,

using Microsoft.Toolkit.Uwp.UI.Animations;
private async void btnBlur_Click(object sender, RoutedEventArgs e)
{
await imgblur.Blur(duration: 10, delay: 0, value: 3).StartAsync();
}

Step 8

Deploy your App in Local Machine, and the output of the UWPBlurImage App is,

After the Click to blur button clicked

Summary

Now you have successfully tested UWP ToolKit – Blurring image in Visual C# - UWP environment.