ListView交互性
通過實施選擇,滑動刪除和拉式刷新,將交互功能添加到您的ListView。
- PDF用於離線使用
- 相關樣品:
讓我們知道你對此的感受
ListView支持通過以下方式與其呈現的數據進行交互:
選擇和水龍頭
ListView
一次支持選擇一個項目。默認情況下選擇爲開啓。當用戶點擊一個項目時,會觸發兩個事件:ItemTapped
和ItemSelected
。請注意,點擊相同的項目兩次將不會觸發多個ItemSelected
事件,但會觸發多個ItemTapped
事件。還要注意,ItemSelected
如果取消選擇項目,將被調用。
請注意,ItemSelected
當項目被取消選擇並被選中時,它們被稱爲兩者。這意味着您需要SelectedItem
在ItemSelected
事件處理程序中檢查null ,然後才能使用它:
void OnSelection (object sender, SelectedItemChangedEventArgs e)
{
if (e.SelectedItem == null) {
return; //ItemSelected is called on deselection, which results in SelectedItem being set to null
}
DisplayAlert ("Item Selected", e.SelectedItem.ToString (), "Ok");
//((ListView)sender).SelectedItem = null; //uncomment line if you want to disable the visual selection state.
}
禁用選擇
如果要禁用選擇,請處理ItemSelected
事件並將SelectedItem
屬性設置爲null:
SelectionDemoList.ItemSelected += (sender, e) => {
((ListView)sender).SelectedItem = null;
};
啓用選擇:
請注意,在Windows Phone上,某些單元格,包括SwitchCell
不更新其視覺狀態以響應選擇。
上下文操作
通常,用戶將希望對某個項目採取行動ListView
。例如,考慮郵件應用程序中的電子郵件列表。在iOS上,您可以滑動以刪除郵件,在Windows Phone上,可以長按消息,然後將其刪除:
上下文動作可以在C#和XAML中實現。下面你會找到兩個具體的指南,但是首先讓我們來看看這兩個的一些關鍵的實現細節。
上下文操作使用MenuItem
s 創建。MenuItems的點擊事件由MenuItem本身引發,而不是ListView。這不同於爲單元格處理tap事件,其中ListView引發事件而不是單元格。因爲ListView正在提升事件,它的事件處理程序將被給予關鍵信息,例如選擇或點擊哪個項目。
默認情況下,MenuItem無法知道它屬於哪個單元格。CommandParameter
可MenuItem
用於存儲對象,例如MenuItem的ViewCell後面的對象。CommandParameter
可以在XAML和C#中設置。
C#
可以Cell
通過創建MenuItem
s並將其添加到ContextActions
單元的集合中,在任何子類中實現上下文操作(只要它不被用作組頭)。您可以爲上下文操作配置以下屬性:
- 文本 - 菜單項中顯示的字符串。
- 點擊 - 點擊項目時的事件。
- IsDestructive - (可選)當爲true時,該項目在iOS上的呈現方式不同。
可以將多個上下文操作添加到單元格中,但只能IsDestructive
設置一個true
。以下代碼演示瞭如何將上下文操作添加到ViewCell
:
var moreAction = new MenuItem { Text = "More" };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
Debug.WriteLine("More Context Action clicked: " + mi.CommandParameter);
};
var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background
deleteAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
deleteAction.Clicked += async (sender, e) => {
var mi = ((MenuItem)sender);
Debug.WriteLine("Delete Context Action clicked: " + mi.CommandParameter);
};
// add to the ViewCell's ContextActions property
ContextActions.Add (moreAction);
ContextActions.Add (deleteAction);
XAML
MenuItem
也可以聲明地在XAML集合中創建。下面的XAML演示了實現了兩個上下文操作的自定義單元格:
<ListView x:Name="ContextDemoList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="OnMore" CommandParameter="{Binding .}"
Text="More" />
<MenuItem Clicked="OnDelete" CommandParameter="{Binding .}"
Text="Delete" IsDestructive="True" />
</ViewCell.ContextActions>
<StackLayout Padding="15,0">
<Label Text="{Binding title}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
在代碼隱藏文件中,確保實現Clicked
方法:
public void OnMore (object sender, EventArgs e) {
var mi = ((MenuItem)sender);
DisplayAlert("More Context Action", mi.CommandParameter + " more context action", "OK");
}
public void OnDelete (object sender, EventArgs e) {
var mi = ((MenuItem)sender);
DisplayAlert("Delete Context Action", mi.CommandParameter + " delete context action", "OK");
}
拉動刷新
用戶已經預期下拉列表的數據將刷新該列表。ListView
支持這個開箱即用的。要啓用拉到刷新功能,設置IsPullToRefreshEnabled
爲true:
listView.IsPullToRefreshEnabled = true;
用戶拉動時拉動刷新:
當用戶釋放拉時,拉到刷新。這是用戶在更新列表時看到的內容:
請注意,從Xamarin.Forms 1.4.3起,Windows Phone 8.1不支持拉式刷新。在Windows Phone 8上,拉入刷新不是本機平臺的功能,所以Xamarin.Forms提供了拉入刷新的實現。最後,請注意,如果列表中的所有元素都可以適合屏幕(換句話說,如果不需要垂直滾動),則拉拔更新將無法在Windows Phone上運行。
ListView公開了一些允許您迴應到刷新事件的事件。
- 在
RefreshCommand
將被調用和Refreshing
稱爲事件。IsRefreshing
將被設置爲true
。 - 您應該在命令或事件中執行刷新列表視圖內容所需的任何代碼。
- 當刷新完成後,調用
EndRefresh
或設置IsRefreshing
來false
告訴你做的列表視圖。
該CanExecute
屬性受到尊重,這爲您提供了一種方法來控制是否啓用“拉到刷新”命令。