On the Web there’s something in CSS called Position: Sticky
. Which you can see an example here in browsers that support it: http://html5-demos.appspot.com/static/css/sticky.html
Basically there are times where we want a panel to stay in view until the next stickypanel comes into place, like how instagram keeps the top bar with the username on top of each post.
So what if we gotten a StickyPanel
that is used like so:
<ScrollView>
<StackPanel>
<Each Items="{posts}">
<DockPanel>
<StickyPanel Dock="Top" Top="0">
<Text Value="{username}" />
</StickyPanel>
<!-- Rest of post data goes here -->
</DockPanel>
</Each>
</StackPanel>
</ScrollView>
So the StickyPanel
would stay on top while scrolling until the other StickyPanel
takes place over the one before, just like instagram
The Top
property tells it how many Points/Pixels/Percentages
from the top of the parent viewport till it sticks.