Effetto parallasse

  • Articolo

Parallasse è un effetto visivo in cui gli elementi più vicini al visualizzatore si spostano più velocemente rispetto agli elementi in background. Parallasse crea una sensazione di profondità, prospettiva e movimento. In un'app UWP puoi usare il controllo ParallaxView per creare un effetto parallasse.

API della libreria dell'interfaccia utente di Windows:Classe ParallaxView, proprietà VerticalShift, proprietà HorizontalShift

API della piattaforma: classe ParallaxView, proprietà VerticalShift, proprietà HorizontalShift

Esempi

Raccolta WinUI 2
WinUI Gallery

Se è installata l'app WinUI 2 Gallery, fare clic qui per aprire l'app e vedere il controllo InfoBar in azione.

Il parallasse e il sistema di progettazione Fluent Design

Il sistema di progettazione Fluent Design ti consente di creare un'interfaccia utente moderna e vivace che incorpora luminosità, profondità, movimento, materiale e ridimensionamento. Parallasse è un componente del sistema Fluent Design che aggiunge movimento, profondità e scalabilità all'app. Per altre informazioni, vedi la panoramica di Fluent Design.

Funzionamento in un'interfaccia utente

In un'interfaccia utente è possibile creare un effetto parallasse spostando oggetti diversi a frequenze diverse quando l'interfaccia utente scorre o esegue le panoramica. Per dimostrare, esaminiamo due livelli di contenuto, un elenco e un'immagine di sfondo. L'elenco viene posizionato sopra l'immagine di sfondo che dà già l'illusione che l'elenco potrebbe essere più vicino al visualizzatore. A questo punto, per ottenere l'effetto parallasse, vogliamo che l'oggetto più vicino a noi viaggi "più veloce" rispetto all'oggetto più lontano. Quando l'utente scorre l'interfaccia, l'elenco si sposta a una velocità più veloce rispetto all'immagine di sfondo, che crea l'illusione della profondità.

An example of parallax with a list and background image

Uso del controllo ParallaxView per creare un effetto parallasse

Per creare un effetto parallasse, usare il controllo ParallaxView . Questo controllo associa la posizione di scorrimento di un elemento in primo piano, ad esempio un elenco, a un elemento dello sfondo, ad esempio un'immagine. Mentre si scorre l'elemento in primo piano, viene aggiunta un'animazione all'elemento di sfondo per creare un effetto di scorrimento a parallasse.

Per usare il controllo ParallaxView, fornisci un elemento Source, un elemento di sfondo e imposta le proprietà VerticalShift (per lo scorrimento verticale) e/o HorizontalShift (per lo scorrimento orizzontale) su un valore maggiore di zero.

  • La proprietà Source accetta un riferimento all'elemento in primo piano. Affinché si verifichi l'effetto parallasse, il primo piano deve essere un controllo ScrollViewer o un elemento che contiene un controllo ScrollViewer, ad esempio listView o RichTextBox.

  • Per impostare l'elemento di sfondo, aggiungere tale elemento come elemento figlio del controllo ParallaxView. L'elemento di sfondo può essere qualsiasi ELEMENTO UIElement, ad esempio image o un pannello che contiene elementi aggiuntivi dell'interfaccia utente.

Per creare un effetto parallasse, parallaxView deve essere dietro l'elemento in primo piano. I pannelli Grid e Canvas consentono di applicare livelli agli elementi l'uno all'altro, in modo che funzionino bene con il controllo ParallaxView.

Questo esempio crea un effetto parallasse per un elenco:

<Grid>
    <ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50"> 
    
        <!-- Background element --> 
        <Image x:Name="BackgroundImage" Source="Assets/turntable.png"
               Stretch="UniformToFill"/>
    </ParallaxView>
    
    <!-- Foreground element -->
    <ListView x:Name="ForegroundElement">
       <x:String>Item 1</x:String> 
       <x:String>Item 2</x:String> 
       <x:String>Item 3</x:String> 
       <x:String>Item 4</x:String> 
       <x:String>Item 5</x:String>     
       <x:String>Item 6</x:String> 
       <x:String>Item 7</x:String> 
       <x:String>Item 8</x:String> 
       <x:String>Item 9</x:String> 
       <x:String>Item 10</x:String>     
       <x:String>Item 11</x:String> 
       <x:String>Item 13</x:String> 
       <x:String>Item 14</x:String> 
       <x:String>Item 15</x:String> 
       <x:String>Item 16</x:String>     
       <x:String>Item 17</x:String> 
       <x:String>Item 18</x:String> 
       <x:String>Item 19</x:String> 
       <x:String>Item 20</x:String> 
       <x:String>Item 21</x:String>        
    </ListView>
</Grid>

ParallaxView regola automaticamente le dimensioni dell'immagine in modo che funzioni per l'operazione di parallasse in modo da non doversi preoccupare dello scorrimento dell'immagine dalla visualizzazione.

Personalizzazione dell'effetto parallasse

Le proprietà VerticalShift e HorizontalShift consentono di controllare il grado dell'effetto parallasse.

  • La proprietà VerticalShift specifica la distanza di spostamento verticale dello sfondo durante l'intera operazione di parallasse. Il valore 0 indica che lo sfondo non si sposta affatto.
  • La proprietà HorizontalShift specifica la distanza di spostamento orizzontale dello sfondo durante l'intera operazione di parallasse. Il valore 0 indica che lo sfondo non si sposta affatto.

I valori più grandi creano un effetto più drammatico.

Per l'elenco completo dei modi per personalizzare i parallasse, vedere la classe ParallaxView.

Cosa fare e cosa non fare

  • Usa parallasse negli elenchi con un'immagine di sfondo
  • Prendere in considerazione l'uso di parallasse in ListViewItems quando ListViewItems contiene un'immagine
  • Non usarlo ovunque, l'uso eccessivo può ridurne l'impatto