Xamarin FAQ 2-20 : 在ListView中，如何實作出下拉更新的手勢操作

問題

Xamarin.Forms 的 ListView 是否有支援手勢更新的功能，也就是說，當使用者在 ListView 最前面的紀錄是第一筆紀錄的時候，可以使用手指由上往下滑動 ListView，如此，就可以即時更新到最新的資料。

解答

首先，我們先來建立一個頁面，裡面有個 ListView 控制項，看看有那些地方是需要設定的。

在下方的 ListView 標機宣告中，我們使用了

• IsPullToRefreshEnabled="True"
  設定這個 ListView 需要啟用下拉更新的手勢操作
• RefreshCommand="{Binding ListView更新資料Command}"
  當 ListView 偵測到您有下拉更新的手勢操作行為時候，這個 RefreshCommand 所綁定的命令，將會被執行；在這個 ICommand 命令中，我們將會更新 DataItemList 的集合資料內容
• IsRefreshing="{Binding IsBusy}"
  IsRefreshing 將會顯示一個忙碌中的視覺，讓使用者知道 ListView 正在更新資料中，不過，當更新完成資料後，將會設定 IsBusy 的值為 False，這樣，忙碌中的視覺就不會出現了。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFListViewRefresh.Views.MainPage"
             Title="ListView下拉更新">

    <StackLayout 
      Margin="20"
      HorizontalOptions="Fill" VerticalOptions="Fill">
        <Label Text="{Binding Title}" />
        <ListView
            HorizontalOptions="Fill" VerticalOptions="FillAndExpand"
            ItemsSource="{Binding DataItemList}"
            IsPullToRefreshEnabled="True"
            HasUnevenRows="True"
            RefreshCommand="{Binding ListView更新資料Command}"
            IsRefreshing="{Binding IsBusy}"
            >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid
                            RowSpacing="0" ColumnSpacing="0"
                            >
                            <Label Text="{Binding DataVale}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

要進行下拉更新命令的時候，可以類似底下的處理動作。

            ListView更新資料Command = new DelegateCommand(() =>
            {
                IsBusy = true;
                Refresh();
                IsBusy = false;
            });