Guida per sviluppatori di interazioni tramite tocco

Progettare l'app con le aspettative che il tocco sarà il metodo di input principale degli utenti. Se usi controlli WinUI, il supporto per touchpad, mouse e penna/stilo non richiede alcuna programmazione aggiuntiva, perché le app WinUI lo forniscono gratuitamente.

Tenere tuttavia presente che un'interfaccia utente ottimizzata per il tocco non è sempre superiore a un'interfaccia utente tradizionale. Entrambi offrono vantaggi e svantaggi unici per specifiche tecnologie e applicazioni. Nel passaggio a un'interfaccia utente touch-first è importante comprendere le differenze principali tra tocco, touchpad, penna/stilo, mouse e input da tastiera.

API importanti: Windows.UI.Xaml.Input, Windows.UI.Core, Windows.Devices.Input

Molti dispositivi presentano schermi multi-touch che supportano l'uso di una o più dita (o contatti di tocco) come input. I contatti di tocco, e il loro movimento, vengono interpretati come movimenti di tocco e manipolazioni per supportare diverse interazioni dell'utente.

L'app di Windows include diversi meccanismi per la gestione degli input tattili, che consente di creare un'esperienza coinvolgente che gli utenti possono esplorare con sicurezza. Qui copriamo le basi dell'uso dell'input touch in un'app di Windows.

Le interazioni tramite tocco richiedono tre elementi:

  • Uno schermo sensibile al tocco.
  • Il contatto diretto di una o più dita sul display (o la vicinanza a esso, se il display è dotato di sensori di prossimità e supporta il rilevamento hover).
  • Movimento dei contatti di touch (o loro assenza, in base a una soglia temporale).

I dati di input forniti dal sensore di tocco possono essere:

  • Interpretati come movimento fisico per la manipolazione diretta di uno o più elementi dell'interfaccia utente, ad esempio panoramica, rotazione, ridimensionamento o spostamento. Al contrario, l'interazione con un elemento tramite il relativo properties window, finestra di dialogo o altri inviti dell'interfaccia utente è considerata manipolazione indiretta.
  • Riconosciuti come metodi di input alternativo, ad esempio mouse o penna.
  • Utilizzati per integrare o modificare aspetti di altri metodi di input, ad esempio l'effetto di sbavatura di un tratto di inchiostro tracciato con una penna.

L'input tocco comporta in genere la manipolazione diretta di un elemento sullo schermo. L'elemento risponde immediatamente a qualsiasi contatto al tocco all'interno della sua area di test e reagisce in modo appropriato a qualsiasi movimento successivo dei contatti, inclusa la rimozione.

I movimenti di tocco personalizzati e le interazioni devono essere progettati con attenzione. Dovrebbero essere intuitivi, reattivi e individuabili e consentire agli utenti di esplorare l'app in tutta sicurezza.

Assicurarsi che le funzionalità dell'app siano esposte in modo coerente in ogni tipo di dispositivo di input supportato. Se necessario, usare una modalità di input indiretto, ad esempio l'input di testo per le interazioni tramite tastiera o le funzioni dell'interfaccia utente per il mouse e la penna.

Tenere presente che i dispositivi di input tradizionali (ad esempio mouse e tastiera) sono familiari e accattivanti per molti utenti. Possono offrire velocità, precisione e feedback tattile che un controllo touch non è in grado di offrire.

Fornire esperienze di interazione uniche e distintive per tutti i dispositivi di input permetterà di supportare la gamma più ampia di funzionalità e preferenze, rivolgersi al pubblico più ampio possibile e attirare più clienti verso la propria app.

Confrontare i requisiti di interazione tramite tocco

La tabella seguente illustra alcune delle differenze tra i dispositivi di input da considerare quando si progettano app di Windows ottimizzate per il tocco.

Fattore Interazioni tramite tocco mouse, tastiera, interazioni con penna o stilo Touchpad
Precisione L'area di contatto di un dito è maggiore di una singola coordinata x-y, il che aumenta le probabilità di attivazioni impreviste dei comandi. Il mouse e la penna forniscono una coordinata x-y precisa. Lo stesso accade per il mouse.
La forma dell'area di contatto cambia durante il movimento. I movimenti del mouse e i tratti di penna o stilo forniscono precise coordinate x-y. Lo stato attivo della tastiera è esplicito. Lo stesso accade per il mouse.
Non c'è alcun cursore del mouse per facilitare l'indicazione della destinazione. Il cursore del mouse, il cursore della penna/stilo e il focus attivo della tastiera sono tutti utili per il targeting. Lo stesso accade per il mouse.
Anatomia umana I movimenti delle dita sono imprecisi, perché eseguire un movimento lineare con una o più dita è difficile. Ciò è dovuto alla curvatura delle articolazioni della mano e al numero di articolazioni coinvolte nel movimento. È più facile eseguire un movimento di linea retta con il mouse o la penna/stilo perché la mano che li controlla si sposta per una distanza fisica minore di quella corrispondente del cursore sullo schermo. Lo stesso accade per il mouse.
Alcune aree sulla superficie touch di un display possono essere difficili da raggiungere a causa della posizione delle dita e dell'impugnatura dell'utente sul dispositivo. Il mouse e la penna/stilo possono raggiungere qualsiasi parte dello schermo, mentre ogni controllo deve essere accessibile dalla tastiera attraverso l'ordine di tabulazione. La postura e la presa delle dita possono essere un problema.
Gli oggetti possono essere nascosti da una o più dita o dalla mano dell'utente. Questa situazione è nota come occlusione. I dispositivi di input indiretti non causano occlusione. Lo stesso accade per il mouse.
Stato dell'oggetto Il tocco utilizza un modello a due stati: la superficie di tocco di un dispositivo di visualizzazione è premuta (attivata) o non premuta (disattivata). Non esiste alcuno stato di passaggio del mouse che può attivare un feedback visivo aggiuntivo. Un mouse, una penna/stilo e una tastiera tutti espongono un modello a tre stati: su (disattivato), giù (attivato) e sospensione (messa a fuoco).
Passare il mouse consente agli utenti di esplorare e apprendere tramite i suggerimenti associati agli elementi dell'interfaccia utente. Gli effetti di hover e focus possono indicare quali oggetti sono interattivi e aiutare a migliorare la mira.		 Lo stesso accade per il mouse.
Interazione ricca Supporta il multitocco: più punti di contatto su una superficie tattile. Supporta un singolo punto di input. Lo stesso accade per il touch.
Supporta la manipolazione diretta degli oggetti tramite movimenti quali tocco, trascinamento, scorrimento, avvicinamento delle dita e rotazione. Nessun supporto per la manipolazione diretta poiché mouse, penna/stilo e tastiera sono dispositivi di input indiretti. Lo stesso accade per il mouse.

Annotazioni

L'input indiretto gode del vantaggio di oltre 25 anni di perfezionamento. Funzionalità come i suggerimenti attivati al passaggio del cursore sono state progettate per facilitare l'esplorazione dell'interfaccia utente in modo specifico per touchpad, mouse, stilo e input da tastiera. Le funzionalità dell'interfaccia utente come questa sono state ri-progettate per l'esperienza avanzata offerta dall'input basato sul tocco, senza compromettere l'esperienza utente per gli altri dispositivi.

Usare il feedback touch

Il feedback visivo appropriato durante le interazioni con l'app consente agli utenti di riconoscere, apprendere e adattare il modo in cui le interazioni vengono interpretate sia dall'app che dalla piattaforma Windows. Il feedback visivo può indicare interazioni riuscite, riferire lo stato del sistema, migliorare il senso del controllo, ridurre gli errori, aiutare gli utenti a comprendere il sistema e il dispositivo di input e incoraggiare l'interazione.

Il feedback visivo è fondamentale quando l'utente si basa sull'input basato sul tocco per le attività che richiedono precisione sulla base della posizione. Visualizzare commenti e suggerimenti ogni volta che viene rilevato l'input basato sul tocco, per aiutare l'utente a comprendere le regole di destinazione personalizzate definite dall'app e dai relativi controlli.

Targeting

Il targeting è ottimizzato tramite:

  • Dimensioni degli obiettivi del tocco

    Linee guida chiare per le dimensioni assicurano che le applicazioni forniscano un'interfaccia utente confortevole che contiene oggetti e controlli facili e sicuri da usare come destinazione.

  • Geometria dell'area di contatto

    L'intera area di contatto del dito determina l'oggetto di destinazione più probabile.

  • Scrubbing

    Gli elementi all'interno di un gruppo sono facilmente reindirizzati trascinando il dito da un elemento all'altro (ad esempio, pulsanti radio). L'elemento attuale viene attivato quando il tocco viene rilasciato.

  • Oscillazione

    Gli elementi densamente affollati (ad esempio, i collegamenti ipertestuali) sono facilmente puntati nuovamente premendo il dito verso il basso e, senza scorrere, oscillandolo avanti e indietro sugli elementi. A causa dell'occlusione, l'elemento corrente viene identificato tramite un tooltip o la barra di stato e viene attivato quando il tocco viene rilasciato.

Accuratezza

Progettare per interazioni imprecise utilizzando:

  • Punti di ancoraggio che possono semplificare l'arresto in posizioni desiderate quando gli utenti interagiscono con il contenuto.
  • "Guide direzionali" che possono essere utili per la panoramica verticale o orizzontale, anche quando la mano si muove seguendo un leggero arco. Per ulteriori informazioni, vedere Linee guida per il movimento panoramico.

Occlusione

L'occlusione delle dita e della mano viene evitata tramite:

  • Dimensioni e posizionamento dell'interfaccia utente

    Rendere gli elementi dell'interfaccia utente abbastanza grandi in modo che non possano essere completamente coperti da un'area di contatto della punta del dito.

    Posizionare i menu e i popup sopra l'area di contatto, quando possibile.

  • Tooltips

    Mostrare suggerimenti quando un utente mantiene il contatto con il dito su un oggetto. Ciò è utile per descrivere la funzionalità degli oggetti. L'utente può trascinare via il polpastrello dall'oggetto per evitare di richiamare la descrizione comando.

    Per oggetti di piccole dimensioni, spostare i tooltip in modo che non siano coperti dall'area di contatto della punta del dito. Questo è utile per l'indicazione della destinazione.

  • Maniglie per la precisione

    Dove è necessaria la precisione (ad esempio, la selezione del testo), fornire maniglie di selezione posizionate in modo decentrato per migliorare l'accuratezza. Per altre informazioni, vedere Guidelines per la selezione di testo e immagini (app Windows Runtime).

Temporizzazione

Evitare modifiche alle modalità temporizzate a favore della manipolazione diretta. La manipolazione diretta simula la gestione fisica diretta in tempo reale di un oggetto. L'oggetto risponde quando le dita vengono spostate.

Un'interazione temporizzata, invece, si verifica dopo un'interazione tramite tocco. Le interazioni a tempo dipendono in genere da soglie invisibili, ad esempio tempo, distanza o velocità per determinare quale comando eseguire. Le interazioni a tempo non offrono alcun feedback visivo finché il sistema non esegue l'azione.

La manipolazione diretta offre numerosi vantaggi nelle interazioni temporali:

  • il feedback visivo immediato durante le interazioni rende gli utenti più coinvolti, sicuri e consci del controllo.
  • Le manipolazioni dirette rendono più sicuro esplorare un sistema perché sono reversibili. Gli utenti possono facilmente eseguire le proprie azioni in modo logico e intuitivo.
  • Le interazioni che influiscono direttamente sugli oggetti e simulano interazioni reali sono più intuitive, individuabili e memorizzabili. Non si basano su interazioni oscure o astratte.
  • Le interazioni a tempo possono essere difficili da eseguire, perché gli utenti devono raggiungere soglie arbitrarie e invisibili.

Inoltre, si consiglia vivamente di fare in modo che:

  • Le manipolazioni non dovrebbero essere distinte in base al numero di dita utilizzate.
  • Le interazioni supportino manipolazioni composte. Ad esempio, avvicinare le dita per zoomare mentre si muovono per panoramare.
  • Le interazioni non siano distinte in base al tempo. La stessa interazione deve avere lo stesso risultato indipendentemente dal tempo impiegato per eseguirla. Le attivazioni basate sul tempo introducono ritardi obbligatori per gli utenti e vanno a discapito sia della natura immersiva della manipolazione diretta che della percezione della velocità di risposta del sistema.

    Annotazioni

    Un'eccezione a questo è il caso in cui si usano interazioni temporali specifiche per facilitare l'apprendimento e l'esplorazione (ad esempio, premere e tenere premuto).

  • Descrizioni appropriate e segnali visivi hanno un fantastico effetto sull'uso di interazioni avanzate.

Visualizzazioni dell'app

Modificare l'esperienza di interazione dell'utente tramite le impostazioni di panoramica/scorrimento e zoom delle visualizzazioni dell'app. Una visualizzazione app determina il modo in cui un utente accede e modifica l'app e il relativo contenuto. Le visualizzazioni forniscono anche comportamenti quali inerzia, rimbalzo del limite del contenuto e punti di ancoraggio.

Le impostazioni di panoramica e scorrimento del controllo ScrollViewer determinano il modo in cui gli utenti si spostano all'interno di una singola visualizzazione, quando il contenuto della visualizzazione non rientra nel riquadro di visualizzazione. Una singola visualizzazione, ad esempio, può essere una pagina di una rivista o di un libro, la struttura di cartelle di un computer, una raccolta di documenti o un album fotografico.

Le impostazioni di zoom si applicano sia allo zoom ottico (supportato dal controllo ScrollViewer) che al controllo Zoom semantico. Lo zoom semantico è una tecnica ottimizzata per il tocco per la presentazione e l'esplorazione di grandi set di dati o contenuti correlati all'interno di una singola visualizzazione. Funziona usando due modalità distinte di classificazione o livelli di zoom. È analogo alla panoramica e allo scorrimento all'interno di una singola visualizzazione. La panoramica e lo scorrimento possono essere usati insieme allo zoom semantico.

Usare le visualizzazioni e gli eventi dell'app per modificare i comportamenti di panoramica/scorrimento e zoom. Ciò può offrire un'esperienza di interazione più fluida rispetto a quanto sia possibile tramite la gestione di eventi puntatore e gestuali.

Per ulteriori informazioni sulle visualizzazioni delle app, vedere Controlli, layout e testo.

Interazioni touch personalizzate

Se si implementa il supporto per le interazioni, tenere presente che gli utenti si aspettano un'esperienza intuitiva che coinvolge l'interazione diretta con gli elementi dell'interfaccia utente nell'app. È consigliabile modellare le interazioni personalizzate nelle librerie di controllo della piattaforma per mantenere tutti gli aspetti coerenti e individuabili. I controlli in queste librerie offrono l'esperienza di interazione utente completa, incluse interazioni standard, effetti fisici animati, feedback visivo e accessibilità. Creare interazioni personalizzate solo se esiste un requisito chiaro e ben definito e le interazioni di base non supportano lo scenario.

Importante

Windows 11 e versioni successive

Alcune interazioni tramite tocco a tre e quattro dita non funzioneranno più nelle app di Windows per impostazione predefinita.

Per impostazione predefinita, le interazioni tramite tocco a tre e quattro dita vengono ora utilizzate dal sistema per operazioni quali il cambio o la riduzione al minimo delle finestre e la modifica dei desktop virtuali. Poiché queste interazioni sono ora gestite a livello di sistema, la funzionalità dell'app potrebbe essere influenzata da questa modifica.

Per supportare interazioni di tre o quattro dita all'interno di un'applicazione, è stata introdotta una nuova impostazione utente che specifica se il sistema gestisce queste interazioni:

dispositivi Bluetooth & > Gesti > "Movimenti di tocco con tre e quattro dita"

Se impostato su "Attivato" (impostazione predefinita), il sistema gestirà tutte e tre le interazioni con quattro dita (le app non saranno in grado di supportarle).

Se impostato su "Off", le interazioni a tre e quattro dita possono essere supportate dalle app (non verranno gestite dal sistema).

Se l'applicazione deve supportare queste interazioni, è consigliabile informare gli utenti di questa impostazione e fornire un collegamento che avvia Le impostazioni di Windows alla pagina pertinente (ms-settings:devices-touch). Per altri dettagli, vedi Avviare le impostazioni di Windows.

Per fornire supporto personalizzato per il tocco, è possibile gestire diversi eventi UIElement. Questi eventi sono raggruppati in tre livelli di astrazione.

  • Gli eventi di movimenti statici vengono generati al completamento di un'interazione. Gli eventi gestuali includono Tapped, DoubleTapped, RightTapped e Holding.

    È possibile disabilitare gli eventi di movimento su elementi specifici impostando IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled e IsHoldingEnabled a falso.

  • Gli eventi puntatore, ad esempio PointerPressed e PointerMoved, forniscono dettagli di basso livello per ogni contatto di tipo tocco, inclusi il movimento del puntatore e la possibilità di fare distinzione tra gli eventi di pressione e rilascio.

    Un puntatore è un tipo di input generico con un meccanismo di evento unificato. Fornisce informazioni di base, ad esempio la posizione dello schermo, sulla fonte di input attiva, che può essere il tocco, il touchpad, il mouse o la penna.

  • Gli eventi di movimento di manipolazione, ad esempio ManipulationStarted, indicano un'interazione in corso. Iniziano quando l'utente tocca un elemento e continuano finché l'utente non solleva le sue dita o la manipolazione viene annullata.

    Gli eventi di manipolazione includono interazioni multitocco come zoom, panoramica o rotazione, e interazioni che usano dati di inerzia e velocità come il trascinamento. Le informazioni fornite dagli eventi di manipolazione non identificano la forma dell'interazione eseguita, ma includono dati come posizione, valore differenziale di traslazione e velocità. È possibile usare questi dati di tocco per determinare il tipo di interazione che deve essere eseguita.

Ecco il set di base di movimenti di tocco supportati da WinUI.

Nome TIPO Description
Tocco Movimento statico Un dito tocca lo schermo e si solleva.
Premi e tieni premuto Movimento statico Un dito tocca lo schermo e rimane sul posto.
Diapositiva Gesto di manipolazione Uno o più dita toccano lo schermo e si spostano nella stessa direzione.
Swipe Gesto di manipolazione Uno o più dita toccano lo schermo e spostano una breve distanza nella stessa direzione.
Ruota Gesto di manipolazione Due o più dita toccano lo schermo e si spostano seguendo un movimento ad arco in senso orario o antiorario.
Avvicinamento delle dita Gesto di manipolazione Due o più dita toccano lo schermo e si avvicinano.
Estendi Gesto di manipolazione Due o più dita toccano lo schermo e si allontanano.

Eventi di movimento

Per informazioni dettagliate sui singoli controlli, vedere Elenco controlli.

Eventi puntatore

Gli eventi puntatore vengono attivati da diverse origini di input attive, tra cui tocco, touchpad, penna e mouse (sostituiscono gli eventi tradizionali del mouse).

Gli eventi puntatore si basano su un singolo punto di input (dito, punta della penna, cursore del mouse) e non supportano interazioni basate sulla velocità.

Di seguito è riportato un elenco di eventi puntatore e il relativo argomento evento correlato.

Evento o classe Description
PressioneDelPuntatore Si verifica quando un singolo dito tocca lo schermo.
Rilascio del Puntatore Si verifica quando lo stesso contatto tattile si solleva.
Puntatore spostato Si verifica quando il puntatore viene trascinato sullo schermo.
Puntatore immesso Si verifica quando un puntatore entra nell'area di test di impatto di un elemento.
PuntatoreUscito Si verifica quando un puntatore esce dall'area di test di impatto di un elemento.
PuntatoreAnnullato Si verifica quando un contatto di tipo tocco viene perso in modo anomalo.
PointerCaptureLost Si verifica quando un'acquisizione del puntatore viene ottenuta da un altro elemento.
PointerWheelChanged Si verifica quando il valore delta di una rotellina del mouse cambia e quando sul touchpad viene eseguito un movimento di pizzicamento.
PointerRoutedEventArgs Fornisce dati per tutti gli eventi del puntatore.

Nell'esempio seguente viene illustrato come usare gli eventi PointerPressed, PointerReleased e PointerExited per gestire un'interazione di tipo tocco su un oggetto Rettangolo.

Prima di tutto, viene creato un oggetto Rettangolo denominato touchRectangle in XAML (Extensible Application Markup Language).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Vengono quindi specificati i listener per gli eventi PointerPressed, PointerReleased e PointerExited.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Infine, il gestore eventi PointerPressed aumenta Altezza e Larghezza del rettangolo, mentre i gestori degli eventi PointerReleased e PointerExited impostano di nuovo Altezza e Larghezza sui valori iniziali.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Eventi di manipolazione

Usare eventi di manipolazione nell'app se è necessario supportare interazioni con più dita o interazioni che richiedono dati sulla velocità.

È possibile usare gli eventi di manipolazione per rilevare interazioni, ad esempio trascinamento, zoom e pressione.

Annotazioni

Il touchpad non genera eventi di manipolazione. Invece, verranno generati eventi puntatore per l'input del touchpad.

Di seguito è riportato un elenco degli eventi di manipolazione e degli argomenti relativi agli eventi.

Evento o classe Description
Evento ManipulationStarting Si verifica quando viene creato per la prima volta il processore di manipolazione.
Evento ManipulationStarted Si verifica quando un dispositivo di input inizia una manipolazione su UIElement.
Evento ManipulationDelta Si verifica quando il dispositivo di input cambia posizione durante una manipolazione.
Evento ManipulationInertiaStarting Si verifica quando il dispositivo di input perde il contatto con l'oggetto UIElement durante una manipolazione e inizia l'inerzia.
Evento ManipulationCompleted Si verifica quando una manipolazione e l'inerzia su UIElement sono completate.
ManipulationStartingRoutedEventArgs Specifica i dati per l'evento ManipulationStarting.
ManipulationStartedRoutedEventArgs Specifica i dati per l'evento ManipulationStarted.
ManipulationDeltaRoutedEventArgs Specifica i dati per l'evento ManipulationDelta.
ManipulationInertiaStartingRoutedEventArgs Specifica i dati per l'evento ManipulationInertiaStarting.
VelocitàDiManipolazione Descrive la velocità con cui si verificano le manipolazioni.
ManipulationCompletedRoutedEventArgs Specifica i dati per l'evento ManipulationCompleted.

Un movimento è costituito da una serie di eventi di manipolazione. Ogni movimento inizia con un evento ManipulationStarted, ad esempio quando un utente tocca lo schermo.

Successivamente, vengono generati uno o più eventi ManipulationDelta. Ad esempio, se si tocca lo schermo e quindi si trascina il dito sullo schermo. Infine, viene generato un evento ManipulationCompleted al termine dell'interazione.

Annotazioni

Se non si dispone di un monitor touch-screen, è possibile testare il codice dell'evento di manipolazione nel simulatore usando un mouse e un'interfaccia della rotellina del mouse.

Nell'esempio seguente viene illustrato come usare gli eventi ManipulationDelta per gestire un'interazione con scorrimento in un oggetto Rettangolo e spostarlo sullo schermo.

Prima di tutto, viene creato un oggetto Rettangolo denominato touchRectangle in XAML con Altezza e Larghezza pari a 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Viene quindi creato un elemento TranslateTransform globale denominato dragTranslation per la traduzione dell'oggetto Rettangolo. Sull'oggetto Rettangolo viene specificato un listener di eventi ManipulationDelta e dragTranslation viene aggiunto a RenderTransform del Rettangolo.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

Infine, nel gestore eventi ManipulationDelta, la posizione del Rettangolo viene aggiornata usando TranslateTransform nella proprietà Delta.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Eventi indirizzati

Tutti gli eventi del puntatore, gli eventi di movimento e gli eventi di manipolazione qui indicati vengono implementati come eventi indirizzati. Ciò significa che l'evento può essere gestito potenzialmente da oggetti diversi da quello che originariamente ha generato l'evento. I genitori successivi in un albero di oggetti, ad esempio i contenitori padre di un oggetto UIElement o la Pagina radice dell'app, possono scegliere di gestire questi eventi anche se l'elemento originale non lo fa. Per contro, qualsiasi oggetto che gestisce l'evento può contrassegnarlo in modo che non raggiunga più alcun elemento padre. Per ulteriori informazioni sul concetto di evento indirizzato e sul modo in cui influisce sulla modalità di scrittura dei gestori per gli eventi indirizzati, vedere Panoramica degli eventi e degli eventi indirizzati.

Importante

Se è necessario gestire gli eventi del puntatore per un UIElement in una visualizzazione scorrevole (ad esempio ScrollViewer o ListView), è necessario disabilitare in modo esplicito il supporto per gli eventi di manipolazione sull'elemento nella vista chiamando UIElement.CancelDirectmanipulation(). Per riabilitare gli eventi di manipolazione nella vista chiamare UIElement.TryStartDirectManipulation().

Procedure rischiose e procedure consigliate

  • Progettare applicazioni con interazione tramite tocco come metodo di input previsto principale.
  • Fornire feedback visivo per le interazioni di tutti i tipi (tocco, penna, stilo, mouse e così via)
  • Ottimizzare il targeting regolando la dimensione bersaglio del tocco, la geometria del contatto, lo scrubbing e il bilanciamento.
  • Ottimizzare l'accuratezza tramite l'uso dei punti di ancoraggio e delle "guide direzionali".
  • Fornire descrizioni comandi e handle per migliorare l'accuratezza del tocco per gli elementi UI posizionati in modo ravvicinato.
  • Non usare le interazioni a tempo ogni volta che possibile (esempio di uso appropriato: pressione prolungata).
  • Quando possibile, non usare il numero di dita usate per distinguere la manipolazione.

Samples

Esempi di archivio

  • Last updated on