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:
- [FACOLTATIVO] Una penna digitale e un computer con un display che supporta l'input dalla penna digitale.
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:
- Seleziona il pulsante Clona o scarica verde
- Se si dispone di un account GitHub, è possibile clonare il repository nel computer locale scegliendo Apri in Visual Studio
- 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:
Aprire il progetto di esempio in Visual Studio.
Impostare l'elenco a discesa Piattaforme soluzione su una selezione non-Arm.
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.
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:
- Aprire il file MainPage.xaml.cs.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 2: Usare InkCanvas per supportare l'input penna di base").
- 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;
- Aprire il file MainPage.xaml.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 2: Input penna di base con InkCanvas -->").
- 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.
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:
- Aprire il file MainPage.xaml.cs.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 3: Supporto dell'input penna con tocco e mouse").
- 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
- Aprire il file MainPage.xaml.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 4: Aggiungere una barra degli strumenti input penna -->").
- 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.
Verifica: Aggiungere un pulsante personalizzato
|
|
Ecco un esempio di InkToolbar personalizzato (da Sketchpad nell'area di lavoro Windows Ink).
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:
- Aprire il menu Start e selezionare Impostazioni.
- Nella schermata Impostazioni, selezionare Dispositivi>Penna & Windows Ink.
- Selezionare Conoscere la mia grafia per aprire la finestra di dialogo Personalizzazione della grafia.
Nell'esempio:
- Aprire il file MainPage.xaml.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 5: Supporto del riconoscimento della grafia -->").
- 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" />
- Aprire il file MainPage.xaml.cs.
- Trovare il codice contrassegnato con il titolo di questo passaggio (" Passaggio 5: Supporto del riconoscimento della grafia").
- 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();
}
}
- Eseguire di nuovo l'app, scrivere qualcosa, quindi fare clic sul pulsante Riconosci testo
- 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:
- Aprire il file MainPage.xaml
- Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 6: Riconoscere le forme -->")
- 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" />
- Aprire il file MainPage.xaml.cs
- Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 6: Riconoscere le forme")
- 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)
{
...
}
- 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:
- Aprire il file MainPage.xaml.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("<-- Passaggio 7: Salvataggio e caricamento dell'input penna -->").
- 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"/>
- Aprire il file MainPage.xaml.cs.
- Trovare il codice contrassegnato con il titolo di questo passaggio ("// Passaggio 7: Salvare e caricare l'input penna").
- Rimuovere i commenti dalle seguenti righe.
private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
{
...
}
private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
{
...
}
- Eseguire l'app e disegnare qualcosa.
- Selezionare il pulsante Salva e salvare il disegno.
- Cancellare l'input penna o riavviare l'app.
- 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.
Articoli correlati
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
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per