How to add a pull to refresh functionality to UWP app

Introduction

We have seen the pull-down-and-release-to-refresh gesture in different mobile phone apps, that is when users pull at the top/bottom of the app, app will get refreshed items, which gives app users a better animation UI experience when it’s needed to fetch new data and update UI.

But there is no direct control to achieve this goal, here is an implementation for windows runtime app (windows store and windows phone app), when pulling down at the top of the app and release, an animation occurs indicating a refresh.

Prerequisites

• Visual Studio 2013 with windows phone SDK installed and Windows 8.1

Running the Sample

• Download and open the solution in Visual Studio

• Set the windows phone project as the startup project

• Build and run the app, pull down at the top of the app and release, an animation occurs indicating a refresh.

Using the Code

• Create a Universal Apps Application project in Visual Studio.

We use the Blank App (Universal Apps) template in this demo.

• In the Solution Explorer, edit the MainPage.xaml in the windows phone or windows project  

The idea is to take advantage of a feature called “scroll chaining” (ScrollViewer.ChangeView to bring a view into viewport). In the demo app, a List View in placed inside another ScrollViewer which contains the visual for pull to refresh.

Animation (implemented in VisualStateGroup PullToRefreshStates ) is set on a red Rectangle which indicates refreshing, you could customize accordingly. By calling ChangeView, you could also set some other state.

 

XAML
Edit|Remove
<VisualStateManager.VisualStateGroups<VisualStateGroup x:Name="PullToRefreshStates"<VisualState x:Name="Idle"/> 
<VisualState x:Name="Refreshing"<Storyboard RepeatBehavior="Forever"<DoubleAnimation Storyboard.TargetName="refreshIndicator" 
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
From="0" 
To="360"/> 
</Storyboard> 
</VisualState> 
</VisualStateGroup> 
</VisualStateManager.VisualStateGroups>
 

 

 

C#
Edit|Remove
void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
for (int i = 0; i < 1000; i++) 
{ 
this.listView.Items.Add("Item " + i.ToString()); 
} 
  
this.pullToRefreshThreshold = this.refreshVisual.Height; 
this.pullToRefreshScroller.ChangeView(0this.pullToRefreshThreshold, null); 
} 
  
void pullToRefreshScroller_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 
{ 
if (this.pullToRefreshScroller.VerticalOffset < this.pullToRefreshThreshold) 
{ 
if (!e.IsIntermediate) 
{ 
this.pullToRefreshScroller.ChangeView(0this.pullToRefreshThreshold, null); 
VisualStateManager.GoToState(this"Idle"true); 
} 
else 
{ 
if (this.pullToRefreshScroller.VerticalOffset == 0) 
{ 
VisualStateManager.GoToState(this"Refreshing"true); 
} 
} 
} 
}
 

 

 

Microsoft All-In-One Code Framework is a free, centralized code sample library driven by developers' real-world pains and needs. The goal is to provide customer-driven code samples for all Microsoft development technologies, and reduce developers' efforts in solving typical programming tasks. Our team listens to developers’ pains in the MSDN forums, social media and various DEV communities. We write code samples based on developers’ frequently asked programming tasks, and allow developers to download them with a short sample publishing cycle. Additionally, we offer a free code sample request service. It is a proactive way for our developer community to obtain code samples directly from Microsoft.