Viewport e contenuto

La manipolazione diretta usa viewport, contenuti e contatti per descrivere gli elementi interattivi dell'interfaccia utente.

• Configurazione di un viewport
• Punti di ancoraggio e limiti
• Offset del punto di ancoraggio e scenari RTL
• Comportamenti
• Sistema di coordinate
• Trasformazioni
• Stato del riquadro di visualizzazione
• Argomenti correlati

Un riquadro di visualizzazione è un'area all'interno di una finestra che può ricevere ed elaborare l'input dalle interazioni dell'utente. Il riquadro di visualizzazione rappresenta l'area del contenuto che può essere visualizzata dall'utente finale in un determinato momento (detta anche clip di contenuto). Il viewport ha diverse funzioni:

• Gestisce lo stato di interazione (ad esempio, quando il contenuto è pronto per essere manipolato, quando il contenuto è in fase di manipolazione, quando il contenuto è in animazione inerzia) e esegue il mapping dell'input alle trasformazioni di output.
• Contiene contenuto che si sposta in risposta all'interazione dell'utente. Potrebbe trattarsi di un elemento div HTML (scorrimento), di un elenco in grado di panoramica (la schermata start Windows 8) o del menu a comparsa per un controllo di selezione.

Viene creato un viewport chiamando CreateViewport. È possibile creare più viewport in una singola finestra per produrre un'esperienza avanzata dell'interfaccia utente.

Il contenuto rappresenta l'elemento che viene trasformato in risposta a un'interazione. In altre parole, il contenuto è ciò che si sposta o ridimensiona quando l'utente esegue la panoramica o le dita di avvicinamento delle dita. Esistono due tipi di contenuto:

• Il contenuto principale è il singolo elemento intrinseco all'interno di un viewport che risponde alle manipolazioni di input e all'inerzia. Il contenuto primario viene creato contemporaneamente al viewport e non può essere aggiunto o rimosso da un viewport. È possibile personalizzare il comportamento del contenuto primario usando punti di ancoraggio (descritti più avanti).
• Il contenuto secondario viene spostato rispetto al movimento del contenuto primario. Il contenuto secondario viene creato separatamente dal viewport e può essere aggiunto o rimosso da un viewport. Tutte le trasformazioni di contenuto secondario vengono calcolate in base alla trasformazione del contenuto primario. È possibile applicare regole specifiche per modificare il modo in cui la trasformazione viene calcolata in base allo scopo previsto dell'elemento, identificato dal relativo CLSID durante la creazione.

In questo diagramma che mostra prima e dopo una panoramica è stato usato un singolo contatto per la panoramica del contenuto primario. Anche se l'utente non interagisce direttamente con l'indicatore di panoramica (contenuto secondario), il contenuto secondario viene spostato mentre il contenuto primario viene panoramicato. In questo modo vengono forniti segnali visivi per quanto tempo l'utente ha eseguito la panoramica.

Configurazione di un viewport

Dopo aver creato il viewport. configurarne il comportamento usando una configurazione di interazione. La configurazione di interazione specifica quali manipolazioni, ad esempio la panoramica, sono supportate.

La panoramica modifica la posizione del contenuto lungo l'asse orizzontale o verticale o entrambi come panoramica utente. Quando si configura la traduzione su entrambi gli assi, il contenuto si sposta liberamente in qualsiasi direzione.

Per vincolare il movimento del contenuto, configurare le guide, in genere sull'asse orizzontale e verticale. Se l'interazione di un utente si trova principalmente lungo un singolo asse (rappresentato dalle aree blu nel diagramma successivo), la panoramica viene guidata e il contenuto si sposta solo lungo l'asse delle guide. Se l'utente ha eseguito la panoramica ed è attualmente sottoposto a railing ed esegue una seconda panoramica mentre il contenuto è in inerzia, la nuova panoramica continua a essere sottoposto a railing.

Esempio: un riquadro di visualizzazione è configurato per la panoramica orizzontale e verticale. Nel primo fotogramma il contatto scende. Nel secondo, viene avviata una panoramica verticale e il contatto è bloccato sulla guida verticale. Infine, una volta che la panoramica viene guidata, viene usato solo il componente verticale di una panoramica diagonale per spostare il contenuto.

Se l'utente esegue la panoramica diagonalmente in modo che non si trovino nelle aree di rilevamento delle guide (aree bianche), la panoramica viene annullata e il contenuto verrà spostato liberamente in entrambi gli assi.

Lo zoom modifica il fattore di scala del contenuto man mano che un utente avvicina o si estende. Il punto intorno al quale viene ridimensionato il contenuto (chiamato centro zoom) si trova al centro dei contatti. Se è stato impostato l'allineamento orizzontale o verticale, il centro zoom cambia per mantenere l'allineamento.

È possibile eseguire l'override di questo comportamento specificando il centro di sblocco, che imposta il centro dello zoom al centro dei contatti.

L'inerzia è la decelerazione graduale di una manipolazione, sia della panoramica che dello zoom, dopo che tutti i contatti sono stati sollevati (nel caso del tocco) o dopo l'input da tastiera/mouse (ad esempio facendo clic su una barra di scorrimento o premendo i tasti di direzione). Quando un utente modifica il contenuto, la manipolazione non viene arrestata immediatamente dopo che il contatto è stato sollevato. Il contenuto continua invece nella direzione e nella velocità correnti, rallentando gradualmente fino a un arresto.

Punti di ancoraggio e limiti

Un'animazione inerzia viene eseguita dopo la fine della manipolazione in seguito alla rimozione di un dito dallo schermo (nel caso del tocco) o a seguito di un'azione da tastiera/mouse (ad esempio tasti di direzione, pagina su/giù, scorrimento della rotellina del mouse e così via).

Esistono due informazioni che definiscono l'animazione inerziale:

• Il punto rimanente dell'animazione, ovvero la posizione finale del componente di trasformazione specifico.
• La durata dell'animazione, la curva, la velocità: sono determinate dal tipo del punto di riposo.

L'animazione inerzia è interessata da punti di ancoraggio e limiti. I limiti specificano i punti di riposo massimi e minimi per il contenuto. Se il contenuto raggiunge un limite durante l'inerzia, verrà applicata un'animazione limite. I punti di ancoraggio vengono definiti nel contenuto primario per modificare il punto di riposo e modificare la curva di animazione inerzia stessa.

È possibile definire punti di ancoraggio con SetSnapInterval quando il contenuto viene spaziato regolarmente o con SetSnapPoints quando il contenuto è spaziato in modo non uniforme. Ecco un esempio di punti di ancoraggio:

Nel diagramma è presente una parte di contenuto con una serie di blocchi di contenuto secondario: notizie in un'app di tipo lettore di notizie o elementi in una visualizzazione griglia. Lo scopo è bloccare il bordo sinistro di un elemento sul bordo sinistro del riquadro di visualizzazione dopo che l'inerzia è terminata.

Esistono due gruppi di tipi di punti di ancoraggio:

• Facoltativo e obbligatorio: un punto di ancoraggio facoltativo blocca l'animazione inerzia solo se il punto di riposo inerzia è vicino al punto di ancoraggio. Un punto di ancoraggio obbligatorio blocca sempre l'animazione inerzia su un punto di ancoraggio specificato.
• Singolo e multiplo: un tipo di punto di ancoraggio multiplo consente al contenuto di spostarsi oltre molti punti di ancoraggio prima di arrivare a un punto di ancoraggio vicino al punto di riposo naturale. Un singolo tipo di punto di ancoraggio sceglie il punto di ancoraggio più vicino successivo come punto di riposo per l'animazione inerzia.

Il diagramma successivo illustra come i tipi di punti di ancoraggio modificano la posizione rimanente dell'animazione di inerzia.

In questo diagramma il punto iniziale di inerzia viene etichettato come "Start" e la posizione finale dell'inerzia naturale in assenza di punti di ancoraggio come "Fine". Le linee verticali contrassegnano i vari punti di ancoraggio. Questa tabella descrive come ogni tipo di punto di ancoraggio influisce sulla posizione finale dell'animazione.

Tipo di punto	Descrizione
Single obbligatorio	Il punto di ancoraggio P1 viene scelto perché è il primo punto di ancoraggio nella direzione dell'inerzia
Multiplo obbligatorio	Il punto di ancoraggio P2 viene scelto perché è più vicino al punto finale nella direzione dell'inerzia
Singolo facoltativo	Il punto di ancoraggio P1 viene scelto perché è il primo punto di ancoraggio rilevato durante l'inerzia
Multiplo facoltativo	Il punto di ancoraggio P2 viene scelto perché si trova vicino al punto finale naturale

Offset del punto di ancoraggio e scenari RTL

Applicare l'offset del punto di ancoraggio e il sistema di coordinate usando l'API SetSnapCoordinate , che sfalsa tutti i punti di ancoraggio o gli intervalli di ancoraggio usando l'offset/sistema di coordinate specificato.

Il sistema di coordinate è molto utile negli scenari RTL, in cui si vogliono descrivere i punti di ancoraggio dal bordo sinistro del contenuto nella direzione inversa. Nel diagramma precedente , SetSnapCoordinate viene usato con il flag DIRECTMANIPULATION_MOTION_TRANSLATEX e DIRECTMANIPULATION_COORDINATE_MIRRORED , che sfalsa automaticamente i punti di ancoraggio dal bordo sinistro del contenuto e li fornisce in ordine da destra a sinistra: S1 è a 0px, S2 è a 50px (e così via). Qualsiasi offset impostato tramite SetSnapCoordinate scosterà ulteriormente dal bordo sinistro del contenuto automaticamente, incluso il fattore di scala corretto.

Si userà quasi sempre SetSnapCoordinate con il parametro di origine impostato per evitare di impostare punti di ancoraggio all'esterno dell'area del contenuto.

Ad esempio, se il riquadro di visualizzazione è 200x200 e il contenuto è 1000x200 e l'interfaccia è RTL, il riquadro di visualizzazione avrà il bordo sinistro su x=800 quando il viewport viene presentato per la prima volta. Chiamare SetSnapCoordinate con SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) per specificare che i punti di ancoraggio devono essere calcolati da destra a sinistra a partire dal bordo DESTRO del contenuto.

Comportamenti

Un comportamento è un oggetto che può essere collegato a un viewport per modificare il modo in cui la manipolazione diretta gestisce la trasformazione di output del contenuto primario o secondario di un viewport. Un oggetto comportamento può influire su uno o più aspetti di una manipolazione, ad esempio la modalità di elaborazione dell'input o la modalità di applicazione dell'animazione inerzia. Ad esempio, un comportamento di registrazione automatica influisce sull'animazione inerziale eseguendo un'animazione di scorrimento verso un'estremità del contenuto primario. Un comportamento di configurazione tra diapositive influisce sull'elaborazione dell'input di manipolazione diretta che rileva quando viene eseguita un'azione tra diapositive.

Un oggetto comportamento viene creato chiamando CreateBehavior, aggiunto a un viewport e quindi il relativo comportamento viene configurato in modo asincrono. La rimozione del comportamento dal riquadro di visualizzazione ne rimuove gli effetti.

Sistema di coordinate

Esistono tre principali sistemi di coordinate utilizzati dalla manipolazione diretta:

• Sistema di coordinate client: descrive il rettangolo della finestra client. Le unità sono in pixel.
• Sistema di coordinate viewport: descrive il rettangolo di un'area all'interno del client in grado di elaborare l'input. Le unità sono definite dall'applicazione (tramite SetViewportRect).
• Sistema di coordinate del contenuto: descrive il rettangolo o le dimensioni del contenuto primario. Le unità sono definite dall'applicazione (tramite SetContentRect).

Per tutti e tre i sistemi, le coordinate vengono definite in relazione alla rispettiva origine superiore sinistra e sono positive aumentando a destra e verso il basso. Questi sistemi di coordinate sono illustrati nel diagramma successivo. Solo la sezione del contenuto all'interno del rettangolo del riquadro di visualizzazione può essere visualizzata o modificata dall'utente finale.

Trasformazioni

La manipolazione diretta gestisce diverse trasformazioni che contribuiscono all'output complessivo visualizzato.

• Trasformazione del contenuto : la trasformazione iniziale calcolata dalla manipolazione diretta in base a una manipolazione o inerzia. Acquisisce gli effetti di punti di ancoraggio, ringhiera, overpan predefinito (manipolazione), overbounce predefinito (inerzia) e animazioni ZoomToRect.
• Trasformazione di output: trasformazione dell'oggetto visivo o dell'output finale. È la combinazione sia del contenuto che delle trasformazioni di sincronizzazione.
• Trasformazione di sincronizzazione : calcolata quando si chiama SyncContentTransform. Consente alla manipolazione diretta di applicare una nuova trasformazione del contenuto fornita dall'applicazione mantenendo al tempo stesso la trasformazione di output esistente.
• Visualizzazione trasformazione : applicata dall'applicazione come parte della post-elaborazione. Per altri dettagli, vedere SyncDisplayTransform .

Poiché la trasformazione di output è progettata per compensare visivamente una superficie sullo schermo, la manipolazione diretta esegue l'arrotondamento necessario sui componenti della trasformazione di output in modo che il testo e altri contenuti vengano sempre sottoposti a rendering/compositi in corrispondenza di un limite di pixel integrale. Il meccanismo di arrotondamento dipende da più fattori, tra cui la velocità del movimento e la presenza di Desktop remoto. Il meccanismo di arrotondamento per il contenuto secondario corrisponde a quello del contenuto primario, tenendo conto della differenza nel movimento tra i due. I client di GetOutputTransform non devono dipendere dal meccanismo di arrotondamento esatto della trasformazione di output, perché vari fattori influiscono su di esso.

Nota

Ciò significa che i componenti di una trasformazione del contenuto potrebbero non essere integrali e possono contenere offset di sub-pixel. I client che usano la manipolazione diretta sono invitati a usare GetOutputTransform per calcolare la trasformazione visiva corretta da applicare al contenuto quando si usa la modalità di aggiornamento manuale. Quando si usa la modalità di aggiornamento automatico usando il programma di composizione incorporato, la manipolazione diretta applica automaticamente questa trasformazione per conto del client. Questa trasformazione viene generata dalla manipolazione diretta per garantire risultati visivamente piacevoli durante la composizione dell'output visivo.

Stato del riquadro di visualizzazione

Quando l'input viene elaborato, il viewport gestisce lo stato di interazione e il mapping dell'input alle trasformazioni di output. Controllare lo stato di interazione del viewport chiamando GetStatus.

• Compilazione: il riquadro di visualizzazione viene creato e non è ancora in grado di elaborare l'input. Per elaborare l'input, chiamare IDirectManipulationViewport::Enable. Se Enable non viene chiamato, il riquadro di visualizzazione passa allo stato Disabilitato.

  Nota

  Si tratta dello stato iniziale dell'interazione.

• Abilitato: il riquadro di visualizzazione è pronto per elaborare l'input. Quando si verifica un contatto (viene chiamato SetContact ) e viene rilevata una manipolazione, il riquadro di visualizzazione passa a In esecuzione.

• In esecuzione: il riquadro di visualizzazione sta elaborando l'input e aggiornando il contenuto. Quando il contatto viene sollevato, il riquadro di visualizzazione passa a Inerzia, se configurato.

• Inerzia: il contenuto si sta spostando in un'animazione inerziale. Al termine dell'inerzia, il riquadro di visualizzazione passerà a Pronto. Se la disabilitazione automatica è stata impostata nel riquadro di visualizzazione, passerà da Inerzia a Pronto e quindi su Disabilitato.

• Pronto: il riquadro di visualizzazione è pronto per elaborare l'input. Quando si verifica un contatto (viene chiamato SetContact ) e viene rilevata una manipolazione, il riquadro di visualizzazione passa a In esecuzione.

• Sospeso: il riquadro di visualizzazione può diventare Sospeso quando il relativo input è stato promosso a un elemento padre nella catena SetContact . Questo argomento viene illustrato in modo più dettagliato in Più viewport: hit testing e gerarchia del viewport.

• Disabilitato: il riquadro di visualizzazione non elabora l'input o effettua callback. Un riquadro di visualizzazione può essere disabilitato da vari stati chiamando IDirectManipulationViewport::D isable. Se la disabilitazione automatica è stata impostata nel riquadro di visualizzazione, passerà automaticamente a Disabilitato dopo l'elaborazione di una modifica. Per riabilitare un viewport disabilitato, chiamare IDirectManipulationViewport::Enable.

Argomenti correlati

Più viewport: hit testing e gerarchia del riquadro di visualizzazione, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform