ExtendedListView Control for Universal Apps (Pull to refresh & Load more data on demand)

One of the features that is missing from the ListView control in WinRT is the “Pull to refresh”. This feature is supported natively on both Android and iOS controls, but unfortunately not on Windows. Some might argue that this doesn’t fit in Windows apps, and that we should use the App bar instead. For me I think its just intuitive for any smart phone user to swipe down a list and expect the app to refresh the content. Also the official facebook & twitter apps implement this feature, and I think they just made the apps better.

So I created a simple control that add this feature (and the “more data on demand). The control works as expected, you swipe down and the list will fire the event “PullToRefreshRequested”.

image

To use this feature you need to set the “IsPullToRefreshEnabled” to true, and register the event “PullToRefreshRequested”:

<ctrl:ExtendedListView x:Name="listView" PullToRefreshRequested="listView_PullToRefreshRequested" IsPullToRefreshEnabled="True" />

You can edit these templates and use your own by changing the templates “PullToRefreshPartTemplate” & “LoadingPartTemplate”:

<ctrl:ExtendedListView.PullToRefreshPartTemplate>    <DataTemplate>        <TextBlock Text="Keep scrolling" Margin="25,0" FontSize="25" VerticalAlignment="Center" />    </DataTemplate></ctrl:ExtendedListView.PullToRefreshPartTemplate><ctrl:ExtendedListView.LoadingPartTemplate>    <DataTemplate>        <StackPanel Orientation="Horizontal">            <ProgressRing IsActive="True" VerticalAlignment="Center" />            <TextBlock Text="Downloading ..." Margin="25,0" FontSize="25" VerticalAlignment="Center" />        </StackPanel>    </DataTemplate></ctrl:ExtendedListView.LoadingPartTemplate>

Load more on demand

Another feature that’s missing in the ListView control is to continue loading data once the user reaches to the end of the control. Although you can implement this feature using “ISupportIncrementalLoading”, but in my onion I think it’s broken by design.

To use this feature, you will need to set the “IsMoreDataRequestedEnabled” to True, and register the “MoreDataRequested” event:

<ctrl:ExtendedListView x:Name="listView" IsMoreDataRequestedEnabled="True" MoreDataRequested="listView_MoreDataRequested" />

By default, you will see a progress bar running in the bottom of the control:

image

This part can be customized by changing the “MoreDataProgressTemplate” template:

<ctrl:ExtendedListView.MoreDataProgressTemplate>    <DataTemplate>        <TextBlock Text="Loading more data" Margin="25,0" FontSize="25" />    </DataTemplate></ctrl:ExtendedListView.MoreDataProgressTemplate>

You can find the control by searching for “ExtendedListView” on Nuget, or by typing the following command in the Nuget console:

Install-Package ExtendedListview

You’re free to use this control for any free or commercial project

Please reach me for any feature request (or bugs report) on Twitter @TareqAteik

Tareq Ateik

Read more posts by this author.