Xamrin.Forms 用戶界面——控件——ListView——ListView 交互

ListView交互性

通過實施選擇,滑動刪除和拉式刷新,將交互功能添加到您的ListView。

PDF用於離線使用
相關樣品:

讓我們知道你對此的感受

ListView支持通過以下方式與其呈現的數據進行交互:

  • 選擇和水龍頭 - 響應水龍頭和選擇/取消選擇項目。啓用或禁用行選擇(默認情況下啓用)。
  • 上下文操作 - 顯示每個項目的功能,例如,滑動到刪除。
  • 拉扯刷新 - 實現用戶從本地體驗中獲得的拉扯到刷新習慣。

選擇和水龍頭

ListView一次支持選擇一個項目。默認情況下選擇爲開啓。當用戶點擊一個項目時,會觸發兩個事件:ItemTappedItemSelected。請注意,點擊相同的項目兩次將不會觸發多個ItemSelected事件,但會觸發多個ItemTapped事件。還要注意,ItemSelected如果取消選擇項目,將被調用。

請注意,ItemSelected當項目被取消選擇並被選中時,它們被稱爲兩者。這意味着您需要SelectedItemItemSelected事件處理程序中檢查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中實現。下面你會找到兩個具體的指南,但是首先讓我們來看看這兩個的一些關鍵的實現細節。

上下文操作使用MenuItems 創建。MenuItems的點擊事件由MenuItem本身引發,而不是ListView。這不同於爲單元格處理tap事件,其中ListView引發事件而不是單元格。因爲ListView正在提升事件,它的事件處理程序將被給予關鍵信息,例如選擇或點擊哪個項目。

默認情況下,MenuItem無法知道它屬於哪個單元格。CommandParameterMenuItem用於存儲對象,例如MenuItem的ViewCell後面的對象。CommandParameter可以在XAML和C#中設置。

C#

可以Cell通過創建MenuItems並將其添加到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或設置IsRefreshingfalse告訴你做的列表視圖。

CanExecute屬性受到尊重,這爲您提供了一種方法來控制是否啓用“拉到刷新”命令。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章