Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Esistono due diversi controlli che semplificano il disegno nelle app di Windows: InkCanvas e InkToolbar.
Il controllo InkCanvas rende l'input della penna come tratto di inchiostro (usando le impostazioni predefinite per il colore e lo spessore) o tratto di cancellatura. Questo controllo è una sovrimpressione trasparente che non include alcuna interfaccia utente integrata per la modifica delle proprietà predefinite del tratto di inchiostro.
Annotazioni
InkCanvas può essere configurato per supportare funzionalità simili sia per l'input tramite mouse che per l'input tocco.
Poiché il controllo InkCanvas non include il supporto per la modifica delle impostazioni predefinite del tratto input penna, può essere associato a un controllo InkToolbar. InkToolbar contiene una raccolta personalizzabile ed estensibile di pulsanti che attivano funzionalità legate all'inchiostro in un InkCanvas associato.
Per impostazione predefinita, InkToolbar include pulsanti per disegnare, cancellare, evidenziare e visualizzare un righello. A seconda della caratteristica, altre impostazioni e comandi, ad esempio il colore dell'inchiostro, lo spessore del tratto, Cancella tutto l'inchiostro, vengono forniti in un menu a tendina.
Annotazioni
InkToolbar supporta l'input di penna e mouse e può essere configurato per riconoscere l'input tocco.
Questo è il controllo giusto?
Usa InkCanvas quando devi abilitare le funzionalità di inchiostro di base nella tua app senza fornire le impostazioni all'utente.
Di default, i tratti vengono resi come inchiostro quando si usa la punta della penna (una penna a sfera nera con uno spessore di 2 pixel) e come gomma quando si usa la punta della gomma. Se non è presente una punta di gomma, InkCanvas può essere configurato per elaborare l'input dalla punta della penna come tratto di cancellazione.
Associare InkCanvas a InkToolbar per fornire un'interfaccia utente per attivare le funzionalità di inchiostro e impostare le proprietà di base dell'inchiostro, come ad esempio dimensioni del tratto, colore e forma della punta della penna.
Annotazioni
Per una maggiore personalizzazione del rendering dei tratti di inchiostro in un controllo InkCanvas, utilizza l'oggetto sottostante InkPresenter.
Panoramica della toolbar Ink
Pulsanti integrati
InkToolbar include i pulsanti predefiniti seguenti:
Penne
- Penna a sfera - traccia un tratto solido e opaco con una punta circolare. La dimensione del tratto dipende dalla pressione della penna rilevata.
- Matita: disegna un tratto morbido, con trame e semitrasparente (utile per effetti ombreggiatura a più livelli) con una punta della penna circolare. Il colore del tratto (oscurità) dipende dalla pressione della penna rilevata.
- Evidenziatore: disegna un tratto semitrasparente con una punta di penna rettangolare.
È possibile personalizzare sia la tavolozza dei colori che gli attributi delle dimensioni (min, max, default) nel menu a tendina per ogni penna.
Tool
- Gomma, elimina qualsiasi tratto d'inchiostro toccato. Si noti che l'intero tratto di inchiostro viene eliminato, non solo la parte sotto il tratto di cancellazione.
Attiva/Disattiva
- Righello: mostra o nasconde il righello. Disegnando vicino al bordo del righello, il tratto di inchiostro viene agganciato al righello.
Anche se questa è la configurazione predefinita, hai il controllo completo sui pulsanti predefiniti inclusi in InkToolbar per la tua app.
Pulsanti personalizzati
InkToolbar è costituito da due gruppi distinti di tipi di pulsanti:
- Gruppo di pulsanti "strumento" contenenti i pulsanti predefiniti di disegno, cancellazione ed evidenziazione. Qui vengono aggiunti penne e strumenti personalizzati.
Annotazioni
La selezione delle funzionalità è mutualmente esclusiva.
- Gruppo di pulsanti di attivazione/disattivazione contenenti il pulsante del righello predefinito. Qui vengono aggiunti interruttori personalizzati.
Annotazioni
Le funzionalità non si escludono a vicenda e possono essere usate simultaneamente con altri strumenti attivi.
A seconda dell'applicazione e delle funzionalità di input penna necessarie, è possibile aggiungere uno dei pulsanti seguenti (associati alle funzionalità di input penna personalizzate) a InkToolbar:
- Una penna personalizzata è una penna per cui la tavolozza dei colori dell'inchiostro e le proprietà della punta della penna, come forma, rotazione e dimensione, sono definite dall'app host.
- Strumento personalizzato: uno strumento non penna, definito dall'applicazione host.
- Interruttore personalizzato: imposta lo stato di una funzionalità definita dall'app su attivato o disattivato. Quando è attivata, la funzionalità funziona insieme allo strumento attivo.
Annotazioni
Non è possibile modificare l'ordine di visualizzazione dei pulsanti predefiniti. L'ordine di visualizzazione predefinito è: penna, matita, evidenziatore, gomma e righello. Le penne personalizzate vengono aggiunte all'ultima penna predefinita, i pulsanti degli strumenti personalizzati vengono aggiunti tra l'ultimo pulsante della penna e il pulsante della gomma e i pulsanti di attivazione/disattivazione personalizzati vengono aggiunti dopo il pulsante del righello. I pulsanti personalizzati vengono aggiunti nell'ordine in cui sono specificati.
Anche se InkToolbar può essere un elemento di primo livello, viene generalmente esposto attraverso un comando o un pulsante "Inking". Si consiglia di utilizzare il glifo EE56 del tipo di carattere Segoe MLD2 Assets come icona di livello superiore.
Interazione con InkToolbar
Tutti i pulsanti predefiniti della penna e degli strumenti includono un menu a comparsa in cui è possibile impostare le proprietà dell'inchiostro e la forma e le dimensioni della punta. Sul pulsante viene visualizzato un "glifo di estensione" per indicare l'esistenza del riquadro a comparsa.
Il riquadro a comparsa viene visualizzato quando viene selezionato di nuovo il pulsante di uno strumento attivo. Quando si modifica il colore o la dimensione, il riquadro a comparsa viene chiuso automaticamente e l'inserimento penna può essere ripreso. Penne e strumenti personalizzati possono usare il menu a tendina predefinito o specificarne uno personalizzato.
La gomma include anche un riquadro a comparsa che fornisce il comando Cancella tutto l'inchiostro.
Per informazioni sulla personalizzazione e sull'estendibilità, vedere l'esempio SimpleInk.
Recommendations
- InkCanvas, e l'uso della penna in generale, si sperimenta al meglio tramite una penna attiva. Tuttavia, ti consigliamo di supportare l'input di inchiostro con mouse e tocco (inclusa la penna passiva) se richiesto dalla tua app.
- Usare un controllo InkToolbar con InkCanvas per fornire funzionalità e impostazioni di inchiostratura di base. Sia InkCanvas che InkToolbar possono essere personalizzati a livello di codice.
- L'uso dell'InkToolbar, e dell'input tramite penna in generale, si apprezza meglio con una penna attiva. Tuttavia, l'uso della scrittura digitale con mouse e touch può essere supportato se richiesto dalla tua app.
- Se supporti la scrittura con l'input tattile, raccomandiamo di usare l'icona ED5F del tipo di carattere Segoe MLD2 Assets per il pulsante di attivazione/disattivazione, con il tooltip "Scrittura con tocco".
- Se si fornisce la selezione del tratto, è consigliabile usare l'icona EF20 del tipo di carattere Segoe MLD2 Assets per il pulsante dello strumento, con la descrizione comando "strumento di selezione".
- Se si usano più di un InkCanvas, è consigliabile usare un singolo InkToolbar per gestire la scrittura con penna su più aree di disegno.
- Per ottenere prestazioni ottimali, è consigliabile modificare il riquadro a comparsa predefinito anziché crearne uno personalizzato per gli strumenti predefiniti e personalizzati.
Esempi
Microsoft Edge
Microsoft Edge usa InkCanvas e InkToolbar per le note Web.
Spazio di lavoro Windows Ink
InkCanvas e InkToolbar vengono usati anche per Cattura e annota nell'Area di lavoro di Windows Ink.
Creare un controllo InkCanvas e InkToolbar
- API UWP:classe InkCanvas, classe InkToolbar, classe InkPresenter, Windows.UI.Input.Inking
- Aprire l'app WinUI for UWP Gallery e vedere InkingControls in azione. L'app WinUI 2 Gallery include esempi interattivi della maggior parte dei controlli, delle caratteristiche e delle funzionalità di WinUI 2. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.
Aggiungere un InkCanvas alla tua app richiede solo una riga di markup:
<InkCanvas x:Name="myInkCanvas"/>
Annotazioni
Per informazioni dettagliate sulla personalizzazione di InkCanvas usando InkPresenter, vedi l'articolo Interazioni tramite penna e Windows Ink nelle app di Windows.
Il controllo InkToolbar deve essere utilizzato insieme a un controllo InkCanvas. Per incorporare un InkToolbar (con tutti gli strumenti predefiniti) nella tua app, è necessaria una riga di markup aggiuntiva.
<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>
Ciò visualizza il seguente InkToolbar:
Scaricare il codice di esempio
- Esempio SimpleInk - Illustra 8 scenari relativi alle funzionalità di estendibilità e personalizzazione dei controlli InkCanvas e InkToolbar. Ogni scenario fornisce linee guida di base sulle situazioni comuni di inchiostrazione e sulle implementazioni dei controlli.
- Esempio ComplexInk - Illustra scenari relativi alle funzionalità della penna più complessi.
- Esempio della Galleria WinUI per UWP - visualizza tutti i controlli XAML in un formato interattivo.
Articoli correlati
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
