Condividi tramite

Parallax

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 XAML puoi usare il controllo ParallaxView per creare un effetto parallasse.

Aprire l'app Raccolta WinUI e vedere ParallaxView in azione

La Raccolta WinUI 3 ti consente di esplorare e sfogliare esempi interattivi di controlli, caratteristiche e funzionalità di WinUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Il parallasse e il sistema di progettazione Fluent Design

Il sistema Fluent Design consente di creare un'interfaccia utente moderna e audace che incorpora luce, profondità, movimento, materiale e scala. 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 velocità diverse quando l'interfaccia utente scorre o esegue una 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à.

Esempio di parallasse con un elenco e un'immagine di sfondo

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. Quando si scorre l'elemento in primo piano, l'elemento di sfondo viene animato per creare un effetto 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.

Consigli

  • 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

UWP e WinUI per la piattaforma UWP

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

  • Last updated on