Condividi tramite

Esercitazione: supportare l'input penna nell'app Windows

  • Articolo

Immagine dell'eroe della penna di Surface.
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

Nota

Anche se Windows Ink può supportare il disegno con un mouse e un tocco (vedere il passaggio 3 di questa esercitazione) per un'esperienza Windows Ink ottimale, è consigliabile avere 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
    Clonazione del repository.
  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)

Importante

La maggior parte del codice nell'esempio è impostata come commento. Scorrendo ciascun passaggio, verrà chiesto di rimuovere il commento da varie sezioni del codice. In Visual Studio è sufficiente evidenziare le righe di codice e premere CTRL-K e quindi CTRL-U.

Componenti della piattaforma Windows Ink

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

Componente Descrizione
InkCanvas Un controllo della piattaforma dell'interfaccia utente XAML che, per impostazione predefinita, riceve e visualizza tutto l'input da una penna come tratto input penna o come tratto di cancellazione.
InkPresenter Oggetto code-behind, di cui è stato creato un'istanza con un controllo InkCanvas (esposto attraverso la proprietà InkCanvas.InkPresenter). Questo oggetto fornisce tutte la funzionalità di input penna predefinita esposta da InkCanvas, insieme a un set completo di API per una personalizzazione aggiuntiva.
InkToolbar Un controllo della piattaforma dell'interfaccia utente XAML contenente una raccolta personalizzabile ed estendibile di pulsanti che attivano funzionalità correlate all'input penna in un InkCanvas associato.
IInkD2DRenderer
Questa funzionalità non viene trattata qui. Per altre informazioni, vedere l'esempio di input penna complesso.		 Abilita il rendering di tratti input penna sul contesto del dispositivo Direct2D designato di un'app Universal Windows anziché il controllo InkCanvas predefinito.

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. Pulsante Compila progetto di Visual Studio.

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

Screenshot dell'app vuota.

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.

Nota

Un controllo InkCanvas ha le proprietà Height e Width predefinite su zero, a meno che non sia l'elemento figlio di un elemento che ridimensiona automaticamente i suoi elementi figlio.

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;
  1. Aprire il file MainPage.xaml.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 2: Input penna di base con InkCanvas -->").
  3. 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.

Screenshot dell'app Di esempio di input penna di base evidenziata in questo argomento.

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.

Nota

L'input penna standard (punta della penna o punta/pulsante gomma) non viene modificato con un invito hardware secondario, ad esempio un pulsante della penna, un pulsante destro del mouse o un meccanismo simile.

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.

Nota

Quando si specificano tipi di dispositivo di input, è necessario indicare il supporto per ogni tipo di input specifico (inclusa la penna), perché questa proprietà esegue l'override dell'impostazione InkCanvas predefinita.

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>

Nota

Per mantenere ordinati il più possibile il codice e l'interfaccia utente, si usa un layout griglia di base e si dichiara InkToolbar dopo InkCanvas in una riga della griglia. Se la si dichiara prima di InkCanvas, si esegue prima il rendering di InkToolbar, sotto l'area di disegno e inaccessibile all'utente.

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

Screenshot dell'app Di esempio di input penna di base evidenziata in questo argomento con l'oggetto InkToolbar predefinito.

Verifica: Aggiungere un pulsante personalizzato

Ecco un esempio di InkToolbar personalizzato (da Sketchpad nell'area di lavoro Windows Ink).

Screenshot della barra degli strumenti input penna da Sketchpad nell'area di lavoro Input penna.

Per altri dettagli sulla personalizzazione di InkToolbar, vedere Aggiungere un controllo InkToolbar a un'app per l'input penna Windows.

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.

Nota

Il riconoscimento della grafia può essere migliorato attraverso le impostazioni Penna & Windows Ink:

  1. Aprire il menu Start e selezionare Impostazioni.
  2. Nella schermata Impostazioni, selezionare Dispositivi>Penna & Windows Ink. Screenshot della pagina Impostazioni Penna e Input penna di Windows.
  3. Selezionare Conoscere la mia grafia per aprire la finestra di dialogo Personalizzazione della grafia. Screenshot della finestra di dialogo Riconoscimento grafia personalizzazione.

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" />
  1. Aprire il file MainPage.xaml.cs.
  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.
  • 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();
        }
    }
  1. Eseguire di nuovo l'app, scrivere qualcosa, quindi fare clic sul pulsante Riconosci testo
  2. I risultati del riconoscimento vengono visualizzati accanto al pulsante

Verifica 1: Riconoscimento internazionale

Windows Ink supporta il riconoscimento del testo per molte delle lingue supportate da Windows. Ogni Language Pack include un motore di riconoscimento della grafia che può essere installato con il Language Pack.

Specificare una lingua specifica eseguendo una query sui motori di riconoscimento della grafia installati.

Per altre informazioni sul riconoscimento della grafia internazionale, vedere Riconoscere i tratti Windows Ink come testo.

Verifica 2: Riconoscimento dinamico

Per questa esercitazione è necessario che venga premuto un pulsante per avviare il riconoscimento. È anche possibile eseguire il riconoscimento dinamico usando una funzione di timing di base.

Per altre informazioni sul riconoscimento dinamico, vedere Riconoscere i tratti Windows Ink come testo.

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" />
  1. Aprire il file MainPage.xaml.cs
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 6: Riconoscere le forme")
  3. 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)
    {
        ...
    }
  1. 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.

Screenshot di un diagramma di flusso rudimentale da un tovagliolo digitale.

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

Screenshot del diagramma di flusso dopo che l'utente seleziona Riconosci forma.

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).

Nota

La specifica ISF (Ink Serialized Format) può essere scaricata dall'Area download Microsoft.

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"/>
  1. Aprire il file MainPage.xaml.cs.
  2. Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 7: Salvare e caricare l'input penna").
  3. Rimuovere i commenti dalle seguenti righe.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Eseguire l'app e disegnare qualcosa.
  2. Selezionare il pulsante Salva e salvare il disegno.
  3. Cancellare l'input penna o riavviare l'app.
  4. Selezionare il pulsante Carica e aprire il file input penna appena salvato.

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

Windows ink supporta anche le operazioni di copia e incolla di tratti input penna da e negli Appunti.

Per altri dettagli sull'uso degli Appunti con l'input penna, vedere Archiviare e recuperare dati dei tratti Windows Ink.

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.

Esempi