Post
Ask Question

PullToRefresh ListView For Windows 10 UWP App Using Community Toolkit

Windows 10 UWP Community Toolkit is a collection of a helper class, custom controls, and application services. PullToRefresh controls the user to pull down the ListView to trigger a refresh of the content. This control can create rich animations, and it’s easy to implement.

Create a new Windows 10 UWP project or open your existing project. Right click on your project and select Manage NuGet Packages. Search for Microsoft.Toolkit.UWP.UI.Controls and install it, as shown below:

install

This will add Microsoft.Toolkit.Uwp.UI.Controls.dll in 'References' of your project, as shown below.

solution

Add the toolkit reference in your XAML pages, using the code given below:

XAML

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

Now, open your XAML page and write the code.

  1. <Grid Padding="20" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  2.     <UWPToolkit:PullToRefreshListView x:Name="pullList" OverscrollLimit="0.4" PullThreshold="10" RefreshRequested="ListView_RefreshCommand" PullProgressChanged="ListView_PullProgressChanged" Background="#FF997D7D">  
  3.         <UWPToolkit:PullToRefreshListView.RefreshIndicatorContent>  
  4.             <TextBlock Height="50" Text="Pull" FontSize="26" Foreground="Black"></TextBlock>  
  5.         </UWPToolkit:PullToRefreshListView.RefreshIndicatorContent>  
  6.         <UWPToolkit:PullToRefreshListView.ItemTemplate>  
  7.             <DataTemplate>  
  8.                 <TextBlock Text="{Binding Name}"></TextBlock>  
  9.             </DataTemplate>  
  10.         </UWPToolkit:PullToRefreshListView.ItemTemplate>  
  11.     </UWPToolkit:PullToRefreshListView>  
  12. </Grid>  
Define the data template for listing the item. Using PullToRefreshListViewRefreshIndicatorContent you can design the pull control. Here, I add textblock.RefreshRequested event handler help to handle your pull request.

Go to the code behind page and write the below code to assign the menu item and RefreshRequested event handler.
  1. public MainPage()  
  2. {  
  3.     this.InitializeComponent();  
  4.     Refresh();  
  5. }  
  6. private readonly ObservableCollection < MenuItem > _items;  
  7. public void Refresh() {  
  8.     var items = new List < MenuItem > ();  
  9.     for (int i = 0; i < 50; i++) {  
  10.         items.Add(new MenuItem() {  
  11.             Name = "Suresh M"  
  12.         });  
  13.         items.Add(new MenuItem() {  
  14.             Name = "Microsoft MVP"  
  15.         });  
  16.         items.Add(new MenuItem() {  
  17.             Name = "C# Corner MVP"  
  18.         });  
  19.     }  
  20.     pullList.ItemsSource = items;  
  21. }  
  22. public class MenuItem {  
  23.     public string Name {  
  24.         get;  
  25.         set;  
  26.     }  
  27. }  
  28. private void ListView_RefreshCommand(object sender, EventArgs e) {  
  29.     Refresh();  
  30. }  
Now, run the app and check. The output looks like the following image.

app

Note: Pull Request works on touch screen or using touchpad only. So, if you are trying with mouse, it won’t work.

For more details on developing Windows 10 UWP App, refer to my e-book 


Similar Articles