Search code examples
javascriptlistviewwindows-store-appswinjs

Left and right navigation in horizontal listview in winjs


How do we implement like Windows store does? Left and right navigational arrows with animations for 'Listview'? I tried, 'Flipview', 'HubControl', and also, when ever I try 'ensureVisible' on 'Listview', there are no animations in 'Listview'. How do I achieve animating content while navigating with left and right arrows?


Solution

  • Sorry, misunderstood your question before. I think you'll have to use a ListView and draw your own buttons on a layer above it.

    When you push a button, you can get the current scroll position of the ListView using the scrollPosition property. Get the current width of the ListView and add to or subtract that from the scrollPosition. However, this does not animate the scrolling automatically.

    You can also use the ensureVisible() method to scroll to a particular item.

    To get the ListView to animate when jumping to a new position, I think you're going to have to use WinJS.UI.executeAnimation to do it. https://msdn.microsoft.com/en-us/library/windows/apps/hh779762.aspx

    I've done it before, but I honestly can't remember exactly how it works. I know you'll have to setup some rules for how the animation behaves in CSS and then run it asynchronously in javascript.