Using Win2D to apply effects on your files

It’s been a long time since my last post about C# but I’m still using it, mainly for a personal project: UrzaGatherer 3.0.

Version 2.0 was done using WinJS and JavaScript but because I love discovering new things I decided that version 3.0 will be developed using C# and XAML for Windows 10.

One of the feature I’m working on is a blurred lockscreen background. Basically, the idea is to pick a card and use the picture as lockscreen background.

The main problem that I was facing is that the cards scans are in a too low resolution. So to get rid of the inevitable aliasing produced by scaling my pictures up, I decided to add some Gaussian blur.

The first version of my blurred lockscreen background used a kind of brute force approach: Going through all the pixels and applying my filter. On my desktop PC: no problem. But on my phone (Remember, it is a Windows 10 universal application that I’m working on), the operation was too slow.

Then enters Win2D!

Thanks to it I was able to produce a method to blur my files that uses GPU and DirectX. So faster results and in the same time less battery consumption.

Even the code is pretty simple:

var file = await Package.Current.InstalledLocation.GetFileAsync("test.png");
using (var stream = await file.OpenAsync(FileAccessMode.Read))
    var device = new CanvasDevice();
    var bitmap = await CanvasBitmap.LoadAsync(device, stream);
    var renderer = new CanvasRenderTarget(device, bitmap.SizeInPixels.Width, bitmap.SizeInPixels.Height, bitmap.Dpi);

    using (var ds = renderer.CreateDrawingSession())
        var blur = new GaussianBlurEffect();
        blur.BlurAmount = 8.0f;
        blur.BorderMode = EffectBorderMode.Hard;
        blur.Optimization = EffectOptimization.Quality;
        blur.Source = bitmap;
    var saveFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("temp.jpg", CreationCollisionOption.ReplaceExisting);

    using (var outStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
        await renderer.SaveAsync(outStream, CanvasBitmapFileFormat.Png);

So basically:

  • Open the file stream
  • Create a  canvasDevice and a CanvasRenderTarget to have offscreen rendering capabilities
  • Create the effect you want to use (GaussianBlurEffect here)
  • Apply the effect
  • Save your file

Insanely simple, right?



Win2D is a great library that you can find here: 

Documentation can be found here:

A series of posts you may find interesting about Win2D effects: