A StickyPanel

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.