Parallax

Parallax is een visueel effect waarbij items dichter bij de kijker sneller bewegen dan items op de achtergrond. Parallax creëert een gevoel van diepte, perspectief en beweging. In een XAML-app kunt u het besturingselement ParallaxView gebruiken om een parallax-effect te maken.

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Parallax en het Fluent Design System

Het Fluent Design System helpt u moderne, vetgedrukte gebruikersinterface te maken die licht, diepte, beweging, materiaal en schaal bevat. Parallax is een Fluent Design System-onderdeel dat beweging, diepte en schaal toevoegt aan uw app. Zie het Fluent Design-overzicht voor meer informatie.

Hoe het werkt in een gebruikersinterface

In een gebruikersinterface kunt u een parallax-effect maken door verschillende objecten tegen verschillende tarieven te verplaatsen wanneer de gebruikersinterface schuift of pannen. Laten we eens kijken naar twee lagen inhoud, een lijst en een achtergrondafbeelding. De lijst wordt boven op de achtergrondafbeelding geplaatst die al de illusie geeft dat de lijst dichter bij de kijker kan zijn. Om het parallax-effect te bereiken, willen we dat het object dat het dichtst bij ons ligt , "sneller" reist dan het object dat verder weg is. Wanneer de gebruiker door de interface schuift, wordt de lijst sneller verplaatst dan de achtergrondafbeelding, waardoor de illusie van diepte ontstaat.

Het besturingselement ParallaxView gebruiken om een parallax-effect te maken

Als u een parallax-effect wilt maken, gebruikt u het besturingselement ParallaxView . Dit besturingselement koppelt de schuifpositie van een voorgrondelement, zoals een lijst, aan een achtergrondelement, zoals een afbeelding. Terwijl u door het voorgrondelement bladert, wordt het achtergrondelement beimamd om een parallax-effect te maken.

Als u het besturingselement ParallaxView wilt gebruiken, geeft u een bronelement, een achtergrondelement op en stelt u de eigenschappen VerticalShift (voor verticaal schuiven) en/of HorizontalShift (voor horizontaal schuiven) in op een waarde die groter is dan nul.

• De eigenschap Bron verwijst naar het voorgrondelement. Om het parallax-effect te laten optreden, moet de voorgrond een ScrollViewer of een element zijn dat een ScrollViewer bevat, zoals een ListView of een RichTextBox.
• Als u het achtergrondelement wilt instellen, voegt u dat element toe als een onderliggend element van het besturingselement ParallaxView. Het achtergrondelement kan elk UIElement zijn, zoals een afbeelding of een deelvenster met extra UI-elementen.

Als u een parallax-effect wilt maken, moet de ParallaxView zich achter het voorgrondelement bevindt. Met de deelvensters Raster en Canvas kunt u items op elkaar plaatsen, zodat ze goed werken met het besturingselement ParallaxView.

In dit voorbeeld wordt een parallax-effect voor een lijst gemaakt:

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

De ParallaxView past automatisch de grootte van de afbeelding aan, zodat deze werkt voor de parallax-bewerking, zodat u zich geen zorgen hoeft te maken over het uit de weergave schuiven van de afbeelding.

Het parallax-effect aanpassen

Met de eigenschappen VerticalShift en HorizontalShift kunt u de mate van het parallax-effect bepalen.

• De eigenschap VerticalShift geeft aan hoe ver de achtergrond verticaal moet worden verplaatst tijdens de hele parallax-bewerking. Een waarde van 0 betekent dat de achtergrond helemaal niet wordt verplaatst.
• De eigenschap HorizontalShift geeft aan hoe ver de achtergrond horizontaal moet worden verplaatst tijdens de hele parallax-bewerking. Een waarde van 0 betekent dat de achtergrond helemaal niet wordt verplaatst.

Grotere waarden zorgen voor een dramatischer effect.

Zie de klasse ParallaxView voor de volledige lijst met manieren om parallax aan te passen.

Aanbevelingen

• Parallax gebruiken in lijsten met een achtergrondafbeelding
• Overweeg het gebruik van parallax in ListViewItems wanneer ListViewItems een afbeelding bevatten
• Gebruik het niet overal, overgebruik kan de impact ervan verminderen

UWP en WinUI 2

Verwante artikelen

• ParallaxView-klasse