Skip to main content

Parallax View

The ParallaxView is a simple but powerful layout that allows you to implement many different designs easily, and provides a simple way to implement a Parallax animation in your pages.

Parallax view demo

Getting Started

The ParallaxView has 3 parts: the Header, the StickyHeader and the Content:

Parallax view layout
  • The Header is the one that will be hidden at the end of the parallax animation.
  • The StickyHeader will be displayed all the time at the top of the layout.
  • The Content will have the scrollable content of the page; note that you don't have to include a ScrollView. the ParallaxView does that internally.

All the control parts are optional, i.e: you can have a ParallaxView with StickyHeader and Content but without an animated header.

Bindable Properties

AbsoluteScrollYdoubleThis is a readonly property that returns the value of the whole scroll on the layout
HeaderHeightdoubleGets or sets the height value of the Header part of the layout
HeaderFadeOutColorColorGets or sets the color that will be appearing when the header is closing as effect of the parallax animation
HeaderViewGets or sets the view value of the header part of the layout
StickyHeaderHeightdoubleGets or sets the height value of the StickyHeader part of the layout
StickyHeaderViewGets or sets the view value of the sticky header part of the layout