This repository contains a sample demonstrating how to implement a parallax scrolling effect in a modified CollectionView in a .NET MAUI app. This project is part of MAUI UI July 2024.

Parallax is the appearance of things closer moving faster than things further away. In 2D games and UI design, it gives the illusion of depth and can make your apps come alive!

Feel free to explore the code, and for a full walkthrough of this implementation, check out the blog post.

• Parallax Scrolling Effect: Adds a dynamic and visually appealing depth to your app's UI.
• .NET MAUI ParallaxCollectionView: Demonstrates the modification and extension of CollectionView into a ParallaxCollectionView control.
• Cross-Platform: Compatible with both Android and iOS.

Replace an instance of CollectionView with ParallaxCollectionView (it's a subclass so you can do a straight substitution). In your DataTemplate use view that subclasses ParallaxItemView (this in turn subclasses ContentView). Override the OnScrolled method and set the TranslationY property of your foreground element to ParallaxOffsetY. This gets recalculated every time hte collection is scrolled.

Part of MAUI UI July 2024.

Cheers! 🍻