Stick an UI element of ScrollViewer at top of the region once it reaches the Top of the ScrollViewer.

Question

Hai, I need a solution to acheive a UI behaviour. In my case i have a list. in top of the list there is a list header (red grid in image). at top of the list header there is a region for showing description (green grid in image).

I need to scroll this UI elements in a behaviour that all the 3 elements should scroll until the list header (red) reaches the top. Once list header reaches top it should stick at the top of the scroll region and the listview need to scroll further. (like shown in next img)

The scroll up should also behaves in the same way that once the list scroll reaches the top, the header and description region needs to down smoothly.

Kindly help me to acheive this. Thanks in advance.

Answer 1

You could do this by putting all the items (employees) in a single group and making the Red area a header, then set AreStickyGroupHeadersEnabled.