[ Xamarin ] 資料清單下拉更新

資料清單是幾乎所有 App 都會有的設計,而資料更新除了背景自動更新,以及提供重新整理的按鈕更新之外,最常見的就是在資料清單上往下拉直接做資料更新,這樣的操作在 Xamarin.forms 的 ListView 控制項上,可以透過 IsPullToRefreshEnabled 屬性打開資料整理的 UI 效果,搭配 Refreshing 事件實作資料更新邏輯。

首先要營造出重新整理的動畫效果,只需要把 IsPullToRefreshEnabled 屬性打開,就可以讓使用者在畫面下拉手勢操作時,顯示出 Loading 效果,但這僅僅只有 UI 效果,實際上要做資料更新還是要寫點程式的,接下來就直接透過範例來說明。

建立一個簡單的 Personal Model ,只具備二個屬性,No 及 Name

public class Personal
    {
        public int No { get; set; }
        public String Name { get; set; }
    }

接著在 ViewModel 部份,建立 PersonalViewModel 做為 View Binding 資料使用,並且實作 INotifyPropertyChanged 介面,預設初始化時會有一筆資料

public event PropertyChangedEventHandler PropertyChanged;
private ObservableCollection<Personal> _personals = new ObservableCollection<Personal>();
public ObservableCollection<Personal> Personals
{
	get
	{
		return _personals;
	}
	set
	{
		PropertyChanged(this, new PropertyChangedEventArgs("Personals"));
	}
}

public PersonalViewModel()
{
   GetData();
}
void GetData()
{
	_personals.Add(new Personal()
	{
		No = 1,
		Name = "Ian"
	});
}

View 的部份也就是 XAML ,放置 ListView 控制項並設定好資料繫結

<ListView x:Name="DemoList">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Padding="15,0">
            <Label Text="{Binding No}" />
            <Label Text="{Binding Name}" />
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

View 的背後程式碼,除了指定 ListView 的 ItemsSource外,如同一開始說的,把 IsPullToRefreshEnabled 設為 true ,當使用進行手勢下拉的操作時,Refreshing 事件將會被叫用,另外 IsRefreshing 也會被設置為 true ,換句話說資料的更新邏輯可以寫在 Refreshing 事件裡,當資料重新取得後,記得再把 IsRefreshing 設為 false ,ListView 控制項就會知道你的動作已經完成了。

PersonalViewModel _pvm = new PersonalViewModel();
public MainPage()
{
	InitializeComponent();

	this.DemoList.ItemsSource = _pvm.Personals;
	this.DemoList.IsPullToRefreshEnabled = true;
	this.DemoList.Refreshing += DemoList_Refreshing;
}

private void DemoList_Refreshing(object sender, EventArgs e)
{
	_pvm.Personals.Add(new Models.Personal()
	{
		No = _pvm.Personals.Count + 1,
		Name = "Ian" + _pvm.Personals.Count + 1
	});
	this.DemoList.IsRefreshing = false;
}

可以看見的是在 Refreshing 事件裡,我只針對 PersonalViewModel 做處理,並沒有再針對 ListView 做資料的重新繫結,原因是 PersonalViewModel 本身有實作 INotifyPropertyChanged ,所以當它的屬性值改變時,則相對繫結該屬性的 UI 也會收到通知而做更新。

完整Demo專案:https://github.com/iangithub/Xamarin-Forms-HoL/tree/master/XAppListViewPullToRefresh

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18