Tutoriel : Prise en charge de l'encre dans votre application Windows

Stylet Surface (disponible pour l’achat dans le Microsoft Store).

Ce tutoriel explique comment créer une application Windows de base qui prend en charge l’écriture et le dessin avec Windows Ink. Nous utilisons des extraits de code à partir d’un exemple d’application, que vous pouvez télécharger à partir de GitHub (voir Exemple de code), pour illustrer les différentes fonctionnalités et les API Windows Ink associées (voir Composants de la plateforme Windows Ink) abordées à chaque étape.

Nous nous concentrons sur les points suivants :

• Ajout de la prise en charge de l'encre de base
• Ajout d'une barre d'outils d'encrage
• Prise en charge de la reconnaissance de l’écriture manuscrite
• Prise en charge de la reconnaissance des formes simples
• Sauvegarde et chargement de l'encre numérique

Pour plus d’informations sur l’implémentation de ces fonctionnalités, consultez interactions avec le stylet et Windows Ink dans les applications Windows.

Présentation

Avec Windows Ink, vous pouvez fournir à vos clients l’équivalent numérique de presque n’importe quelle expérience de stylet et de papier imaginable, de notes rapides, manuscrites et annotations à des démonstrations de tableau blanc, ainsi qu’à des dessins architecturaux et techniques aux chefs-d’œuvre personnels.

Prerequisites

• Un ordinateur (ou une machine virtuelle) exécutant la version actuelle de Windows 10 ou Windows 11
• Visual Studio 2019 et le Kit de développement logiciel (SDK) RS2 ou version ultérieure
• Sdk Windows 10 (10.0.15063.0)
• Selon votre configuration, vous devrez peut-être installer le package NuGet Microsoft.NETCore.UniversalWindowsPlatform et activer le mode développeur dans vos paramètres système (Paramètres -> Mise à jour et sécurité - Pour les développeurs ->> Utiliser des fonctionnalités de développement).
• Si vous débutez avec le développement d’applications Windows avec Visual Studio, consultez ces rubriques avant de commencer ce tutoriel :
  • Installer des outils pour le Kit de développement logiciel (SDK) d’application Windows
  • Créer une application « Hello, world » (XAML)
• [FACULTATIF] Un stylet numérique et un ordinateur avec un affichage qui prend en charge l’entrée de ce stylet numérique.

Note

Bien que Windows Ink puisse prendre en charge le dessin avec une souris et une touche (nous montrons comment procéder à l’étape 3 de ce didacticiel) pour une expérience Windows Ink optimale, nous vous recommandons d’avoir un stylet numérique et un ordinateur avec un affichage prenant en charge l’entrée de ce stylet numérique.

Exemple de code

Tout au long de ce tutoriel, nous utilisons un exemple d’application manuscrite pour illustrer les concepts et les fonctionnalités abordés.

Téléchargez cet exemple Visual Studio et le code source à partir de GitHub sur l’exemple windows-appsample-get-started-ink :

1. Sélectionnez le bouton clone vert ou télécharger
   
2. Si vous avez un compte GitHub, vous pouvez cloner le dépôt sur votre ordinateur local en choisissant Ouvrir dans Visual Studio
3. Si vous n’avez pas de compte GitHub ou que vous souhaitez simplement une copie locale du projet, choisissez Télécharger ZIP (vous devrez vérifier régulièrement pour télécharger les dernières mises à jour)

Important

La plupart du code de l'exemple est mis en commentaire. Au fur et à mesure de chaque étape, vous serez invité à décommenter différentes sections du code. Dans Visual Studio, mettez simplement en surbrillance les lignes de code, puis appuyez sur CTRL-K, puis sur Ctrl-U.

Composants de la plateforme Windows Ink

Ces objets fournissent la majeure partie de l’expérience d’entrée manuscrite pour les applications Windows.

Composant	Descriptif
InkCanvas	Contrôle de plateforme d’interface utilisateur XAML qui, par défaut, reçoit et affiche toutes les entrées d’un stylet sous la forme d’un trait d’encre ou d’un trait d’effacement.
InkPresenter	Un objet code-behind, qui est instancié avec un contrôle InkCanvas (exposé par la propriété InkCanvas.InkPresenter). Cet objet fournit toutes les fonctionnalités d'entrée manuscrite par défaut fournies par InkCanvas, ainsi qu’un ensemble complet d’API pour une personnalisation et une personnalisation accrues.
InkToolbar	Contrôle de plateforme d’interface utilisateur XAML contenant une collection personnalisable et extensible de boutons qui activent des fonctionnalités liées à l’encre dans un InkCanvas associé.
IInkD2DRenderer Nous n'abordons pas cette fonctionnalité ici. Pour plus d’informations, consultez l’exemple d’entrée manuscrite complexe.	Active le rendu des traits d’encre sur le contexte d’appareil Direct2D désigné d’une application Windows universelle, au lieu du contrôle InkCanvas par défaut.

Étape 1 : Exécuter l’exemple

Une fois que vous avez téléchargé l’exemple d’application RadialController, vérifiez qu’elle s’exécute :

1. Ouvrez l’exemple de projet dans Visual Studio.

2. Définissez la liste déroulante Plateformes de solutions sur une sélection non arm.

3. Appuyez sur F5 pour compiler, déployer et exécuter.

   Note

   Vous pouvez également sélectionner Déboguer> l’élément de menuDémarrer le débogage ou sélectionner le bouton Exécution de l’ordinateur local affiché ici.

La fenêtre de l’application s’ouvre et, après l'affichage d’un écran de démarrage pendant quelques secondes, vous verrez l'écran initial.

Ok, nous avons maintenant l’application Windows de base que nous allons utiliser tout au long du reste de ce tutoriel. Dans les étapes suivantes, nous ajoutons nos fonctionnalités d’entrée manuscrite.

Étape 2 : Utiliser InkCanvas pour prendre en charge l’encrage numérique de base.

Peut-être que vous avez probablement déjà remarqué que l’application, dans son formulaire initial, ne vous permet pas de dessiner quoi que ce soit avec le stylet (bien que vous puissiez utiliser le stylet comme appareil de pointeur standard pour interagir avec l’application).

Nous allons corriger cette petite lacune dans cette étape.

Pour ajouter des fonctionnalités d’entrée manuscrite de base, placez simplement un contrôle InkCanvas sur la page appropriée de votre application.

Note

Un InkCanvas a les propriétés Height et Width par défaut de zéro, sauf s’il s’agit de l’enfant d’un élément qui dimensionne automatiquement ses éléments enfants.

Dans l’exemple :

1. Ouvrez le fichier MainPage.xaml.cs.
2. Recherchez le code marqué avec le titre de cette étape (« // Étape 2 : Utiliser InkCanvas pour prendre en charge l’entrée manuscrite de base »).
3. Décommentez les lignes suivantes. (Ces références sont requises pour les fonctionnalités utilisées dans les étapes suivantes).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. Ouvrez le fichier MainPage.xaml.
5. Recherchez le code indiqué par le titre de cette étape («< -- Étape 2 : Incrustation de base avec InkCanvas --> »).
6. Décommenter la ligne suivante.

    <InkCanvas x:Name="inkCanvas" />

C’est tout !

Réexécutez l’application. Passez en avant et scribblez, écrivez votre nom, ou (si vous tenez un miroir ou avez une très bonne mémoire) dessinez votre auto-portrait.

Étape 3 : Prise en charge de l'écriture numérique avec le tactile et la souris

Vous remarquerez que, par défaut, l'encre numérique est prise en charge uniquement pour le stylet. Si vous essayez d’écrire ou de dessiner avec votre doigt, votre souris ou votre pavé tactile, vous serez déçu.

Pour transformer ce problème en solution, vous devez ajouter une deuxième ligne de code. Cette fois,il se trouve dans le code-behind du fichier XAML dans lequel vous avez déclaré votre InkCanvas.

Dans cette étape, nous présentons l’objet InkPresenter , qui fournit une gestion plus fine de l’entrée, du traitement et du rendu d’entrée manuscrite (standard et modifié) sur votre InkCanvas.

Note

L'entrée manuscrite standard (pointe de stylet ou pointe/bouton effaceur) n'est pas modifiée avec une fonctionnalité matérielle secondaire, telle qu'un bouton du corps du stylet, un bouton de souris droit ou un mécanisme similaire.

Pour activer l’encre avec la souris et le tactile, définissez la propriété InputDeviceTypes de InkPresenter sur la combinaison des valeurs CoreInputDeviceTypes que vous souhaitez.

Dans l’exemple :

1. Ouvrez le fichier MainPage.xaml.cs.
2. Recherchez le code marqué avec le titre de cette étape (« // Étape 3 : Prise en charge de l'encre avec le tactile et la souris »).
3. Supprimez les marques de commentaire des lignes suivantes.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Réexécutez l'application et vous constaterez que tous vos rêves de peinture au doigt sur écran d'ordinateur se sont réalisés !

Note

Lorsque vous spécifiez des types d’appareils d’entrée, vous devez indiquer la prise en charge de chaque type d’entrée spécifique (y compris le stylet), car la définition de cette propriété remplace le paramètre InkCanvas par défaut.

Étape 4 : Ajouter une barre d'outils d'encre numérique

InkToolbar est un contrôle de plateforme UWP qui fournit une collection personnalisable et extensible de boutons pour activer les fonctionnalités liées à l’encre.

Par défaut, inkToolbar inclut un ensemble de boutons de base qui permettent aux utilisateurs de sélectionner rapidement entre un stylet, un crayon, un surligneur ou une gomme, dont l’un peut être utilisé avec un gabarit (règle ou protracteur). Les boutons stylet, crayon et surligneur fournissent chacun un menu volant permettant de sélectionner la couleur d’encre et la taille des traits.

Pour ajouter un InkToolbar par défaut à une application d’entrée manuscrite, placez-le simplement sur la même page que votre InkCanvas et associez les deux contrôles.

Dans l’exemple

1. Ouvrez le fichier MainPage.xaml.
2. Recherchez le code marqué avec le titre de cette étape («< -- Étape 4 : Ajouter une barre d’outils manuscrite --> »).
3. Décommentez les lignes suivantes.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Note

Pour conserver l’interface utilisateur et le code aussi simples que possible, nous utilisons une disposition grid de base et déclarons l’objet InkToolbar après inkCanvas dans une ligne de grille. Si vous le déclarez avant InkCanvas, InkToolbar est affiché en premier, sous le canevas et inaccessible à l'utilisateur.

Réexécutez l’application pour voir InkToolbar et essayer certains des outils.

Défi : Ajouter un bouton personnalisé

Voici un exemple d’inkToolbar personnalisé (à partir du Bloc-croquis dans l’espace de travail Windows Ink).

Pour plus d’informations sur la personnalisation d'une InkToolbar, consultez Ajouter une InkToolbar à une application d'annotation manuscrite Windows.

Étape 5 : Prise en charge de la reconnaissance de l’écriture manuscrite

Maintenant que vous pouvez écrire et dessiner dans votre application, essayons de faire quelque chose d’utile avec ces scribbles.

Dans cette étape, nous utilisons les fonctionnalités de reconnaissance de l’écriture manuscrite de Windows Ink pour essayer de déchiffrer ce que vous avez écrit.

Note

La reconnaissance de l’écriture manuscrite peut être améliorée via les paramètres Pen &Windows Ink :

1. Ouvrez le menu Démarrer et sélectionnez Paramètres.
2. Dans l’écran Paramètres, sélectionnez Appareils>Stylet et Windows Ink.
3. Sélectionnez Obtenir la connaissance de mon écriture manuscrite pour ouvrir la boîte de dialogue Personnalisation de l’écriture manuscrite .

Dans l’exemple :

1. Ouvrez le fichier MainPage.xaml.
2. Recherchez le code marqué avec le titre de cette étape («< -- Étape 5 : Prise en charge de la reconnaissance de l’écriture manuscrite - -> »).
3. Supprimez les marques de commentaire des lignes suivantes.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. Ouvrez le fichier MainPage.xaml.cs.
5. Recherchez le code marqué avec le titre de cette étape (« Étape 5 : Prise en charge de la reconnaissance de l’écriture manuscrite »).
6. Supprimez les marques de commentaire des lignes suivantes.

• Il s’agit des variables globales requises pour cette étape.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• Il s’agit du gestionnaire du bouton Reconnaître le texte , où nous effectuons le traitement de la reconnaissance.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. Réexécutez l’application, écrivez quelque chose, puis cliquez sur le bouton Reconnaître le texte
8. Les résultats de la reconnaissance s’affichent à côté du bouton

Défi 1 : Reconnaissance internationale

Windows Ink prend en charge la reconnaissance de texte pour la plupart des langues prises en charge par Windows. Chaque module linguistique inclut un moteur de reconnaissance de l’écriture manuscrite qui peut être installé avec le module linguistique.

Ciblez un langage spécifique en interrogeant les moteurs de reconnaissance d’écriture manuscrite installés.

Pour plus d’informations sur la reconnaissance internationale de l’écriture manuscrite, consultez Reconnaître les traits Windows Ink en tant que texte.

Défi 2 : Reconnaissance dynamique

Pour ce didacticiel, nous demandons qu’un bouton soit appuyé pour lancer la reconnaissance. Vous pouvez également effectuer une reconnaissance dynamique à l’aide d’une fonction de minutage de base.

Pour plus d’informations sur la reconnaissance dynamique, consultez Reconnaître les traits Windows Ink en tant que texte.

Étape 6 : Reconnaître les formes

Ok, donc maintenant vous pouvez convertir vos notes manuscrites en quelque chose un peu plus lisible. Mais qu’en est-il de ces croquis tremblants, sous caféine, de votre réunion des Flowcharters Anonymes du matin ?

À l’aide de l’analyse manuscrite, votre application peut également reconnaître un ensemble de formes principales, notamment :

• Cercle
• Diamant
• Drawing
• Ellipse
• Triangle Équilatéral
• Hexagon
• Triangle Isocèle
• Parallélogramme
• Pentagone
• Quadrilatère
• Rectangle
• RightTriangle
• Carré
• Trapézoïde
• Triangle

Dans cette étape, nous utilisons les fonctionnalités de reconnaissance de forme de Windows Ink pour essayer de nettoyer vos gribouillis.

Pour cet exemple, nous n’essayons pas de redessiner les traits d’encre (bien que cela soit possible). Au lieu de cela, nous ajoutons un canevas standard sous InkCanvas où nous dessinons des objets Ellipse ou Polygon équivalents dérivés de l’encre d’origine. Nous supprimons ensuite les traits d’encre correspondants.

Dans l’exemple :

1. Ouvrir le fichier MainPage.xaml
2. Recherchez le code marqué avec le titre de cette étape («< -- Étape 6 : Reconnaître les formes --> »)
3. Décommentez cette ligne.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. Ouvrir le fichier MainPage.xaml.cs
5. Recherchez le code marqué avec le titre de cette étape (« // Étape 6 : Reconnaître les formes »)
6. Décommentez les lignes suivantes :

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. Exécutez l’application, dessinez certaines formes, puis cliquez sur le bouton Reconnaître la forme

Voici un exemple d’organigramme rudimentaire d’une serviette numérique.

Voici le même organigramme après la reconnaissance de formes.

Étape 7 : Enregistrer et charger l'encre numérique

Alors, tu as fini de griffonner et tu aimes ce que tu vois, mais tu penses que tu pourrais ajuster quelques choses plus tard ? Vous pouvez enregistrer vos traits d’encre dans un fichier ISF (Ink Serialized Format) et les charger pour modification chaque fois que l’inspiration frappe.

Le fichier ISF est une image GIF de base qui inclut des métadonnées supplémentaires décrivant les propriétés et les comportements de trait d’encre. Les applications qui ne sont pas compatibles avec l'encre numérique peuvent ignorer les métadonnées supplémentaires et peuvent toujours charger l’image GIF de base (y compris la transparence du fond via le canal alpha).

Note

La spécification ISF (Ink Serialized Format) peut être téléchargée à partir du Centre de téléchargement Microsoft.

Dans cette étape, nous raccordons les boutons Enregistrer et Charger situés à côté de la barre d’outils d’entrée manuscrite.

Dans l’exemple :

1. Ouvrez le fichier MainPage.xaml.
2. Recherchez le code marqué avec le titre de cette étape («< -- étape 7 : enregistrement et chargement d’encre - -> »).
3. Décommentez les lignes suivantes.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. Ouvrez le fichier MainPage.xaml.cs.
5. Recherchez le code marqué avec le titre de cette étape (« // Étape 7 : Enregistrer et charger l'encre »).
6. Décommentez les lignes suivantes.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Exécutez l’application et dessinez quelque chose.
8. Sélectionnez le bouton Enregistrer et enregistrez votre dessin.
9. Effacez l’entrée manuscrite ou redémarrez l’application.
10. Sélectionnez le bouton Charger et ouvrez le fichier manuscrit que vous venez d’enregistrer.

Défi : utiliser le Presse-papiers pour copier et coller des traits d’encre

Windows Ink prend également en charge la copie et le collage de traits d’encre vers et depuis le presse-papiers.

Pour plus d’informations sur l’utilisation du Presse-papiers avec l'encre numérique, consultez Enregistrer et récupérer les données de trait Windows Ink.

Résumé

Félicitations, vous avez terminé le tutoriel Prise en charge de l'input manuscrit dans votre application Windows ! Nous vous avons montré le code de base requis pour prendre en charge les entrées manuscrites dans vos applications Windows et comment fournir certaines des expériences utilisateur plus riches prises en charge par la plateforme Windows Ink.

Articles connexes

• Interactions avec le stylet et Windows Ink dans les applications Windows

Samples

• Exemple d'analyse de l'encre (de base) (C#)
• Exemple de reconnaissance de l'écriture manuscrite (C#)
• Enregistrer et charger des traits d’encre à partir d’un fichier ISF (Ink Serialized Format)
• Enregistrer et charger des traits d’encre depuis le Presse-papiers
• Barre d'outils d'encre : emplacement et orientation (de base)
• Emplacement et orientation de la barre d’outils du stylo (dynamique)
• Exemple d’encre simple (C#/C++)
• Exemple d’encre complexe (C++)
• Exemple d’encre (JavaScript)
• Tutoriel de démarrage : Supporter l'encre dans votre application Windows
• Exemple de livre de coloration
• Exemple de notes de famille