Zelfstudie: Inkt in uw Windows-app ondersteunen

Surface-pen (verkrijgbaar in de Microsoft Store).

In deze zelfstudie leert u hoe u een eenvoudige Windows-app maakt die ondersteuning biedt voor schrijven en tekenen met Windows Ink. We gebruiken codefragmenten uit een voorbeeld-app, die u kunt downloaden van GitHub (zie voorbeeldcode), om de verschillende functies en bijbehorende Windows Ink-API's te demonstreren (zie Onderdelen van het Windows Ink-platform) die in elke stap worden besproken.

We richten ons op het volgende:

• Basisondersteuning voor inkt toevoegen
• Een inktwerkbalk toevoegen
• Ondersteunende handschriftherkenning
• Ondersteuning voor basisvormherkenning
• Inkt opslaan en laden

Zie Peninteracties en Windows Ink in Windows-apps voor meer informatie over het implementeren van deze functies.

Introductie

Met Windows Ink kunt u uw klanten voorzien van het digitale equivalent van vrijwel elke denkbare pen- en papierervaring, van snelle, handgeschreven notities en aantekeningen tot whiteboarddemo's, en van bouwkundige en technische tekeningen tot persoonlijke meesterwerken.

Vereiste voorwaarden

• Een computer (of een virtuele machine) met de huidige versie van Windows 10 of Windows 11
• Visual Studio 2019 en de RS2 SDK of hoger
• Windows 10 SDK (10.0.15063.0)
• Afhankelijk van uw configuratie moet u mogelijk het NuGet-pakket Microsoft.NETCore.UniversalWindowsPlatform installeren en de ontwikkelaarsmodus inschakelen in uw systeeminstellingen (Instellingen -> Update & Beveiliging -> Voor ontwikkelaars -> Ontwikkelfuncties gebruiken).
• Als u geen kennis hebt met de ontwikkeling van Windows-apps met Visual Studio, bekijkt u deze onderwerpen voordat u aan de slag gaat met deze zelfstudie:
  • Hulpprogramma's installeren voor de Windows App SDK
  • Een 'Hallo wereld'-app (XAML) maken
• [OPTIONEEL] Een digitale pen en een computer met een beeldscherm dat invoer van die digitale pen ondersteunt.

Voorbeeldcode

In deze zelfstudie gebruiken we een voorbeeld van een inkt-app om de concepten en functionaliteit te demonstreren die worden besproken.

Download dit Visual Studio-voorbeeld en de broncode van GitHub bij windows-appsample-get-started-ink sample:

1. Selecteer de groene knop Klonen of downloaden
   
2. Als u een GitHub-account hebt, kunt u de opslagplaats klonen naar uw lokale computer door Openen te kiezen in Visual Studio
3. Als u geen GitHub-account hebt of als u alleen een lokale kopie van het project wilt, kiest u ZIP downloaden (u moet regelmatig terugkeren om de meest recente updates te downloaden)

Onderdelen van het Windows Ink-platform

Deze objecten bieden het grootste deel van de inktervaring voor Windows-apps.

Stap 1: Het voorbeeld uitvoeren

Nadat u de voorbeeld-app RadialController hebt gedownload, controleert u of deze wordt uitgevoerd:

1. Open het voorbeeldproject in Visual Studio.

2. Stel de vervolgkeuzelijst Oplossingsplatforms in op een niet-Arm-selectie.

3. Druk op F5 om te compileren, implementeren en uitvoeren.

   Opmerking

   U kunt ook de menuopdracht Foutopsporing>Start foutopsporing selecteren of de Lokale machine uitvoeren-knop selecteren die hier wordt weergegeven.

Het app-venster wordt geopend en nadat een welkomstscherm een paar seconden wordt weergegeven, ziet u dit eerste scherm.

Oké, we hebben nu de basis-Windows-app die we in de rest van deze zelfstudie gaan gebruiken. In de volgende stappen voegen we onze inktfunctionaliteit toe.

Stap 2: InkCanvas gebruiken voor basis inktfunctionaliteit

Waarschijnlijk hebt u al gemerkt dat de app in zijn oorspronkelijke vorm niet toelaat om iets met de pen te tekenen (hoewel u de pen als standaardaanwijsapparaat kunt gebruiken om met de app te communiceren).

Laten we dit kleine tekort in deze stap oplossen.

Als u eenvoudige inktfunctionaliteit wilt toevoegen, plaatst u een InkCanvas-besturingselement op de juiste pagina in uw app.

In het voorbeeld:

1. Open het bestand MainPage.xaml.cs.
2. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 2: Gebruik InkCanvas om eenvoudige inkt te ondersteunen').
3. Verwijder opmerkingen bij de volgende regels. (Deze verwijzingen zijn vereist voor de functionaliteit die in de volgende stappen wordt gebruikt).

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

4. Open het bestand MainPage.xaml.
5. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- Stap 2: Eenvoudige handschrift met InkCanvas --'>).
6. Verwijder opmerkingen bij de volgende regel.

    <InkCanvas x:Name="inkCanvas" />

Dat is het!

Voer de app nu opnieuw uit. Schrijf uw naam, of (als u een spiegel vasthoudt of een heel goed geheugen hebt) tekent u uw zelfportret.

Stap 3: Ondersteuning voor handschrift met aanraking en muis

U ziet dat inkt standaard alleen wordt ondersteund voor peninvoer. Als u met uw vinger, muis of touchpad probeert te schrijven of tekenen, zult u teleurgesteld zijn.

Om die frons in een glimlach te veranderen, moet u een tweede regel code toevoegen. Deze keer bevindt het zich in de code-behind voor het XAML-bestand waarin u uw InkCanvas hebt gedeclareerd.

In deze stap introduceren we het InkPresenter-object , dat nauwkeuriger beheer biedt van de invoer, verwerking en rendering van inktinvoer (standaard en gewijzigd) op uw InkCanvas.

Als u de muis en handschrift wilt inschakelen, stelt u de eigenschap InputDeviceTypes van de InkPresenter in op de combinatie van coreInputDeviceTypes-waarden die u wilt.

In het voorbeeld:

1. Open het bestand MainPage.xaml.cs.
2. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 3: Ondersteuning voor inkt met aanraken en muis').
3. Verwijder opmerkingen bij de volgende regels.

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

Voer de app opnieuw uit en u zult merken dat al uw vingerverf-op-een-computer-scherm dromen zijn waargemaakt!

Stap 4: Een inktwerkbalk toevoegen

De InkToolbar is een UWP-platformbesturingselement dat een aanpasbare en uitbreidbare verzameling knoppen biedt voor het activeren van inktgerelateerde functies.

Standaard bevat de InkToolbar een eenvoudige set knoppen waarmee gebruikers snel kunnen kiezen tussen een pen, een potlood, een markeerstift of een gum, die samen met een stencil (liniaal of stentractor) kunnen worden gebruikt. De pen-, potlood- en markeerstiftknoppen bieden elk ook een flyout voor het selecteren van inktkleur en pennenstreekgrootte.

Als u een standaard InkToolbar wilt toevoegen aan een tekenapp, plaatst u deze op dezelfde pagina als uw InkCanvas en koppelt u de twee besturingselementen.

In het voorbeeld

1. Open het bestand MainPage.xaml.
2. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 4: een inktwerkbalk toevoegen --'>).
3. Verwijder opmerkingen bij de volgende regels.

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

Voer de app nu opnieuw uit om de InkToolbar te zien en een aantal van de hulpprogramma's uit te proberen.

Uitdaging: Een aangepaste knop toevoegen

Hier volgt een voorbeeld van een aangepaste InkToolbar (vanuit Sketchpad in de Windows Ink-werkruimte).

Zie Een InkToolbar toevoegen aan een handschrift-app in Windows voor meer informatie over het aanpassen van een InkToolbar.

Stap 5: Ondersteuning voor handschriftherkenning

Nu u in uw app kunt schrijven en tekenen, gaan we iets nuttigs doen met deze krabbels.

In deze stap gebruiken we de functies voor handschriftherkenning van Windows Ink om te proberen te ontcijferen wat u hebt geschreven.

In het voorbeeld:

1. Open het bestand MainPage.xaml.
2. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 5: Ondersteuning voor handschriftherkenning --'>).
3. Verwijder opmerkingen bij de volgende regels.

    <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. Open het bestand MainPage.xaml.cs.
5. Zoek de code die is gemarkeerd met de titel van deze stap ('Stap 5: Ondersteuning voor handschriftherkenning').
6. Verwijder opmerkingen bij de volgende regels.

• Dit zijn de globale variabelen die vereist zijn voor deze stap.

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

• Dit is de handler voor de knop Tekst herkennen , waar we de herkenningsverwerking uitvoeren.

    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. Voer de app opnieuw uit, schrijf iets en klik vervolgens op de knop Tekst herkennen
8. De resultaten van de herkenning worden naast de knop weergegeven

Uitdaging 1: Internationale erkenning

Windows Ink ondersteunt tekstherkenning voor veel van de talen die door Windows worden ondersteund. Elk taalpakket bevat een engine voor handschriftherkenning die kan worden geïnstalleerd met het taalpakket.

Richt u op een specifieke taal door een query uit te voeren op de geïnstalleerde handschriftherkenningsengines.

Zie Windows Ink-pennenstreken herkennen als tekst voor meer informatie over internationale handschriftherkenning.

Uitdaging 2: Dynamische herkenning

Voor deze zelfstudie moeten we een knop indrukken om herkenning te initiëren. U kunt ook dynamische herkenning uitvoeren met behulp van een eenvoudige tijdsfunctie.

Zie Windows Ink-pennenstreken herkennen als tekst voor meer informatie over dynamische herkenning.

Stap 6: Shapes herkennen

Oké, nu kunt u uw handgeschreven notities omzetten in iets beter leesbaars. Maar hoe zit het met die bevende, gecaffeïneerde krabbels van je Ochtend Flowcharters Anonieme vergadering?

Met inktanalyse kan uw app ook een set kernvormen identificeren, waaronder:

• Circle
• Diamant
• Tekening
• Ellips
• GelijkzijdigeDriehoek
• Zeshoek
• GelijkbenigeDriehoek
• Parallellogram
• Pentagon
• Vierhoek
• Rechthoek
• RightTriangle
• Square
• Trapezium
• Triangle

In deze stap gebruiken we de shapeherkenningsfuncties van Windows Ink om te proberen uw doodles op te schonen.

In dit voorbeeld proberen we geen pennenstreken opnieuw te tekenen (hoewel dat mogelijk is). In plaats daarvan voegen we een standaardcanvas toe onder de InkCanvas, waar we equivalente Ellips- of Polygon-objecten tekenen die zijn afgeleid van de oorspronkelijke inkt. Vervolgens verwijderen we de bijbehorende pennenstreken.

In het voorbeeld:

1. Het bestand MainPage.xaml openen
2. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 6: Shapes herkennen --'>)
3. Verwijder opmerkingen bij deze regel.

   <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. Het MainPage.xaml.cs-bestand openen
5. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 6: Shapes herkennen')
6. Verwijder opmerkingen bij deze regels:

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

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

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

7. Voer de app uit, teken enkele shapes en klik op de knop Shape herkennen

Hier volgt een voorbeeld van een elementair stroomdiagram van een digitaal servet.

Dit is hetzelfde stroomdiagram na shapeherkenning.

Stap 7: Inkt opslaan en laden

Dus, je bent klaar met schetsen en je bent tevreden met wat je ziet, maar je denkt dat je later misschien een paar dingen wilt aanpassen? U kunt uw pennenstreken opslaan in een ISF-bestand (Ink Serialized Format) en deze laden om te bewerken wanneer de inspiratie optreedt.

Het ISF-bestand is een eenvoudige GIF-afbeelding met aanvullende metagegevens die de eigenschappen en het gedrag van inktstreken beschrijven. Apps die niet zijn ingeschakeld voor inkt, kunnen de extra metagegevens negeren en nog steeds de eenvoudige GIF-afbeelding laden (inclusief transparantie van de alfakanaalachtergrond).

In deze stap koppelen we de knoppen Opslaan en Laden naast de inktwerkbalk.

In het voorbeeld:

1. Open het bestand MainPage.xaml.
2. Zoek de code die is gemarkeerd met de titel van deze stap ('<-- stap 7: Inkt opslaan en laden --'>).
3. Verwijder opmerkingen bij de volgende regels.

    <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. Open het bestand MainPage.xaml.cs.
5. Zoek de code die is gemarkeerd met de titel van deze stap ('// Stap 7: Inkt opslaan en laden').
6. Verwijder opmerkingen bij de volgende regels.

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

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

7. Voer de app uit en teken iets.
8. Selecteer de knop Opslaan en sla de tekening op.
9. Wis de inkt of start de app opnieuw op.
10. Selecteer de knop Laden en open het inktbestand dat u zojuist hebt opgeslagen.

Uitdaging: Het Klembord gebruiken om pennenstreken te kopiëren en plakken

Windows-inkt ondersteunt ook het kopiëren en plakken van inktstreken naar en van het klembord.

Zie Windows Ink-strookgegevens opslaan en ophalen voor meer informatie over het gebruik van het Klembord.

Samenvatting

Gefeliciteerd, u hebt de zelfstudie Ondersteuning voor inkt in uw Windows-app voltooid! We hebben u de basiscode laten zien die is vereist voor het ondersteunen van inkt in uw Windows-apps en hoe u een aantal uitgebreidere gebruikerservaringen kunt bieden die worden ondersteund door het Windows Ink-platform.

Verwante artikelen

• Pen-interacties en Windows Ink in Windows-apps

Samples

• Voorbeeld van inktanalyse (basis) (C#)
• Voorbeeld van handschriftherkenning in inkt (C#)
• Pennenstreken opslaan en laden vanuit een ISF-bestand (Ink Serialized Format)
• Pennenstreken vanaf het klembord opslaan en laden
• Voorbeeld van de locatie en oriëntatie van de inktwerkbalk (basis)
• Voorbeeld van locatie en oriëntatie van de inktwerkbalk (dynamisch)
• Eenvoudig inktvoorbeeld (C#/C++)
• Complex inktvoorbeeld (C++)
• Inktvoorbeeld (JavaScript)
• Zelfstudie Aan de slag: Inkt in uw Windows-app ondersteunen
• Voorbeeld van kleurboek
• Voorbeeld van gezinsnotities