Parallax

Parallax to efekt wizualny, w którym elementy bliżej osoby przeglądającego poruszają się szybciej niż elementy w tle. Parallax tworzy uczucie głębokości, perspektywy i ruchu. W aplikacji XAML możesz użyć kontrolki ParallaxView, aby utworzyć efekt parallax.

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Parallax i System Fluent Designu

System Fluent Design ułatwia tworzenie nowoczesnego, odważnego interfejsu użytkownika, który zawiera światło, głębokość, ruch, materiał i skalę. Parallax to składnik systemu Fluent Design, który dodaje ruch, głębokość i skalowanie do aplikacji. Aby dowiedzieć się więcej, zobacz Omówienie usługi Fluent Design.

Jak to działa w interfejsie użytkownika

W interfejsie użytkownika można utworzyć efekt paralaksy, przenosząc różne obiekty z różnymi szybkościami podczas przewijania lub przesuwania się interfejsu. Aby zademonstrować, przyjrzyjmy się dwóm warstwom zawartości, liście i obrazowi tła. Lista jest umieszczona na górze obrazu tła, co tworzy już złudzenie, że lista może być bliżej widza. Teraz, aby osiągnąć efekt paralaksu, chcemy, aby obiekt znajdujący się najbliżej nas podróżował "szybciej" niż obiekt, który jest dalej. Gdy użytkownik przewija interfejs, lista jest szybciej przesuwana niż obraz tła, co tworzy iluzję głębokości.

Używanie kontrolki ParallaxView do utworzenia efektu parallax

Aby utworzyć efekt parallax, należy użyć kontrolki ParallaxView . Ta kontrolka łączy położenie przewijania elementu pierwszego planu, takiego jak lista, do elementu tła, takiego jak obraz. Podczas przewijania elementu pierwszego planu, animuje on element tła, aby stworzyć efekt paralaksy.

Aby użyć kontrolki ParallaxView, należy podać element źródłowy, element tła i ustawić właściwości VerticalShift (do przewijania pionowego) i/lub HorizontalShift (do przewijania poziomego) na wartość większą niż zero.

• Właściwość Source przyjmuje odwołanie do elementu wyświetlanego na pierwszym planie. Aby efekt paralaksy wystąpił, pierwszym planem powinien być ScrollViewer lub element zawierający ScrollViewer, taki jak ListView lub RichTextBox.
• Aby ustawić element tła, należy dodać ten element jako element podrzędny kontrolki ParallaxView. Element tła może być dowolnym elementem interfejsu użytkownika, takim jak obraz lub panel zawierający dodatkowe elementy interfejsu użytkownika.

Aby utworzyć efekt parallax, element ParallaxView musi znajdować się za elementem pierwszego planu. Panele Siatki i kanwy umożliwiają warstwowanie elementów nawzajem, dzięki czemu działają dobrze z kontrolką ParallaxView.

W tym przykładzie zostanie utworzony efekt parallax dla listy:

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

Element ParallaxView automatycznie dostosowuje rozmiar obrazu, aby działać w przypadku operacji paralaksy, co zwalnia cię z troski o to, że obraz przewinie się poza widok.

Dostosowywanie efektu parallax

Właściwości VerticalShift i HorizontalShift pozwalają kontrolować stopień efektu paralaksu.

• Właściwość VerticalShift określa, jak daleko chcemy, aby tło było przesuwane w pionie podczas całej operacji parallax. Wartość 0 oznacza, że tło w ogóle nie jest przenoszone.
• Właściwość HorizontalShift określa, jak daleko chcemy, aby tło było przesuwane w poziomie podczas całej operacji parallax. Wartość 0 oznacza, że tło w ogóle nie jest przenoszone.

Większe wartości tworzą bardziej dramatyczny efekt.

Aby uzyskać pełną listę sposobów dostosowywania parallax, zobacz klasę ParallaxView.

Zalecenia

• Używanie efektu paralaksy na listach z obrazkiem tła
• Rozważ użycie efektu paralaksy w ListViewItems, gdy elementy ListViewItems zawierają obraz.
• Nie używaj go wszędzie, nadmierne wykorzystanie może zmniejszyć jego wpływ

Powiązane artykuły

• klasa ParallaxView