Win2D est une surcouche à Direct2D vous permettant d’afficher du contenu (images, formes simples, texte, etc.) et d’appliquer des effets (flous, etc.) de manière très perfomante dans une application WIndows (Windows 8.1, UWP, etc). Dans cet article nous afficherons une image dans un canvas que nous flouterons.

Télécharger le package Nuget

La première des choses est d’ajouter le package Nuget WIn2D à votre projet. Attention, il en existe un pour WIndows 8.1 et un pour les applications UWP.

Ajouter une zone de dessin dans le XAML

Une fois cela réalisé, il faut utiliser un Canvas de dessin pour Win2D que l’on va placer dans notre XAML où bon nous semble.

<xaml:CanvasControl x:Name="win2DCanvas"
                    CreateResources="OnWin2DCreateRessources"
                    Draw="FirstShowImageDraw" />

L’événement Draw sera appelé autant de fois que nécessaire par Win2D pour demander le dessin de la zone. Il est donc nécessaire de s’abonner à celle-ci.

Je m’abonne à l’abonnement CreateRessources qui me permettra de créer les ressources dont j’ai besoin. Ici cela sera simplement une image.

Charger l’image à dessiner

Voici la méthode permettant de charger le contenu de l’image sous la forme d’une ressource :

 private void OnWin2DCreateRessources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
 {
     args.TrackAsyncAction(LoadUserStatsImageAsync(sender).AsAsyncAction());

 }

 private async Task LoadUserStatsImageAsync(CanvasControl sender)
 {
     var imagePath = "cheminverslimage";
     _userStatsImage = await CanvasBitmap.LoadAsync(sender.Device, new Uri(imagePath));
 }

Comme vous pouvez le voir, on donne au SDK des actions à attendre avant de commencer le dessin en utilisant la méthode TrackAsyncAction de l’argument de l’événément.

Afficher l’image en appliquant le filtre (flou)

Une fois cela fait, il ne reste plus qu’à dessiner l’image en appliquant un filtre. Voici le code correspondant :

private void FirstShowImageDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
    GaussianBlurEffect blur = new GaussianBlurEffect();
    blur.Source = _userStatsImage;
    blur.BlurAmount = 6.0f;
    args.DrawingSession.DrawImage(blur);
}

Bon code !