/ win2d

Apply image effect using Win2D

First, there is an official document of Win2D here. And the source code & example are hosted here.

For the fact that the example code are too much and maybe you can't find a good way to start. Now I show an simple example to apply a blur effect using Win2D.

XAML

Add the declaration below:

 xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 

And then add the code below to anywhere you want it to be:

<canvas:CanvasControl x:Name="canvas" Margin="5"
                              Draw="Canvas_Draw"
CreateResources="Canvas_CreateResources"
                              />

We use CanvasControl, which provided by Win2D , to draw something like Text,Image or Shape. The CreateResources event is fired before Draw is called.

The XAML part is quite simple.

Code behind

Yes, you have to do it in your code-behind.

Fist add some fields:

CanvasBitmap bitmapTiger;
ICanvasImage effect;
private void Canvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
{
            args.TrackAsyncAction(Canvas_CreateResourcesAsync(sender).AsAsyncAction());
}

private async Task Canvas_CreateResourcesAsync(CanvasControl sender)
{
            bitmapTiger = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/0.jpg"));

            effect = CreateGaussianBlur();
}

private ICanvasImage CreateGaussianBlur()
{
            var blurEffect = new GaussianBlurEffect
            {
                Source = bitmapTiger,
                BorderMode = EffectBorderMode.Hard,
                BlurAmount = 100,
            };
            return blurEffect;
}

The code above is showing what to do about Creating Resources: First Load an image from a Uri and then create a GaussianBlurEffect which has a hard border and the amount of it is 100.

Then it's time to draw this image using GaussianBlurEffect:

private void Canvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
        {
            var size = sender.Size;
            var ds = args.DrawingSession;

            ds.DrawImage(effect, new Rect(0,0,size.Width,size.Height),new Rect(0,0,1000,625));
        }

This code ds.DrawImage(effect, new Rect(0,0,size.Width,size.Height),new Rect(0,0,1000,625)); shows applying the effect I created before and the destination rect is as large as the size of CanvasControl. The third param is the rect of source image.

The DrawImage method has plenty of Overloads and you should check these out in the official doc.