Esperienze di manipolazione personalizzate con InteractionTracker
In questo articolo viene illustrato come usare InteractionTracker per creare esperienze di manipolazione personalizzate.
Prerequisiti
In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:
Perché creare esperienze di manipolazione personalizzate?
Nella maggior parte dei casi, l'uso dei controlli di manipolazione predefiniti è sufficiente per creare esperienze dell'interfaccia utente. Ma cosa succede se si vogliono differenziare i controlli da quelli comunemente utilizzati? Cosa succede se si desidera creare un'esperienza specifica basata sull'input o un'interfaccia utente in cui un movimento di manipolazione tradizionale non è sufficiente? Questi casi sono perfetti per creare un'esperienza personalizzata. Consentono agli sviluppatori e ai progettisti di app di essere più creativi: offrono esperienze di movimento che distinguono il proprio marchio e il linguaggio di progettazione che li caratterizza. Da zero, si ha accesso al set corretto di blocchi predefiniti per personalizzare completamente un'esperienza di manipolazione, dal modo in cui il movimento deve rispondere al tatto o con le dita sollevate dallo schermo per agganciare punti e concatenare input.
Di seguito sono riportati alcuni esempi comuni di un'esperienza di manipolazione personalizzata:
- Aggiunta di un comportamento personalizzato di scorrimento, eliminazione/chiusura
- Effetti basati sull'input (la panoramica causa la sfocatura del contenuto)
- Controlli personalizzati con movimenti di manipolazione personalizzati (ListView personalizzato, ScrollViewer e così via)
Perché usare InteractionTracker?
InteractionTracker è stato introdotto nello spazio dei nomi Windows.UI.Composition.Interactions nella versione 10586 SDK. InteractionTracker consente di ottenere:
- Completa flessibilità: gli sviluppatori devono poter personalizzare ogni aspetto di un'esperienza di manipolazione, in particolare i movimenti esatti che si verificano durante o in risposta all'input. Quando si crea un'esperienza di manipolazione personalizzata con InteractionTracker, sono a disposizione tutti i controlli necessari.
- Prestazioni fluide: una delle sfide legate alle esperienze di manipolazione è nel fatto che le prestazioni dipendono dal thread dell'interfaccia utente. Ciò può influire negativamente su qualsiasi esperienza di manipolazione quando l'interfaccia utente è occupata. InteractionTracker è stato creato per utilizzare il nuovo motore di animazione che opera su un thread indipendente a 60 FPS, per dare un movimento uniforme.
Panoramica: InteractionTracker
Quando si creano esperienze di manipolazione personalizzate, si interagisce con due componenti principali. Vediamoli in dettaglio:
- InteractionTracker: l'oggetto principale che gestisce una macchina a stati le cui proprietà sono guidate dall'input dell'utente attivo o da aggiornamenti e animazioni dirette. Lo si dovrà collegare a un CompositionAnimation per creare il movimento di manipolazione personalizzato.
- VisualInteractionSource: oggetto complemento che definisce quando e in quali condizioni viene inviato l'input a InteractionTracker. Definisce sia CompositionVisual usato per hit testing che altre proprietà di configurazione di input.
Come macchina a stati, le proprietà di InteractionTracker possono essere guidate da uno dei seguenti elementi:
- Interazione diretta dell'utente: l'utente finale manipola direttamente all'interno dell'area di hit test di VisualInteractionSource
- Inerzia: dalla velocità programmatica o da un movimento dell'utente, le proprietà di InteractionTracker animano sotto una curva di inerzia
- CustomAnimation: un'animazione personalizzata destinata direttamente a una proprietà di InteractionTracker
InteractionTracker State Machine
Come accennato in precedenza, InteractionTracker è una macchina a stati con 4 stati, ciascuno dei quali può passare a uno degli altri quattro. Per altre informazioni su come InteractionTracker esegue la transizione tra questi stati, vedere la Documentazione della classe InteractionTracker.
| Stato | Descrizione |
|---|---|
| Idle | Nessun input attivo o animazioni |
| Interazione | Rilevato input utente attivo |
| Inerzia | Movimento attivo risultante dall'input attivo o dalla velocità programmatica |
| CustomAnimation | Movimento attivo risultante da un'animazione personalizzata |
In ognuno dei casi in cui lo stato di InteractionTracker cambia, viene generato un evento (o callback) che è possibile ascoltare. Per poter ascoltare questi eventi, è necessario implementare l'interfaccia IInteractionTrackerOwner e creare il relativo oggetto InteractionTracker con il metodo CreateWithOwner. Il diagramma seguente illustra anche quando vengono attivati i diversi eventi.
Uso di VisualInteractionSource
Per consentire a InteractionTracker di essere guidato da Input, è necessario connettersi a un oggetto VisualInteractionSource (VIS). Il VIS viene creato come oggetto complemento usando compositionVisual per definire:
- L'area di hit test che verrà rilevata dall'input e i movimenti dello spazio delle coordinate rilevate
- Le configurazioni di input che verranno rilevate e indirizzate, tra cui:
- Movimenti rilevabili: posizione X e Y (panoramica orizzontale e verticale), scala (avvicinamento delle dita)
- Inerzia
- Guide e concatenamento
- Modalità di reindirizzamento: quali dati di input vengono reindirizzati automaticamente a InteractionTracker
Nota
Poiché VisualInteractionSource viene creato in base alla posizione di hit test e allo spazio delle coordinate di un oggetto visivo, è consigliabile non usare un oggetto visivo che si troverà in movimento o che cambierà posizione.
Nota
È possibile usare più istanze di VisualInteractionSource con lo stesso InteractionTracker se sono presenti più aree di hit test. Tuttavia, il caso più comune consiste nell'usare un solo VIS.
VisualInteractionSource è anche responsabile della gestione dei dati di input da modalità diverse (tocco, PTP, penna) indirizzate a InteractionTracker. Questo comportamento è definito dalla proprietà ManipulationRedirectionMode. Per impostazione predefinita, tutti gli input del puntatore vengono inviati al thread dell'interfaccia utente e l'input precision touchpad passa a VisualInteractionSource e InteractionTracker.
Pertanto, se si desidera avere tocco e penna (Creators Update) per guidare una manipolazione tramite VisualInteractionSource e InteractionTracker, è necessario chiamare il metodo VisualInteractionSource.TryRedirectForManipulation. Nel breve frammento di codice seguente da un'app XAML, il metodo viene chiamato quando si verifica un evento con pressione tocco nella parte superiore della griglia UIElement:
private void root_PointerPressed(object sender, PointerRoutedEventArgs e)
{
if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
{
_source.TryRedirectForManipulation(e.GetCurrentPoint(root));
}
}
Collegamento con ExpressionAnimation
Quando si usa InteractionTracker per guidare un'esperienza di manipolazione, si interagisce principalmente con le proprietà Scale e Position. Analogamente ad altre proprietà CompositionObject, queste proprietà possono essere sia la destinazione che il riferimento in compositionAnimation, più comunemente ExpressionAnimation.
Per usare InteractionTracker all'interno di un'Expression, fare riferimento alla proprietà Position (oppure Scale) del tracker, come nell'esempio seguente. Poiché la proprietà di InteractionTracker viene modificata a causa di una delle condizioni descritte in precedenza, anche l'output dell'Expression cambia.
// With Strings
var opacityExp = _compositor.CreateExpressionAnimation("-tracker.Position");
opacityExp.SetReferenceParameter("tracker", _tracker);
// With ExpressionBuilder
var opacityExp = -_tracker.GetReference().Position;
Nota
Quando si fa riferimento alla posizione di InteractionTracker in un'Expression, è necessario negare il valore dell'Expression risultante per spostarsi nella direzione corretta. Ciò è dovuto al fatto che la progressione di InteractionTracker dall'origine su un grafico e consente di considerare la progressione di InteractionTracker nelle coordinate del "mondo reale", ad esempio la distanza dalla sua origine.
Operazioni preliminari
Per iniziare a usare InteractionTracker per creare esperienze di manipolazione personalizzate:
- Creare l'oggetto InteractionTracker usando InteractionTracker.Create o InteractionTracker.CreateWithOwner.
- Se si usa CreateWithOwner, assicurarsi di implementare l'interfaccia IInteractionTrackerOwner.
- Impostare la posizione Min e Max di InteractionTracker appena creata.
- Creare VisualInteractionSource con compositionVisual.
- Verificare che l'oggetto visivo passato abbia una dimensione diversa da zero. In caso contrario, non verrà sottoposto a hit test correttamente.
- Impostare le seguenti proprietà di VisualInteractionSource.
- VisualInteractionSourceRedirectionMode
- PositionXSourceMode, PositionYSourceMode, ScaleSourceMode
- Guide e concatenamento
- Aggiungere VisualInteractionSource a InteractionTracker usando InteractionTracker.InteractionSources.Add.
- Configurare TryRedirectForManipulation per quando viene rilevato l'input tocco e penna.
- Per XAML, questa operazione viene in genere eseguita sull'evento PointerPressed di UIElement.
- Creare una ExpressionAnimation che faccia riferimento alla posizione di InteractionTracker e indirizzi la proprietà di un CompositionObject.
Ecco un breve frammento di codice che mostra i punti dall'1 al 5 in azione:
private void InteractionTrackerSetup(Compositor compositor, Visual hitTestRoot)
{
// #1 Create InteractionTracker object
var tracker = InteractionTracker.Create(compositor);
// #2 Set Min and Max positions
tracker.MinPosition = new Vector3(-1000f);
tracker.MaxPosition = new Vector3(1000f);
// #3 Setup the VisualInteractionSource
var source = VisualInteractionSource.Create(hitTestRoot);
// #4 Set the properties for the VisualInteractionSource
source.ManipulationRedirectionMode =
VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
source.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
source.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
// #5 Add the VisualInteractionSource to InteractionTracker
tracker.InteractionSources.Add(source);
}
Per utilizzi più avanzati di InteractionTracker, vedere gli articoli seguenti: