Uso del livello visivo nelle app desktop

È ora possibile usare Windows Runtime API nelle applicazioni desktop non UWP per migliorare l'aspetto, l'aspetto e le funzionalità delle applicazioni macchine virtuali Windows, Windows Forms e C++ Win32 e sfruttare le funzionalità più recenti dell'interfaccia utente Windows disponibili solo tramite UWP.

Per molti scenari, puoi usare le isole XAML per aggiungere controlli XAML moderni alla tua app. Tuttavia, quando è necessario creare esperienze personalizzate che vanno oltre i controlli predefiniti, è possibile accedere alle API livello visivo.

Il livello visivo offre un'API a prestazioni elevate, in modalità mantenuta per grafica, effetti e animazioni. È la base per l'interfaccia utente in tutti i dispositivi Windows. I controlli XAML UWP sono basati sul livello visivo e consentono molti aspetti del sistema Fluent Design, ad esempio Light, Depth, Motion, Material e Scale.

Breve video che mostra un'interfaccia utente creata con il layer visivo.

Interfaccia utente creata con lo strato visivo

Creare un'interfaccia utente visivamente coinvolgente in qualsiasi app Windows

Il livello visivo consente di creare esperienze coinvolgenti usando la composizione leggera di contenuto disegnato personalizzato (oggetti visivi) e l'applicazione di animazioni, effetti e manipolazioni potenti su tali oggetti nell'applicazione. Il livello visivo non sostituisce alcun framework dell'interfaccia utente esistente; invece, è un prezioso supplemento a questi framework.

È possibile usare il livello visivo per dare all'applicazione un aspetto univoco e stabilire un'identità che lo distingue da altre applicazioni. Abilita anche i principi di Fluent Design, progettati per semplificare l'uso delle applicazioni, attirando più coinvolgimento dagli utenti. Ad esempio, è possibile usarlo per creare segnali visivi e transizioni dello schermo animate che mostrano relazioni tra gli elementi sullo schermo.

Funzionalità dello strato visivo

Spazzole

I pennelli di composizione consentono di disegnare oggetti dell'interfaccia utente con colori a tinta unita, sfumature, immagini, video, effetti complessi e altro ancora.

Un uovo creato con Material Creator

Un uovo creato con l'app demo Material Creator.

Effetti

Gli effetti di composizione includono luce, ombreggiatura e un elenco di effetti filtro. Possono essere animati, personalizzati e concatenati, quindi applicati direttamente agli oggetti visivi. SceneLightingEffect può essere combinato con l'illuminazione di composizione per creare atmosfera, profondità e materiali.

Luci e materiali

Luci e materiali dimostrati nella raccolta di esempi della composizione dell'interfaccia utente di Windows.

Animazioni

Le animazioni di composizione vengono eseguite direttamente nel processo di composizione, indipendentemente dal thread dell'interfaccia utente. Ciò garantisce uniformità e scalabilità, in modo da poter eseguire un numero elevato di animazioni simultanee ed esplicite. Oltre alle familiari animazioni KeyFrame per modificare le proprietà nel tempo, è possibile usare espressioni per configurare relazioni matematiche tra diverse proprietà, inclusi i dati immessi dall'utente. Le animazioni basate su input consentono di creare un'interfaccia utente che risponda dinamicamente e fluidamente all'input dell'utente, con conseguente maggiore coinvolgimento degli utenti.

Breve video di un'altra interfaccia utente creata con lo strato visivo.

"Il movimento dimostrato nella galleria di esempi del sistema Windows UI Composition."

Mantenere la codebase esistente e adottare in modo incrementale

Il codice nelle applicazioni esistenti rappresenta un investimento significativo che non si vuole perdere. Puoi migrare isole di contenuto per usare lo strato 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.

Esempi ed esercitazioni

Scopri come utilizzare il livello visivo nelle tue applicazioni sperimentando i nostri esempi. Questi esempi ed esercitazioni consentono di iniziare a usare il livello visivo e di illustrare il funzionamento delle funzionalità.

Win32

Windows Forms

macchine virtuali Windows

Limitations

Anche se molte funzionalità del livello visivo funzionano allo stesso modo quando sono ospitate in un'applicazione desktop come in un'app UWP, alcune funzionalità presentano limitazioni. Ecco alcune delle limitazioni da tenere presenti:

  • Le catene di effetti si basano su Win2D per le descrizioni degli effetti. Il pacchetto NuGet Win2D non è supportato nelle applicazioni desktop, quindi è necessario ricompilarlo dal codice source.
  • Per eseguire l'hit testing, è necessario calcolare manualmente i confini percorrendo la struttura ad albero visuale. Si tratta dello stesso livello visivo nella piattaforma UWP, ma in questo caso non esiste alcun elemento XAML a cui è possibile eseguire facilmente il binding per l'hit testing.
  • Il livello visivo non dispone di una primitiva per il rendering del testo.
  • Quando due diverse tecnologie dell'interfaccia utente vengono usate insieme, ad esempio macchine virtuali Windows e il livello visivo, sono ognuna responsabile del disegno dei propri pixel sullo schermo e non può condividere i pixel. Di conseguenza, il rendering del contenuto del livello visivo viene sempre eseguito sopra altri contenuti dell'interfaccia utente. Questo problema è noto come problema dello spazio aereo. Potrebbe essere necessario eseguire programmazione e test aggiuntivi per assicurarsi che gli elementi visivi del contenuto si ridimensionino con l'interfaccia utente host e non occludano altri contenuti.
  • Il contenuto ospitato in un'applicazione desktop non viene ridimensionato o adattato automaticamente ai DPI. Potrebbero essere necessari passaggi aggiuntivi per garantire che il contenuto gestisca le modifiche dpi. Per altre info, vedi le esercitazioni specifiche della piattaforma.

Risorse aggiuntive

Informazioni di riferimento sulle API

  • Last updated on