Panoramica del livello visivo

Il livello visivo offre un'API a prestazioni elevate, in modalità mantenuta per grafica, effetti e animazioni ed è la base per tutte le interfacce utente in tutti i dispositivi Windows. Definisci l'interfaccia utente in modo dichiarativo e il livello visivo si basa sull'accelerazione hardware grafica per garantire che il rendering dei contenuti, degli effetti e delle animazioni venga eseguito in modo senza problemi indipendentemente dal thread dell'interfaccia utente dell'app.

I tipi in Microsoft.UI.Composition formano l'implementazione di Windows App SDK/WinUI 3 del livello visivo.

Evidenziazioni rilevanti:

• API WinRT familiari
• Progettato per interazioni e interfaccia utente più dinamiche
• Concetti allineati agli strumenti di progettazione
• Scalabilità lineare senza scogliere improvvise di prestazioni

Le app WinUI e Windows App SDK usano già il livello visivo tramite uno dei framework dell'interfaccia utente. È anche possibile sfruttare direttamente il livello visivo per il rendering personalizzato, gli effetti e le animazioni con un minimo sforzo.

Che cos'è nel livello visivo?

Le funzioni principali del livello visivo sono:

1. Contenuto: composizione leggera di contenuto disegnato personalizzato
2. Effetti: sistema di effetti dell'interfaccia utente in tempo reale i cui effetti possono essere animati, concatenati e personalizzati
3. Animazioni: animazioni espressive e indipendenti dal framework eseguite indipendentemente dal thread dell'interfaccia utente

Content

Il contenuto è ospitato, trasformato e reso disponibile per l'uso dal sistema di animazione ed effetti tramite elementi visivi. Alla base della gerarchia di classi si trova la classe Visual, un proxy leggero e adatto ai thread nel processo dell'applicazione per lo stato visivo nel compositor. Le sottoclassi di Visual includono ContainerVisual per consentire ai figli di creare alberi di oggetti visivi e SpriteVisual che contiene contenuto e può essere dipinto con colori a tinta unita, contenuto personalizzato o effetti visivi personalizzati. Insieme, questi tipi di oggetto visivo costituiscono la struttura ad albero visuale per l'interfaccia utente 2D e riportano i FrameworkElement XAML più visibili.

Per ulteriori informazioni, vedere la panoramica Composizione Visiva.

Effetti

Il sistema Effects nel livello visivo consente di applicare una catena di effetti di filtro e trasparenza a un oggetto Visivo o a un albero di oggetti visivi. Si tratta di un sistema di effetti dell'interfaccia utente, non da confondere con gli effetti di immagine e media. Gli effetti funzionano in combinazione con il sistema di animazione, consentendo agli utenti di ottenere animazioni uniformi e dinamiche delle proprietà Effect, sottoposte a rendering indipendente dal thread dell'interfaccia utente. Gli effetti nel livello visivo forniscono i blocchi predefiniti creativi che possono essere combinati e animati per costruire esperienze personalizzate e interattive.

Oltre alle catene di effetti animabili, il livello visivo supporta anche un modello di illuminazione che consente agli oggetti visivi di simulare le proprietà dei materiali rispondendo alle luci animabili. Gli oggetti visivi possono anche proiettare ombre. L'illuminazione e le ombre possono essere combinate per creare una percezione di profondità e realismo.

Per altre informazioni, vedere Panoramica degli effetti di composizione .

Animazioni

Il sistema di animazione a livello visivo consente di spostare gli oggetti visivi, animare gli effetti e guidare trasformazioni, clip e altre proprietà. Si tratta di un sistema indipendente dal framework che è stato progettato da zero tenendo presente le prestazioni. Viene eseguito in modo indipendente dal thread dell'interfaccia utente per garantire fluidità e scalabilità. Anche se consente di usare le animazioni con fotogrammi chiave familiari per guidare le modifiche delle proprietà nel tempo, consente anche di impostare relazioni matematiche tra proprietà diverse, incluso l'input dell'utente, consentendo di creare direttamente esperienze coreografate senza problemi.

Per altre informazioni, vedere la Panoramica delle animazioni di composizione.

Uso di XAML WinUI

Puoi accedere a un oggetto Visivo creato dal framework XAML, che supporta un FrameworkElement visibile, usando la classe ElementCompositionPreview in Microsoft.UI.Xaml.Hosting. Si noti che gli oggetti visivi creati automaticamente dal framework presentano alcuni limiti alla personalizzazione. Questo perché il framework gestisce offset, trasformazioni e cicli di vita. È tuttavia possibile creare oggetti visivi personalizzati e collegarli a un elemento WinUI esistente tramite ElementCompositionPreview oppure aggiungendoli a un contenitore esistenteVisual in un punto qualsiasi della struttura ad albero visuale.

Per altre informazioni, vedere panoramica sull'uso del livello visivo con XAML .

Lavorare con l'app desktop

È possibile usare il livello visivo per migliorare l'aspetto, l'aspetto e le funzionalità delle app desktop Win32 create con Windows App SDK, nonché le app desktop WPF, Windows Form e C++ Win32. È possibile eseguire la migrazione di isole di contenuto per usare il livello visivo e mantenere il resto dell'interfaccia utente nel framework esistente. Ciò significa che è possibile apportare aggiornamenti e miglioramenti significativi all'interfaccia utente dell'applicazione senza dover apportare modifiche complete alla codebase esistente.

Per altre informazioni, vedere Modernizzare le app desktop con il livello visivo.

Differenze rispetto alla versione UWP

Lo spazio dei nomi Microsoft.UI.Composition fornisce l'accesso alle funzionalità quasi identiche al livello visivo UWP (Windows.UI.Composition), negli scenari più usati. Esistono tuttavia eccezioni e differenze.

Ottenere un'istanza di Compositor

Nelle app desktop (un'app WinUI è un'app desktop), Window.Current è null. Non è quindi possibile recuperare un'istanza di Compositor da Window.Current.Compositor. Nelle app WinUI, è consigliabile chiamare ElementCompositionPreview.GetElementVisual(UIElement) per ottenere un Visual di composizione e recuperare il Compositor dalla proprietà Compositor del Visual. Nei casi in cui non si ha accesso a un oggetto UIElement (ad esempio, se si crea un oggetto CompositionBrush in una libreria di classi), è possibile chiamare CompositionTarget.GetCompositorForCurrentThread.

Contenuto esterno

Il compositore Microsoft.UI.Composition viene eseguito interamente all'interno di un'app Windows App SDK e ha accesso solo ai pixel disegnati. Ciò significa che qualsiasi contenuto esterno (contenuto che non è stato disegnato dal compositore) è sconosciuto al compositore, che crea determinate limitazioni.

Un esempio di contenuto esterno è MediaPlayerElement (Microsoft.UI.Xaml.Controls). Lo stack multimediale di Windows fornisce a XAML un handle di catena di scambio di media opaco. XAML fornisce tale handle al compositore, che a sua volta lo passa a Windows (tramite Windows.UI.Composition) da visualizzare. Poiché il compositore non può visualizzare alcun pixel nella catena di scambio dei media, non può comporre quella parte del rendering complessivo per la finestra. Assegna invece la catena di scambio dei media a Windows per eseguirne il rendering al di sotto del rendering del compositore, con un foro ritagliato dal rendering del compositore per consentire la visibilità della catena di scambio dei media sottostante.

In Windows App SDK/WinUI tutte le API seguenti creano contenuto esterno:

• MediaPlayerElement
• SwapChainPanel
• WebView2
• MicaBackdrop e DesktopAcrylicBackdrop, nonché i MicaController e DesktopAcrylicController sottostanti che utilizzano.

Il modello di gestione del contenuto esterno crea queste limitazioni:

• Non è possibile che il contenuto del compositore sia posizionato dietro il contenuto esterno. Ad esempio, non è possibile assegnare a WebView2 uno sfondo trasparente per visualizzare i pulsanti o le immagini XAML dietro di esso. Gli unici elementi che possono essere dietro il contenuto esterno sono altri contenuti esterni e lo sfondo della finestra. Per questo motivo, sconsigliamo o disabilitiamo la trasparenza per il contenuto esterno.
• Non è possibile avere un esempio di contenuto compositore da contenuto esterno. Ad esempio, AcrylicBrush non è in grado di campionare e sfuocare i pixel di un MediaPlayerElement. AcrylicBrush campionerà dall'immagine del compositore, che è nero trasparente per le aree di contenuto esterno. Analogamente, AcrylicBrush davanti a un MicaBackdrop o DesktopAcrylicBackdrop non riesce a visualizzare i colori che tali sfondi disegnano; mentre, il pennello sfocerà il nero trasparente.
• Un altro scenario è noto come invertimento della destinazione, che viene utilizzato nei controlli della casella di testo per invertire i pixel posizionati davanti al cursore di inserimento del testo. Il processo di inverting preleva in modo analogo campioni dalla superficie del compositore e sarà condizionato se la casella di testo non ha uno sfondo opaco disegnato dal compositore.
• Poiché WinUI SwapChainPanel crea contenuto esterno, non supporta la trasparenza. Né supporta l'applicazione di AcrylicBrush e altri effetti che usano un CompositionBackdropBrush davanti a esso.

Samples

Il progetto Esempi di Windows App SDK include un set completo di esempi di composizione che illustrano come usare le API Microsoft.UI.Composition per creare esperienze visive avanzate. Questi esempi riguardano un'ampia gamma di scenari, dal layout di base e dalle trasformazioni agli effetti avanzati, all'illuminazione, alle ombreggiature e alla gestione degli input basata su InteractionTracker, come ad esempio lo scorrimento tira-per-aggiornare e lo scorrimento parallasse. Che tu stia iniziando a usare il livello visivo o cercando modelli da applicare nella tua app, questi esempi sono un riferimento pratico per vedere come i blocchi predefiniti interagiscono.

Esplorare gli esempi in GitHub: WindowsAppSDK-Samples/SceneGraph.

Argomenti correlati

• Informazioni di riferimento sulle API Microsoft.UI.Composition
• Uso del livello visivo nelle app desktop