Parallax

Paralaxe é um efeito visual onde os itens mais próximos do espectador se movem mais rápido do que os itens em segundo plano. A paralaxe cria uma sensação de profundidade, perspetiva e movimento. Em um aplicativo XAML, você pode usar o controle ParallaxView para criar um efeito de paralaxe.

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Paralaxe e o Sistema de Design Fluente

O Fluent Design System ajuda você a criar uma interface do usuário moderna e arrojada que incorpora luz, profundidade, movimento, material e escala. Parallax é um componente do Fluent Design System que adiciona movimento, profundidade e escala ao seu aplicativo. Para saber mais, consulte a visão geral do Fluent Design.

Como funciona em uma interface de usuário

Em uma interface do usuário, você pode criar um efeito de paralaxe movendo objetos diferentes em taxas diferentes quando a interface do usuário rola ou se desloca. Para demonstrar, vamos examinar duas camadas de conteúdo, uma lista e uma imagem de fundo. A lista é colocada em cima da imagem de fundo, o que já dá a ilusão de que a lista pode estar mais próxima do espectador. Agora, para alcançar o efeito paralaxe, queremos que o objeto mais próximo de nós viaje "mais rápido" do que o objeto que está mais longe. À medida que o usuário rola a interface, a lista se move a uma taxa mais rápida do que a imagem de fundo, o que cria a ilusão de profundidade.

Usando o controle ParallaxView para criar um efeito de paralaxe

Para criar um efeito de paralaxe, use o controle ParallaxView . Esse controle vincula a posição de rolagem de um elemento de primeiro plano, como uma lista, a um elemento de plano de fundo, como uma imagem. À medida que você rola pelo elemento de primeiro plano, ele anima o elemento de plano de fundo para criar um efeito de paralaxe.

Para usar o controle ParallaxView, forneça um elemento Source, um elemento background e defina as propriedades VerticalShift (para rolagem vertical) e/ou HorizontalShift (para rolagem horizontal) como um valor maior que zero.

• A propriedade Source tem uma referência ao elemento de primeiro plano. Para que o efeito paralaxe ocorra, o primeiro plano deve ser um ScrollViewer ou um elemento que contenha um ScrollViewer, como ListView ou RichTextBox.
• Para definir o elemento background, adicione esse elemento como filho do controle ParallaxView. O elemento background pode ser qualquer UIElement, como uma Image ou um painel que contenha elementos adicionais da interface do usuário.

Para criar um efeito de paralaxe, o ParallaxView deve estar atrás do elemento de primeiro plano. Os painéis Grid e Canvas permitem colocar itens em camadas uns sobre os outros, para que funcionem bem com o controle ParallaxView.

Este exemplo cria um efeito de paralaxe para uma lista:

<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>

O ParallaxView ajusta automaticamente o tamanho da imagem para que funcione para a operação de paralaxe para que você não tenha que se preocupar com a imagem rolando para fora da vista.

Personalizando o efeito paralaxe

As propriedades VerticalShift e HorizontalShift permitem controlar o grau do efeito paralaxe.

• A propriedade VerticalShift especifica até onde queremos que o plano de fundo se desloque verticalmente durante toda a operação de paralaxe. Um valor 0 significa que o plano de fundo não se move.
• A propriedade HorizontalShift especifica até onde queremos que o plano de fundo se desloque horizontalmente durante toda a operação de paralaxe. Um valor 0 significa que o plano de fundo não se move.

Valores maiores criam um efeito mais dramático.

Para obter a lista completa de maneiras de personalizar o paralaxe, consulte a classe ParallaxView.

Recommendations

• Usar paralaxe em listas com uma imagem de fundo
• Considere o uso de paralaxe em ListViewItems quando ListViewItems contém uma imagem
• Não o use em todos os lugares, o uso excessivo pode diminuir seu impacto

UWP e WinUI 2

Artigos relacionados

• Classe ParallaxView