Esercitazione: supportare l'input penna nell'app Windows

Surface Pen (disponibile per l'acquisto in Microsoft Store).

Questa esercitazione spiega come creare un'app Windows di base che supporta la scrittura e il disegno con Windows Ink. Si usano frammenti di codice tratti da un'app di esempio, scaricabile da GitHub (vedere Codice di esempio), per dimostrare le varie funzionalità e le API Windows Ink associate (vedere Componenti della piattagorma Windows Ink) descritte in ogni passaggio.

Si ci concentrerà su:

• Aggiunta del supporto input penna di base
• Aggiunta di una barra degli strumenti input penna
• Supporto del riconoscimento della grafia
• Supporto del riconoscimento delle forme di base
• Salvataggio e caricamento dell'input penna

Per altri dettagli sull'implementazione di queste funzionalità, vedere Interazioni tramite penna e Windows Ink nelle app Windows.

Introduzione

Con Windows Ink, è possibile fornire ai clienti l'equivalente digitale di quasi qualsiasi esperienza di penna e carta immaginabile, da note rapide, scritte a mano e annotazioni alle demo della lavagna e dai disegni di architettura e ingegneria ai capolavori personali.

Prerequisiti

• Un computer (o una macchina virtuale) con la versione corrente di Windows 10 o Windows 11.
• Visual Studio 2019 e RS2 SDK o versioni successive
• Windows 10 SDK (10.0.15063.0)
• A seconda della configurazione, potrebbe essere necessario installare il pacchetto NuGet Microsoft.NETCore.UniversalWindowsPlatform e abilitare la modalità sviluppatore nelle impostazioni di sistema (Impostazioni-> Aggiorna & Sicurezza -> Per gli sviluppatori -> Usa le funzionalità per gli sviluppatori).
• Se non si ha familiarità con lo sviluppo di app Windows con Visual Studio, consultare questi argomenti prima di iniziare questa esercitazione:
  • Installare gli strumenti per Windows App SDK
  • Creare un'app "Hello, world" (XAML)
• [FACOLTATIVO] Una penna digitale e un computer con un display che supporta l'input dalla penna digitale.

Codice di esempio

In questa esercitazione si usa un'app input penna di esempio per dimostrare i concetti e le funzionalità illustrati.

Scaricare questo esempio di Visual Studio e il codice sorgente da GitHub nell'esempio windows-appsample-get-started-ink:

1. Seleziona il pulsante Clona o scarica verde
   
2. Se si dispone di un account GitHub, è possibile clonare il repository nel computer locale scegliendo Apri in Visual Studio
3. Se non si dispone di un account GitHub o si vuole semplicemente una copia locale del progetto, scegliere Scarica ZIP (sarà necessario verificare regolarmente la disponibilità degli aggiornamenti)

Componenti della piattaforma Windows Ink

Questi oggetti forniscono la maggior parte dell'esperienza di input penna per le app Windows.

Passaggio 1: Eseguire l'esempio

Dopo aver scaricato l'app di esempio RadialController, verificare che venga eseguita:

1. Aprire il progetto di esempio in Visual Studio.

2. Impostare l'elenco a discesa Piattaforme soluzione su una selezione non-Arm.

3. Premere F5 per compilare, distribuire ed eseguire.

   Nota

   In alternativa, è possibile selezionare Debug>Avvia debug oppure selezionare il pulsante Macchina locale mostrato qui.

Viene visualizzata la finestra dell'app e, dopo aver visualizzato una schermata iniziale per alcuni secondi, verrà visualizzata questa schermata.

Ora si dispone dell'app Windows di base che si userà nella parte restante di questa esercitazione. Nei passaggi seguenti si aggiungerà la funzionalità input penna.

Passaggio 2: Usare InkCanvas per supportare l'input penna di base

Probabilmente si è già notato che l'app, nel formato iniziale, non permette di disegnare nulla con la penna (anche se è possibile usare la penna come dispositivo puntatore standard per interagire con l'app).

Risolvere questo problema in questo passaggio.

Per aggiungere funzionalità di input penna di base, posizionare semplicemente un controllo InkCanvas nella pagina appropriata nell'app.

Nell'esempio:

1. Aprire il file MainPage.xaml.cs.
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 2: Usare InkCanvas per supportare l'input penna di base").
3. Rimuovere i commenti dalle seguenti righe. Questi riferimenti sono necessari per la funzionalità usata nei passaggi successivi.

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

4. Aprire il file MainPage.xaml.
5. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 2: Input penna di base con InkCanvas -->").
6. Rimuovere i commenti dalla seguente riga.

    <InkCanvas x:Name="inkCanvas" />

Ecco fatto!

A questo punto, eseguire di nuovo l'app. Andare avanti e scarabocchiare, scrivere il proprio nome o realizzare il proprio autoritratto.

Passaggio 3: Supportare l'input penna con tocco e mouse

Si noterà che, per impostazione predefinita, è supportato solo l'input penna. Se si cerca di scrivere o disegnare con il dito, il mouse o il touchpad, si avrà una delusione.

Per trasformare la faccia imbronciata, è necessario aggiungere una seconda riga di codice. Questa volta è nel code-behind per il file XAML in cui si è dichiarato InkCanvas.

In questo passaggio si introduce l'oggetto InkPresenter, che fornisce una gestione granulare dell'input, l'elaborazione e il rendering dell'input penna (standard e modificato) su InkCanvas.

Per abilitare l'input penna mouse e tocco, impostare la proprietà InputDeviceTypes di InkPresenter sulla combinazione di valori CoreInputDeviceTypes desiderati.

Nell'esempio:

1. Aprire il file MainPage.xaml.cs.
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 3: Supporto dell'input penna con tocco e mouse").
3. Rimuovere i commenti dalle seguenti righe.

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

Eseguire di nuovo l'app e si vedrà che tutti i desideri legati al disegno su uno schermod i computer sono stati esauditi.

Passaggio 4: Aggiungere una barra degli strumenti input penna

InkToolbar è un controllo della piattaforma UWP che fornisce una raccolta personalizzabile ed estendibile di pulsanti per l'attivazione di funzionalità correlate all'input penna.

Per impostazione predefinita, InkToolbar include un set di base di pulsanti che consentono agli utenti di selezionare rapidamente tra una penna, una matita, un evidenziatore o una gomma, ognuno dei quali può essere usato con uno stencil (righello o goniometro). I pulsanti penna, matita ed evidenziatore forniscono anche un riquadro a comparsa per la selezione del colore dell'input penna e delle dimensioni del tratto.

Per aggiungere un InkToolbar a un'app di input penna, posizionarlo sulla stessa pagina di InkCanvas e associare i due controlli.

Nell'esempio

1. Aprire il file MainPage.xaml.
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 4: Aggiungere una barra degli strumenti input penna -->").
3. Rimuovere i commenti dalle seguenti righe.

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

Eseguire di nuovo l'app per visualizzare InkToolbar e provare alcuni degli strumenti.

Verifica: Aggiungere un pulsante personalizzato

Passaggio 5: Supportare il riconoscimento della grafia

Ora che è possibile scrivere e disegnare nell'app, provare a fare qualcosa di utile con questi scarabocchi.

In questo passaggio si usano le funzionalità di riconoscimento della grafia di Windows Ink per provare a decifrare ciò che è stato scritto.

Nell'esempio:

1. Aprire il file MainPage.xaml.
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 5: Supporto del riconoscimento della grafia -->").
3. Rimuovere i commenti dalle seguenti righe.

    <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. Aprire il file MainPage.xaml.cs.
5. Trovare il codice contrassegnato con il titolo di questo passaggio (" Passaggio 5: Supporto del riconoscimento della grafia").
6. Rimuovere i commenti dalle seguenti righe.

• Queste sono le variabili globali necessarie per questo passaggio.

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

• Questo è il gestore per il pulsante Riconosci testo, dove si esegue l'elaborazione del riconoscimento.

    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. Eseguire di nuovo l'app, scrivere qualcosa, quindi fare clic sul pulsante Riconosci testo
8. I risultati del riconoscimento vengono visualizzati accanto al pulsante

Verifica 1: Riconoscimento internazionale

Verifica 2: Riconoscimento dinamico

Passaggio 6: Riconoscere le forme

Ora è possibile convertire le note scritte a mano in qualcosa di più leggibile. Ma cosa dire di quegli scarabocchi fatti durante la riunione mattutina con i diagrammi di flusso?

Usando l'analisi dell'input penna, l'app può anche riconoscere un set di forme di base, tra cui:

• Cerchio vuoto
• Rombo
• Disegno
• Ellisse
• EquilateralTriangle
• Hexagon
• IsoscelesTriangle
• Parallelogramma
• Pentagono
• Quadrilatero
• Rettangolo
• RightTriangle
• Square
• Trapezio
• Triangolo

In questo passaggio si usano le funzionalità di riconoscimento delle forme di Windows Ink per provare a far chiarezza con gli scarabocchi.

Per questo esempio, non si tenta di ridisegnare i tratti input penna (anche se possibile). Si aggiunge invece un'area di disegno standard sotto InkCanvas in cui si disegnano oggetti Ellipse o Polygon equivalenti derivati dall'input penna originale. Si eliminano quindi i tratti input penna corrispondenti.

Nell'esempio:

1. Aprire il file MainPage.xaml
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 6: Riconoscere le forme -->")
3. Rimuovere il commento da questa riga.

   <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. Aprire il file MainPage.xaml.cs
5. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 6: Riconoscere le forme")
6. Rimuovere il commento da queste righe:

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

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

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

7. Eseguire l'app, disegnare alcune forme e fare clic sul pulsante Riconosci forma

Ecco un esempio di diagramma di flusso rudimentale da un tovagliolo digitale.

Ecco lo stesso diagramma di flusso dopo il riconoscimento delle forme.

Passaggio 7: Salvare e caricare l'input penna

Gli scarabocchi sono finiti e i risultati sono buoni, ma si vuole apportare in seguito alcune modifiche? È possibile salvare i tratti input penna in un file ISF (Ink Serialized Format) e caricarlo per la modifica ogni volta che si ha un'ispirazione.

Il file ISF è un'immagine GIF di base che include metadati aggiuntivi che descrivono proprietà e comportamenti del tratto input penna. Le app che non sono abilitate per l'input penna possono ignorare i metadati aggiuntivi e caricare comunque l'immagine GIF di base (inclusa la trasparenza dello sfondo del canale alfa).

In questo passaggio, si agganciano i pulsanti Salva e Carica posti accanto alla barra degli strumenti input penna.

Nell'esempio:

1. Aprire il file MainPage.xaml.
2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 7: Salvataggio e caricamento dell'input penna -->").
3. Rimuovere i commenti dalle seguenti righe.

    <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. Aprire il file MainPage.xaml.cs.
5. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 7: Salvare e caricare l'input penna").
6. Rimuovere i commenti dalle seguenti righe.

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

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

7. Eseguire l'app e disegnare qualcosa.
8. Selezionare il pulsante Salva e salvare il disegno.
9. Cancellare l'input penna o riavviare l'app.
10. Selezionare il pulsante Carica e aprire il file input penna appena salvato.

Verifica: Usare gli Appunti per copiare e incollare i tratti input penna

Riepilogo

L'esercitazione Supportare l'input penna nell'app Windows. Si è mostrato il codice di base necessario per supportare l'input penna nelle app Windows e come fornire esperienze utente avanzate supportate dalla piattaforma Windows Ink.

Articoli correlati

• Interazioni tramite penna e Windows Ink nelle app di Windows

Esempi

• Esempio di analisi input penna (di base) (C#)
• Esempio di riconoscimento della grafia input penna (C#)
• Salvare e caricare tratti input penna da un file ISF (Ink Serialized Format)
• Salvare e caricare tratti input penna dagli Appunti
• Esempio di orientamento e posizione della barra degli strumenti dell'input penna (di base)
• Esempio di orientamento e posizione della barra degli strumenti dell'input penna (dinamico)
• Esempio di input penna semplice (C#/C++)
• Esempio di input penna complesso (C++)
• Esempio di input penna (JavaScript)
• Esercitazione introduttiva: supportare l'input penna nell'app Windows
• Esempio di album da colorare
• Esempio di note di famiglia