Parallax

Paralax je vizuální efekt, ve kterém se položky blíže k prohlížeči pohybují rychleji než položky na pozadí. Paralax vytváří pocit hloubky, perspektivy a pohybu. V aplikaci XAML můžete pomocí ovládacího prvku ParallaxView vytvořit paralaxní efekt.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Paralax a fluent designový systém

Fluent Design System pomáhá vytvářet moderní, tučné uživatelské rozhraní, které zahrnuje světlo, hloubku, pohyb, materiál a měřítko. Parallax je komponenta fluent Design System, která do aplikace přidává pohyb, hloubku a škálování. Další informace najdete v přehledu fluent designu.

Jak funguje v uživatelském rozhraní

V uživatelském rozhraní můžete vytvořit efekt paralaxy přesunutím různých objektů různou rychlostí, když se rozhraní posouvá nebo otáčí. Abychom si to ukázali, podívejme se na dvě vrstvy obsahu, seznam a obrázek pozadí. Seznam je umístěn nad obrázkem pozadí, který již dává iluzi, že seznam může být blíže k prohlížeči. Abychom dosáhli efektu paralaxu, chceme, aby objekt, který je k nám nejblíže, cestovat "rychleji" než objekt, který je daleko daleko. Když uživatel posouvá rozhraní, seznam se pohybuje rychleji než obrázek na pozadí, který vytváří iluzi hloubky.

Vytvoření paralaxního efektu pomocí ovládacího prvku ParallaxView

K vytvoření paralaxního efektu použijte ovládací prvek ParallaxView . Tento ovládací prvek propoje pozici posunu prvku popředí, například seznamu, na prvek pozadí, jako je například obrázek. Když rolujete prvek popředí, animuje prvek pozadí a vytváří paralaxní efekt.

Pokud chcete použít ovládací prvek ParallaxView, zadáte source element, element pozadí a nastavíte VerticalShift (pro vertikální posouvání) a/nebo HorizontalShift (pro vodorovné posouvání) vlastnosti na hodnotu větší než nula.

• Vlastnost Source přijímá odkaz na prvek popředí. Aby došlo k efektu paralaxu, měl by být popředí ScrollViewer nebo prvek, který obsahuje ScrollViewer , například ListView nebo RichTextBox.
• Chcete-li nastavit element pozadí, přidáte tento element jako podřízený ParallaxView ovládacího prvku. Element pozadí může být jakýkoli UIElement, například Obrázek nebo panel, který obsahuje další prvky uživatelského rozhraní.

Chcete-li vytvořit parallax efekt, parallaxView musí být za elementem popředí. Panely Mřížka a Plátno umožňují vrstvovat položky nad sebou, takže dobře fungují s ovládacím prvku ParallaxView.

Tento příklad vytvoří efekt paralaxu pro seznam:

<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 automaticky upraví velikost obrázku tak, aby fungovala pro operaci paralaxu, takže se nemusíte starat o posouvání obrázku mimo zobrazení.

Přizpůsobení efektu paralaxu

Vlastnosti VerticalShift a HorizontalShift umožňují řídit stupeň paralaxního efektu.

• Vlastnost VerticalShift určuje, jak daleko chceme, aby se pozadí během celé operace paralaxu svisle posunulo. Hodnota 0 znamená, že pozadí se vůbec nepřesune.
• Vlastnost HorizontalShift určuje, o kolik se má pozadí vodorovně posunout během operace paralaxu. Hodnota 0 znamená, že pozadí se vůbec nepřesune.

Větší hodnoty vytvářejí dramatičtější efekt.

Úplný seznam způsobů, jak přizpůsobit parallax, viz třída ParallaxView.

Recommendations

• Použití paralaxu v seznamech s obrázkem pozadí
• Zvažte použití paralaxu v ListViewItems, když ListViewItems obsahuje obrázek.
• Nepoužívejte ho všude, nadměrné využití může snížit jeho dopad

Související články

• Třída ParallaxView