Post
Ask Question

PullToRefereshListView Control In UWP With XAML And C#

Before reading this article, please go through the following article.

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
  2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

The PullToRefreshListView Control is derived from the built-in List View in XAML. It lets the users pull down beyond the top limit on the listview to trigger a refresh of the content. This control can create rich animations, and is easy to use.

This control is very common on mobile devices where the user can pull from the top, to force a content refresh in applications like Twitter.

Reading this article, you can learn how to use UWP Tool Kit Control – PullToRefereshListView in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C# -> Windows) -> Blank App -> give it a suitable name (e.g. - UWP PullToReferesh) -> OK.
 


Step 2 - Choose the Target and Minimum platform versions that your Universal Windows application will support. 



After this, the project creates App.xaml and MainPage.xaml. For adding UWPToolKit Control, please refer- How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3 - Add TextBlock control and change the name and text property for title.



Step 4 - Add images in the Assets folder, for PullToRefereshListView.



Step 5 - Add UWP Tool Kit namespace in MainPage.xaml.

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add PullToRefereshListView Control from UWP Tool Kit and change the name property.



Step 6 - Add the following Xaml code for creating data template for PullToRefereshListView control.

  1. <Controls:PullToRefreshListView.RefreshIndicatorContent>  
  2.     <Image Height="50"></Image>  
  3. </Controls:PullToRefreshListView.RefreshIndicatorContent>  
  4. <Controls:PullToRefreshListView.ItemTemplate>  
  5.     <DataTemplate>  
  6.         <Grid>  
  7.             <Image Source="{Binding IName}" Stretch="UniformToFill" /> </Grid>  
  8.     </DataTemplate>  
  9. </Controls:PullToRefreshListView.ItemTemplate>  


Step 7 - Create a RefreshRequested event method for PullToRefereshListView.



Note- Automatically, the following code will be generated in XAML code View when we are done with the design View.
  1. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPPullToReferesh" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPPullToReferesh.MainPage" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="179,50,0,0" TextWrapping="Wrap" Text="Pull To Referesh List View control Test" VerticalAlignment="Top" FontSize="18" FontWeight="Bold" />  
  4.         <Controls:PullToRefreshListView x:Name="PTRLVtest" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="136,126,0,0" Width="407" Height="189" RefreshRequested="PTRLVtest_RefreshRequested">  
  5.             <Controls:PullToRefreshListView.RefreshIndicatorContent>  
  6.                 <Image Height="50"></Image>  
  7.             </Controls:PullToRefreshListView.RefreshIndicatorContent>  
  8.             <Controls:PullToRefreshListView.ItemTemplate>  
  9.                 <DataTemplate>  
  10.                     <Grid>  
  11.                         <Image Source="{Binding IName}" Stretch="UniformToFill" /> </Grid>  
  12.                 </DataTemplate>  
  13.             </Controls:PullToRefreshListView.ItemTemplate>  
  14.         </Controls:PullToRefreshListView>  
  15.     </Grid>  
  16. </Page>  
Step 8 - Add namespace and the following code in MainPage.xaml.cs.
  1. using System.Collections.ObjectModel;  
  2. public class MenuItem {  
  3.     public string IName {  
  4.         get;  
  5.         set;  
  6.     }  
  7. }  
  8. private readonly ObservableCollection < MenuItem > img;  
  9. public MainPage() {  
  10.     this.InitializeComponent();  
  11.     PTRefresh();  
  12. }  
  13. public void PTRefresh() {  
  14.     var img = new List < MenuItem > ();  
  15.     for (int i = 0; i < 25; i++) {  
  16.         img.Add(new MenuItem() {  
  17.             IName = "ms-appx:///Assets//01.png"  
  18.         });  
  19.     }  
  20.     PTRLVtest.ItemsSource = img;  
  21. }  
  22. private void PTRLVtest_RefreshRequested(object sender, EventArgs e) {  
  23.     PTRefresh();  
  24. }  


Step 9 - Now, deploy your app in Local Machine. The output of the UWPPullToReferesh App is shown below.



Summary - So, you have successfully tested UWP Tool Kit – PullToRefereshListView Control in Visual C# - UWP environment. 


Similar Articles