Créer une application Win2D simple

Ce tutoriel présente certaines des fonctionnalités de dessin de base de Win2D. Vous allez apprendre à :

Ajoutez Win2D à un projet Windows XAML C#.
Dessinez du texte et de la géométrie.
Appliquer des effets de filtre.
Animer votre contenu avec Win2D.
Suivez les bonnes pratiques Win2D.

Configurer votre machine de développement

Veillez à configurer votre machine avec tous les outils nécessaires :

Installer Visual Studio
- Inclure le Kit de développement logiciel (SDK) UWP ou Windows (en fonction de vos besoins), 17763+
Si vous utilisez UWP, veillez également à activer le mode développeur

Créer un projet Win2D

Suivez les étapes du guide de démarrage rapide Win2D « Hello, World ! » pour créer un projet à l’aide de Win2D et ajouter une référence au package NuGet Win2D. Vous pouvez utiliser WinUI (Sdk d’application Windows) ou la plateforme Windows universelle (UWP).

Ajouter un CanvasControl Win2D au xaml de votre application

Pour utiliser Win2D, vous devez dessiner vos graphiques quelque part. Dans une application XAML, la méthode la plus simple consiste à ajouter un CanvasControl à votre page XAML.

Assurez-vous avant de continuer que l'option Architecture du projet est définie sur x86 ou x64 et que n'est pas définie de à Any CPU. Win2D est implémenté en C++, et par conséquent, les projets qui utilisent Win2D doivent être ciblés vers une architecture de processeur spécifique.

Accédez à MainPage.xaml dans votre projet en double-cliquant dessus dans l’Explorateur de solutions. Cela ouvre le fichier. Pour plus de commodité, vous pouvez double-cliquer sur le bouton XAML sous l’onglet Concepteur ; Cela masque le concepteur visuel et réserve tout l’espace pour la vue de code.
Avant d’ajouter le contrôle, vous devez d’abord indiquer au code XAML où CanvasControl est défini. Pour ce faire, accédez à la définition de l’élément Page et ajoutez cette directive : xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". Votre code XAML doit maintenant ressembler à ceci :

<Page
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">

À présent, ajoutez un nouvel élément enfant canvas:CanvasControl à l'élément racine Grid. Donnez un nom au contrôle, par exemple « canevas ». Votre code XAML doit maintenant ressembler à ceci :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasControl x:Name="canvas"/>
</Grid>

Ensuite, définissez un gestionnaire d’événements pour l’événement Draw . CanvasControl déclenche Draw chaque fois que votre application doit dessiner ou redessiner son contenu. Le moyen le plus simple consiste à permettre à Visual Studio AutoComplete de vous aider. Dans la définition CanvasControl , commencez à taper un nouvel attribut pour le Draw gestionnaire d’événements :

<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" />

Remarque

Une fois que vous avez entré Draw=", Visual Studio doit afficher une zone vous invitant à le laisser remplir automatiquement la définition appropriée pour le gestionnaire d’événements. Appuyez sur TAB pour accepter le gestionnaire d’événements par défaut de Visual Studio. Cela ajoute également automatiquement une méthode de gestionnaire d’événements correctement mise en forme dans votre code-behind ('MainPage.xaml.cs'). Ne vous inquiétez pas si vous n’avez pas utilisé la saisie semi-automatique ; vous pouvez ajouter manuellement la méthode de gestionnaire d’événements à l’étape suivante.

Dessinez votre premier texte dans Win2D

Maintenant, passons au code C# sous-jacent. Ouvrez MainPage.xaml.cs depuis l’Explorateur de solutions.
En haut du fichier C# figurent différentes définitions d’espace de noms. Ajoutez les espaces de noms suivants :

using Windows.UI;
using System.Numerics;
using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;

Vous devriez ensuite voir le gestionnaire d’événements vide suivant, inséré par la saisie semi-automatique :

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
}

(Si vous n’avez pas utilisé la saisie semi-automatique à l’étape précédente, ajoutez ce code maintenant.)

Le paramètre CanvasDrawEventArgs expose un membre, DrawingSession, qui est de type CanvasDrawingSession. Cette classe fournit la plupart des fonctionnalités de dessin de base dans Win2D : elle a des méthodes telles que CanvasDrawingSession.DrawRectangle, CanvasDrawingSession.DrawImage et la méthode dont vous avez besoin pour dessiner du texte, CanvasDrawingSession.DrawText.

Ajoutez le code suivant à la méthode canvas_Draw :

args.DrawingSession.DrawText("Hello, World!", 100, 100, Colors.Black);

Le premier argument, "Hello, World!"est la chaîne que vous souhaitez que Win2D affiche. Les deux « 100 » indiquent à Win2D de décaler ce texte par 100 DIPs (pixels indépendants de l’appareil) vers la droite et vers le bas. Enfin, Colors.Black définit la couleur du texte.

Vous êtes maintenant prêt à exécuter votre première application Win2D. Appuyez sur la touche F5 pour compiler et lancer. Vous devriez voir une fenêtre vide avec « Hello, world ! » en noir.

Supprimer correctement les ressources Win2D

Avant de continuer à dessiner d’autres types de contenu, vous devez d’abord ajouter du code pour vous assurer que votre application évite les fuites de mémoire. La plupart des applications Win2D écrites dans un langage .NET et à l’aide d’un contrôle Win2D comme CanvasControl doivent suivre les étapes ci-dessous. Strictement parlant, votre application simple « Hello, world » n’est pas affectée, mais il s’agit d’une bonne pratique à suivre en général.

Pour plus d’informations, consultez Éviter les fuites de mémoire.

Ouvrez MainPage.xaml et trouvez l'élément XAML de la page qui contient votre CanvasControl. Il doit s’agir du premier élément du fichier.
Ajoutez un gestionnaire pour l’événement Unloaded. Votre code XAML doit ressembler à ceci :

<Page
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d"
    Unloaded="Page_Unloaded">

Accédez à MainPage.xaml.cs et trouvez le gestionnaire d’événements Page_Unloaded. Ajoutez le code suivant :

void Page_Unloaded(object sender, RoutedEventArgs e)
{
    this.canvas.RemoveFromVisualTree();
    this.canvas = null;
}

Si votre application contient plusieurs contrôles Win2D, vous devez répéter les étapes ci-dessus pour chaque page XAML qui contient un contrôle Win2D. Votre application n’a actuellement qu’un seul CanvasControl, donc c'est terminé.

Dessiner des formes

Il est tout aussi facile d’ajouter la géométrie 2D à votre application. Ajoutez le code suivant à la fin de canvas_Draw :

args.DrawingSession.DrawCircle(125, 125, 100, Colors.Green);
args.DrawingSession.DrawLine(0, 0, 50, 200, Colors.Red);

Les arguments de ces deux méthodes sont similaires à DrawText. Un cercle est défini par un point central (125, 125), un rayon (100) et une couleur (vert). Une ligne est définie par un début (0, 0), une fin (50, 200) et une couleur (Rouge).

Appuyez maintenant sur F5 pour exécuter l’application. Vous devriez voir « Hello, world ! » avec un cercle vert et une ligne rouge.

Vous vous demandez peut-être comment contrôler des options de dessin plus avancées, telles que l’épaisseur de trait et les tirets, ou des options de remplissage plus complexes telles que l’utilisation de pinceaux. Win2D fournit toutes ces options et bien plus encore, et facilite leur utilisation lorsque vous le souhaitez. Toutes les Draw(...) méthodes offrent de nombreuses surcharges qui peuvent accepter des paramètres supplémentaires tels que CanvasTextFormat (famille de polices, taille, etc.) et CanvasStrokeStyle (tirets, points, extrémités, etc.). N’hésitez pas à explorer l’aire d’API pour en savoir plus sur ces options.

Générer dynamiquement des paramètres de dessin

Maintenant, ajoutons une certaine variété en dessinant un tas de formes et de texte avec des couleurs aléatoires.

Ajoutez le code suivant en haut de votre MainPage classe. Il s’agit de la fonctionnalité d’assistance pour générer des valeurs aléatoires que vous allez utiliser lors du dessin :

Random rnd = new Random();
private Vector2 RndPosition()
{
    double x = rnd.NextDouble() * 500f;
    double y = rnd.NextDouble() * 500f;
    return new Vector2((float)x, (float)y);
}

private float RndRadius()
{
    return (float)rnd.NextDouble() * 150f;
}

private byte RndByte()
{
    return (byte)rnd.Next(256);
}

Modifiez votre canvas_Draw méthode pour dessiner à l’aide de ces paramètres aléatoires :

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    args.DrawingSession.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
}

Analysons comment DrawText a changé. "Hello, World!" reste le même qu'avant. Les paramètres de décalage x et y ont été remplacés par un seul System.Numerics.Vector2 qui est généré par RndPosition. Enfin, au lieu d’utiliser une couleur prédéfinie, Color.FromArgb vous permet de définir une couleur à l’aide de valeurs A, R, G et B. A est alpha, ou niveau d’opacité ; dans ce cas, vous voulez toujours entièrement opaque (255).

DrawCircle et DrawLine fonctionnent de la même façon que DrawText.

Enveloppez votre code de dessin dans une boucle for. Vous devez vous retrouver avec le code suivant canvas_Draw :

for (int i = 0; i < 100; i++)
{
    args.DrawingSession.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
}

Réexécutez l’application. Vous devriez voir un ensemble entier de texte, de lignes et de cercles avec des positions et des tailles aléatoires.

Appliquer un effet d’image à votre contenu

Les effets d’image, également appelés effets de filtre, sont des transformations graphiques qui sont appliquées aux données de pixels. La saturation, la rotation des teintes et le flou gaussien sont des effets d’image courants. Les effets d’image peuvent être chaînés ensemble, produisant une apparence visuelle sophistiquée pour un effort minimal.

Vous utilisez des effets d’image en fournissant une image source (le contenu que vous commencez), en créant un effet tel que GaussianBlurEffect, en définissant des propriétés telles que BlurAmount, puis en dessinant la sortie de l’effet avec DrawImage.

Pour appliquer un effet d’image à votre texte et à vos formes, vous devez d’abord afficher ce contenu dans un CanvasCommandList. Cet objet est utilisable en tant qu'entrée pour votre effet.

Modifiez votre canvas_Draw méthode pour utiliser le code suivant :

CanvasCommandList cl = new CanvasCommandList(sender);

using (CanvasDrawingSession clds = cl.CreateDrawingSession())
{
    for (int i = 0; i < 100; i++)
    {
        clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    }
}

Tout comme vous obtenez un CanvasDrawingSession à partir duquel vous pouvez dessiner, vous pouvez créer un CanvasDrawEventArgs à partir d’un CanvasDrawingSession. La seule différence est que lorsque vous dessinez dans la session de dessin de la liste de commandes (clds), vous ne rendez pas directement sur le CanvasControl. Au lieu de cela, la liste de commandes est un objet intermédiaire qui stocke les résultats du rendu pour une utilisation ultérieure.

Vous avez peut-être remarqué le using bloc qui encapsule la session de dessin de la liste de commandes. Les sessions de dessin implémentent IDisposable et doivent être supprimées lorsque vous avez terminé le rendu (le using bloc le fait). Le CanvasDrawingSession que vous obtenez de manière automatique de CanvasDrawEventArgs est fermé pour vous, mais vous devez supprimer toutes les sessions de dessin que vous avez créées explicitement.

Enfin, définissez le GaussianBlurEffect en ajoutant le code suivant à la fin de la méthode canvas_Draw.

GaussianBlurEffect blur = new GaussianBlurEffect();
blur.Source = cl;
blur.BlurAmount = 10.0f;
args.DrawingSession.DrawImage(blur);

Réexécutez l’application. Vous devriez voir apparaître vos lignes, votre texte et vos cercles avec un aspect flou.

Animer votre application avec CanvasAnimatedControl

. Win2D vous donne la possibilité de mettre à jour et d’animer votre contenu en temps réel, par exemple en modifiant le rayon flou du flou gaussien avec chaque image. Pour ce faire, vous allez utiliser CanvasAnimatedControl.

CanvasControl convient le mieux à la plupart du contenu graphique statique : il déclenche uniquement l’événement Draw lorsque votre contenu doit être mis à jour ou redessiné. Si vous changez continuellement de contenu, vous devez envisager d’utiliser CanvasAnimatedControl à la place. Les deux contrôles fonctionnent de façon très similaire, à l'exception de CanvasAnimatedControl qui déclenche l'événement Draw périodiquement ; par défaut, ils sont appelés 60 fois par seconde.

Pour basculer vers , accédez à CanvasAnimatedControlMainPage.xaml, supprimez la ligne CanvasControl et remplacez-la par le code XAML suivant :

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasAnimatedControl x:Name="canvas" Draw="canvas_DrawAnimated" CreateResources="canvas_CreateResources"/>
</Grid>

Tout comme avec CanvasControl, laissez la saisie semi-automatique créer le Draw gestionnaire d’événements pour vous. Par défaut, Visual Studio nomme ce gestionnaire canvas_Draw_1 , car canvas_Draw il existe déjà ; ici, nous avons renommé la méthode canvas_AnimatedDraw pour indiquer clairement qu’il s’agit d’un événement différent.

En outre, vous gérez également un nouvel événement, CreateResources. Une fois de plus, laissez la saisie semi-automatique créer le gestionnaire.

Maintenant que votre application redessinera à 60 images par seconde, il est plus efficace de créer vos ressources visuelles Win2D une fois et de les réutiliser avec chaque image. Il est inefficace de créer un CanvasCommandList et d'y dessiner 300 éléments 60 fois par seconde lorsque le contenu reste statique. CreateResources est un événement déclenché uniquement lorsque Win2D détermine que vous devez recréer vos ressources visuelles, par exemple lorsque la page est chargée.

Revenez à MainPage.xaml.cs. Recherchez votre canvas_Draw méthode qui doit ressembler à ceci :

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    CanvasCommandList cl = new CanvasCommandList(sender);
    using (CanvasDrawingSession clds = cl.CreateDrawingSession())
    {
        for (int i = 0; i < 100; i++)
        {
            clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        }
    }

    GaussianBlurEffect blur = new GaussianBlurEffect();
    blur.Source = cl;
    blur.BlurAmount = 10.0f;
    args.DrawingSession.DrawImage(blur);
}

La grande majorité de ce code de dessin existant n’a pas besoin d’être exécuté avec chaque frame : la liste de commandes contenant le texte, les lignes et les cercles reste la même avec chaque image, et la seule chose qui change est le rayon flou. Par conséquent, vous pouvez déplacer ce code « statique » vers CreateResources.

Pour ce faire, commencez par couper (Ctrl+X) l’intégralité du contenu, à l’exception de canvas_Drawla dernière ligne (args.DrawingSession.DrawImage(blur);). Vous pouvez maintenant supprimer le reste de canvas_Draw car il n’est plus nécessaire : rappelez-vous que CanvasAnimatedControl a un événement distinct Draw.

Recherchez la méthode de canvas_CreateResources générée automatiquement :

private void canvas_CreateResources(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedControl sender, 
    Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{}

Collez (CTRL+V) votre code précédemment coupé dans cette méthode. Ensuite, déplacez la déclaration de GaussianBlurEffect à l'extérieur du corps de la méthode afin que la variable devienne membre de la classe MainPage. À présent, votre code doit ressembler à ce qui suit :

GaussianBlurEffect blur;
private void canvas_CreateResources(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedControl sender,
    Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{
    CanvasCommandList cl = new CanvasCommandList(sender);
    using (CanvasDrawingSession clds = cl.CreateDrawingSession())
    {
        for (int i = 0; i < 100; i++)
        {
            clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        }
    }

    blur = new GaussianBlurEffect()
    {
        Source = cl,
        BlurAmount = 10.0f
    };
}

Vous pouvez maintenant animer le flou gaussien. Recherchez la canvas_DrawAnimated méthode et ajoutez le code suivant :

private void canvas_DrawAnimated(
    Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedDrawEventArgs args)
{
    float radius = (float)(1 + Math.Sin(args.Timing.TotalTime.TotalSeconds)) * 10f;
    blur.BlurAmount = radius;
    args.DrawingSession.DrawImage(blur);
}

Cela lit le temps écoulé total fourni par CanvasAnimatedDrawEventArgs et l’utilise pour calculer la quantité de flou souhaitée ; la fonction sinus offre une variation intéressante au fil du temps. Enfin, le GaussianBlurEffect est généré.

Exécutez l’application pour afficher le changement de contenu flou au fil du temps.

Félicitations pour avoir terminé ce didacticiel de démarrage rapide ! J’espère que vous avez vu comment vous pouvez utiliser Win2D pour créer une scène visuelle riche et animée avec seulement quelques lignes de code C# et XAML.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-10-28