Hide list header on scroll – very nice UX experience with filters and lists

One of the recent releases of iOS introduced a very nice UX pattern in pages with scrolls.
Basically, when scrolling, page is trying to hide some information that is not relevant when user is scrolling content.
For example, Safari (web browser) minimizes address bar (navigation bar) when user scrolls the page
Scroll UX in Safari (iOS)

We enjoy this experience and see it in a lot of applications for iOS and tried to bring similar experience to Windows Phone.
Here is a preview how it looks on Windows Phone (please wait till GIF loads completely, otherwise you will see it in a slo-motion)

Sample of scrolling UX on Windows Phone

The implementation itself is very simple indeed.
We’re using LongListSelector control in this scenario and inherit it to expose ScrollPosition property.
ScrollPosition will contain current scroll offset. Kudos to Shawn Kendrot for providing a solution for that.
With this, we add 2 converters:

  1. to bind our header margin (to move header up and get more space for the list)
  2. and to bind our header opacity (to make transition nicer)

Below is a XAML source of the page with LongListSelector and our header along with 2 simple bindings

Here is a complete source code of this example:

Hide-list-header-on-scroll-WP.zip