Pull down to refresh in Windows Phone 8.1

Question

I want to implement the pull-down-to-refresh function in my WP8.1 (Runtime) app. I tried to find a solution for this WP version, but as I have seen this function works in older versions of WP.
I have a ListView where I would like to use it. With ScrollViewer I can detect when the user reach the end of the list, but for example the VerticalOffset value cannot be a negativ number, so I cannot detect the pull down gesture.
Can anyone any idea how can I implement this feature for my app?

Antigen

What about letting the control (listview or parent control) be dragged down (to a threshold value) to trigger a refresh? Use animations to create a smooth bounce-back and notify the user of updated content. Don't forget to virtualize the listview items if it contains many to avoid performance problems. – Webster

So, doesn't exist any ready-made solution for it? I can't do complex individual animation, because I don't have enough experience in it. It would be enough if I can detect the bounce-back or if the user pull down the list to a threshold value. Okay, a unique animation would be the best, but this is better than nothing. Otherwise refreshing the list is implemented already, it works with a button, but the pull down gesture is more user-friendly. – Antigen

Maybe this article can help you codeproject.com/Articles/428088/… – Village

AFAIK there isn't a built in function for that, but it's not that tricky to implement. Give it a try, post code here when stuck and we'll help you :) – Webster

CodeNoob: thanks for the link, I tried to implement that code for my app, but there is no mouse related event handlers in WP Runtime. So I think I cannot use that solution, but it looked good. – Antigen

Iris Classon: thanks, tomorrow I will try to write some code, and if I stuck, I will come here for help. :) – Antigen

Use the pointer events instead which are the replacement for mouse events (to support touch and mouse): msdn.microsoft.com/en-us/library/windows/apps/xaml/… I'll make a little code example for you later today. Happy coding! – Webster

I'm trying to do it but I think it is impossible to adapt to wp 8.1. – Fichte

Answer 1

I've created a simple control that implements the "Pull to refresh" feature, and the "Load data on demand", you can find it in nuget, read about it from this blog post. Works on both Windows 8 & Windows Phone 8.1

UPDATE: I've published the source code of this control if anybody is interested: https://github.com/TareqAteik/ExtendedListView

Edme

Hi, it was a very good idea to create this extended listview! But could you give a full example? I faced some problem when I tried to use it. Thanks in advance! – Antigen

Sorry, it seems I have solved my problem! Thanks for your work! – Antigen

Is it possible to scroll to the top of ListView automatically? Earlier I used the ScrollViewer for it (outside the ListView) with this code: scrollViewer.ChangeView(null, 0d, null, true); But now I can't use the ScrollViewer, because it makes strange things. And I tried this: historyList.ScrollIntoView(historyList.Items.First()); But it doesn't make anything. I have sometimes an other problem: The "pull down to refresh" text is visible when I start the app and it can hide (and works properly) only when I go to another page and go back. – Antigen

And my third problem: I cached the page where the listview is. If I navigate to an other page and I go back the position is stay the same as before I was. But if I touch it, the items of the listview disappear and if I release the screen, the listview goes to the top. Could you help me how to solve these things? Thanks – Antigen

I will have to look it up, I'm working on the next version of the library (adding commands to make it more mvvm friendly). I will fix the problems you reported and let you know... – Edme

Also it would be helpful if you can upload a sample code with the bugs.. if you have time. you can reach me on twitter twitter.com/TareqAteik – Edme

Sorry for the late reply, but I've fixed it, please get the latest update from nuget – Edme

After the update the items don't appear, I see only the type of my objects and not the values. Can you check it? Or is it a unique problem at my side? – Antigen

The 0.0.5.3 version seems good after a few minutes test. Thank you for your hard work! – Antigen

There are 2 things about the behavior of your listview: 1.) I use Signalr in my app and if I get a new item and try to add to the list then the list doesn't go to the top automatically. More precisely in the previous version of your listview (0.0.4) this feature worked same as the original listview: the new item appeard in the top of the list and the other items went down. I use this command to add new item to the top: hirtorylistitems.Insert(0, hist); In the new version I tried this: ScrollToTop(); But it's not the nicest result. – Antigen

The other issue is the performance. I know, it's not a simple thing, but I hope that you will be able to do something with it. The original listview is a smooth solution, but if there are many items (50-100 or above) the extended listview need more time to display the list items. In this case I can see only black screen while I am scrolling. After this issues I think the extended listview will be a very good solution to display items in a list. And thanks again for your work. – Antigen

Thanks, sorry for the late response but I dont check stackoverflow that much... I will look it up this weekend and let you know, in the meantime for the scrolling issue you can try ScrollIntoView method, i fixed it in the last update – Edme

It should scroll smoothly now with "0.0.5.4" update! – Edme

Inserting new item to top of the list is working fine now. Thanks! But the smooth of the scroll is not perfect yet, at least on a real device (Nokia Lumia 625). I have created 4 video about it. You can find them here: link – Antigen

Thanks for the videos.. I'm getting a Lumia 520 (should be the slowest) and will test the performance... – Edme

Also I don't want to turn this stackoverflow question to a chat room :) please send me messages through twitter @tareqateik – Edme

@Edme How can I stop refresh animation on the extendedListView? – Theda

Looks good so far, but just to clarify - is it open source or not? – Eccrine

I'm getting issue using this library in windows phone 8.1. When I pull the listview to refresh an event is trigger which is look like private System.Threading.Tasks.Task pullToRefreshListView_PullToRefreshRequested(object sender, EventArgs e) { return default(System.Threading.Tasks.Task); } but my application crash when it reach on "return default(System.Threading.Tasks.Task);" It gives exception "Object reference not set to an instance of an object" plz help – Affected