Uso del livello visivo nelle app desktop

  • Articolo

Le API di Windows Runtime possono ora essere usate nelle applicazioni desktop non UWP per ottimizzare l'aspetto e le funzionalità delle applicazioni WPF, Windows Forms e Win32 C++ e sfruttare i vantaggi delle recenti funzionalità dell'interfaccia utente di Windows disponibili solo tramite la piattaforma UWP.

In molti scenari, per aggiungere all'app controlli XAML moderni sono disponibili le isole XAML. Se però devi creare esperienze personalizzate più avanzate rispetto ai controlli predefiniti, puoi accedere alle API del livello visivo.

Il livello visivo offre un'API retained-mode con prestazioni elevate per grafica, effetti e animazioni. È la base per l'interfaccia utente di tutti i dispositivi Windows. I controlli XAML UWP sono basati sul livello visivo e consentono l'uso di molti aspetti del sistema Fluent Design, ad esempio la luce, la profondità, il movimento, il materiale e il ridimensionamento.

Short video showing a user interface created with the visual layer.

Interfaccia utente creata con il livello visivo

Creare un'interfaccia utente visivamente accattivante in qualsiasi app di Windows

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

Puoi usare il livello visivo per conferire all'applicazione un aspetto esclusivo e definire un'identità che la distingue dalle altre applicazioni. Questo livello consente inoltre di adottare principi di Fluent Design, progettati per semplificare l'uso delle applicazioni e renderle più coinvolgenti per gli utenti. Puoi ad esempio usarlo per creare segnali visivi e transizioni di schermata animate che mostrano le relazioni tra gli elementi sullo schermo.

Funzionalità del livello visivo

Pennelli

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

An egg created with Material Creator

Un uovo creato con l'app demo Material Creator.

Effetti

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

Lights and material

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

Animazioni

Le animazioni di composizione vengono eseguite direttamente nel processo del programma di composizione, indipendentemente dal thread dell'interfaccia utente. Ciò garantisce uniformità e scalabilità, consentendo un numero elevato di animazioni simultanee ed esplicite. Oltre alle comuni animazioni basate su fotogrammi chiave per le modifiche delle proprietà nel tempo, puoi usare espressioni per configurare relazioni matematiche tra proprietà diverse, incluso l'input dell'utente. Le animazioni basate su input consentono di creare un'interfaccia utente in grado di rispondere in modo fluido e dinamico all'input dell'utente, che potrà così usufruire di un'esperienza più coinvolgente.

Short video of another user interface created with the visual layer.

Movimento illustrato nella raccolta di esempi di composizione dell'interfaccia utente di Windows.

Mantenere la codebase esistente e adottarla in modo incrementale

Il codice nelle applicazioni esistenti rappresenta un investimento significativo da non perdere. Puoi eseguire la migrazione di isole di contenuto per usare il livello visivo e mantenere la parte restante dell'interfaccia utente nel framework esistente. Ciò significa che puoi introdurre aggiornamenti e miglioramenti significativi all'interfaccia utente della tua applicazione senza dover apportare modifiche estese alla codebase esistente.

Esempi ed esercitazioni

Scopri come usare il livello visivo nelle tue applicazioni provando a eseguire i nostri esempi. Le esercitazioni e gli esempi offerti consentono di acquisire familiarità con il livello visivo e illustrano la modalità di esecuzione delle funzionalità.

Win32

Windows Forms

WPF

Limiti

Anche se molte funzionalità del livello visivo funzionano allo stesso modo indipendentemente dal fatto che siano ospitate in un'applicazione desktop o in un'app UWP, alcune di esse presentano delle limitazioni. Ecco alcune 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 e devi quindi ricompilarlo dal codice sorgente.
  • Per l'hit testing, devi eseguire personalmente i calcoli delle associazioni scorrendo la struttura ad albero visuale. Questo avviene anche per il livello visivo nella piattaforma UWP, ma in questo caso non esiste un elemento XAML con cui puoi facilmente stabilire un'associazione 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 contemporaneamente, ad esempio WPF e il livello visivo, ciascuna è responsabile del disegno dei propri pixel sullo schermo, che non possono quindi essere condivisi. Di conseguenza, il rendering del contenuto del livello visivo viene sempre eseguito su altro contenuto dell'interfaccia utente. In senso figurato, questo può essere definito come un problema di spazio aereo. Potresti dover eseguire altre operazioni di codifica e test per assicurarti che il contenuto del livello visivo venga ridimensionato con l'interfaccia utente host e non impedisca la visibilità di altro contenuto.
  • Il contenuto ospitato in un'applicazione desktop non viene ridimensionato automaticamente per i valori DPI. Potresti dover eseguire altri passaggi per assicurarti che il contenuto gestisca le modifiche ai valori DPI. Per altre informazioni, vedi le esercitazioni specifiche della piattaforma.

Risorse aggiuntive

Riferimento API