Интерактивность ListViewListView Interactivity

Скачать пример Скачать примерDownload Sample Download the sample

ListView поддерживает взаимодействие с данными, которые она представляет.ListView supports interacting with the data it presents.

Выбор & касанияSelection & Taps

ListView Режим выбора управляется заданием ListView.SelectionMode свойство в значение ListViewSelectionMode перечисления:The ListView selection mode is controlled by setting the ListView.SelectionMode property to a value of the ListViewSelectionMode enumeration:

  • Single Указывает, что элемент можно выбрать, с выбранным элементом выделена.Single indicates that a single item can be selected, with the selected item being highlighted. Это значение по умолчанию.This is the default value.
  • None Указывает, что элементы не могут быть выбраны.None indicates that items cannot be selected.

При касании элемента, два события инициируются:When a user taps an item, two events are fired:

  • ItemSelected активируется, когда элемент выбран.ItemSelected fires when a new item is selected.
  • ItemTapped возникает при нажатии элемента.ItemTapped fires when an item is tapped.

При касании тот же элемент дважды будет срабатывать два ItemTapped события, но будет только вызов одной ItemSelected событий.Tapping the same item twice will fire two ItemTapped events, but will only fire a single ItemSelected event.

Примечание

ItemTappedEventArgs Класс, который содержит аргументы события для ItemTapped события, Group и Item свойства и ItemIndex свойство, значение которого представляет индекс в массиве ListView полученные элемента.The ItemTappedEventArgs class, which contains the event arguments for the ItemTapped event, has Group and Item properties, and an ItemIndex property whose value represents the index in the ListView of the tapped item. Аналогичным образом SelectedItemChangedEventArgs класс, который содержит аргументы события для ItemSelected события, SelectedItem свойство и SelectedItemIndex свойство, значение которого представляет индекс в массиве ListView выбранного элемента.Similarly, the SelectedItemChangedEventArgs class, which contains the event arguments for the ItemSelected event, has a SelectedItem property, and a SelectedItemIndex property whose value represents the index in the ListView of the selected item.

Когда SelectionMode свойству Single , элементы в ListView можно выбрать, ItemSelected и ItemTapped события порождаются и SelectedItem свойству будет присвоено значение выбранного элемента.When the SelectionMode property is set to Single, items in the ListView can be selected, the ItemSelected and ItemTapped events will be fired, and the SelectedItem property will be set to the value of the selected item.

Когда SelectionMode свойству None , элементы в ListView не могут быть выбраны, ItemSelected не будет создаваться событие и SelectedItem свойство будет оставаться null.When the SelectionMode property is set to None, items in the ListView cannot be selected, the ItemSelected event will not be fired, and the SelectedItem property will remain null. Тем не менее ItemTapped события по-прежнему будет создаваться и полученные элемента будут кратко выделены во время прослушивания.However, ItemTapped events will still be fired and the tapped item will be briefly highlighted during the tap.

Если был выбран элемент и SelectionMode свойство меняется с Single для None , SelectedItem свойству будет присвоено null и ItemSelected событие будет запускаться с null элемента.When an item has been selected and the SelectionMode property is changed from Single to None, the SelectedItem property will be set to null and the ItemSelected event will be fired with a null item.

Ниже показаны снимки экрана ListView с режимом выделения по умолчанию:The following screenshots show a ListView with the default selection mode:

Отключение выделенияDisabling Selection

Чтобы отключить ListView набора SelectionMode свойства None :To disable ListView selection set the SelectionMode property to None:

<ListView ... SelectionMode="None" />
var listView = new ListView { ... SelectionMode = ListViewSelectionMode.None };

Контекстные действияContext Actions

Часто пользователей потребуется выполнить действие на элемент в ListView.Often, users will want to take action on an item in a ListView. Например рассмотрим список адресов электронной почты в почтовом приложении.For example, consider a list of emails in the Mail app. В iOS можно проведите, чтобы удалить сообщение::On iOS, you can swipe to delete a message::

Контекстные действия можно реализовать в C# и XAML.Context actions can be implemented in C# and XAML. Далее вы найдете определенных направляющих для обоих, но сперва давайте взглянем на некоторые ключевые особенности реализации для обоих.Below you'll find specific guides for both, but first let's take a look at some key implementation details for both.

Контекстные действия создаются с помощью MenuItems.Context Actions are created using MenuItems. События касания для MenuItems вызываются с помощью MenuItem, не ListView.Tap events for MenuItems are raised by the MenuItem itself, not the ListView. Это отличается от обработки события касания для ячеек, где ListView инициирует событие, а не ячейку.This is different from how tap events are handled for cells, where the ListView raises the event rather than the cell. Поскольку ListView порождает событие, соответствующий обработчик событий получает сведения о ключе, например которого выбран или касание элемента.Because the ListView is raising the event, its event handler is given key information, like which item was selected or tapped.

По умолчанию элемент меню не имеет возможности узнать, какая ячейка, в которой он принадлежит.By default, a MenuItem has no way of knowing which cell it belongs to. CommandParameter можно найти в MenuItem для хранения объектов, таких как объект MenuItem ViewCell.CommandParameter is available on MenuItem to store objects, such as the object behind the MenuItem's ViewCell. CommandParameter можно задать в XAML и C#.CommandParameter can be set in both XAML and C#.

C#C#

Контекстные действия может быть реализован ни в одном Cell подкласс (пока она не используется в качестве заголовка группы), создав MenuItems и добавления их в ContextActions коллекции для ячейки.Context actions can be implemented in any Cell subclass (as long as it isn't being used as a group header) by creating MenuItems and adding them to the ContextActions collection for the cell. У вас есть следующие свойства можно настроить для контекста действия:You have the following properties can be configured for the context action:

  • Текст – строка, которая появляется в элементе меню.Text – the string that appears in the menu item.
  • Нажата – события при щелчке элемента.Clicked – the event when the item is clicked.
  • IsDestructive – (Дополнительно) Если значение true, элемент отображается по-разному в iOS.IsDestructive – (optional) when true the item is rendered differently on iOS.

Несколько контекстных действий можно добавить в ячейку, однако должны иметь только один IsDestructive присвоено true.Multiple context actions can be added to a cell, however only one should have IsDestructive set to true. В следующем коде показано, как будут добавлены контекстные действия ViewCell:The following code demonstrates how context actions would be added to a 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);

XAMLXAML

MenuItems могут также создаваться в коллекции XAML декларативно.MenuItems can also be created in a XAML collection declaratively. Ниже XAML демонстрирует настраиваемой ячейки с реализованы два контекстных действий:The XAML below demonstrates a custom cell with two context actions implemented:

<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 реализуются методы:In the code-behind file, ensure the Clicked methods are implemented:

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");
}

Примечание

NavigationPageRenderer Для Android имеет переопределяемый UpdateMenuItemIcon метод, который может использоваться для загрузки значки из настраиваемого Drawable.The NavigationPageRenderer for Android has an overridable UpdateMenuItemIcon method that can be used to load icons from a custom Drawable. Это переопределение позволяет использовать изображения SVG в виде значков на MenuItem экземпляров на Android.This override makes it possible to use SVG images as icons on MenuItem instances on Android.

Потяните, чтобы обновитьPull to Refresh

Пользователи привыкли, потянув вниз по списку данных обновит этого списка.Users have come to expect that pulling down on a list of data will refresh that list. ListView поддерживает этот out-of--box.ListView supports this out-of-the-box. Чтобы включить функцию по запросу для обновления, задайте IsPullToRefreshEnabled для true:To enable pull-to-refresh functionality, set IsPullToRefreshEnabled to true:

<ListView ...
          IsPullToRefreshEnabled="true" />

Ниже приведен аналогичный код C#:The equivalent C# code is:

listView.IsPullToRefreshEnabled = true;

Счетчик появляется во время обновления, который является черной по умолчанию.A spinner appears during the refresh, which is black by default. Тем не менее, цвет "Счетчик" можно изменить в iOS и Android, задав RefreshControlColor свойства Color :However, the spinner color can be changed on iOS and Android by setting the RefreshControlColor property to a Color:

<ListView ...
          IsPullToRefreshEnabled="true"
          RefreshControlColor="Red" />

Ниже приведен аналогичный код C#:The equivalent C# code is:

listView.RefreshControlColor = Color.Red;

На следующих снимках экрана показано по запросу для обновления, как пользователь извлекает:The following screenshots show pull-to-refresh as the user is pulling:

Далее на снимках экрана Показывать по запросу для обновления после Пользователь отпустил по запросу, с "Счетчик", который отображается во время ListView обновляется:The following screenshots show pull-to-refresh after the user has released the pull, with the spinner being shown while the ListView is updating:

ListView активируется Refreshing событий инициировать обновление и IsRefreshing свойству будет присвоено true.ListView fires the Refreshing event to initiate the refresh, and the IsRefreshing property will be set to true. Любой код не требуется, чтобы обновить содержимое ListView затем должна выполняться с помощью обработчика событий для Refreshing событий, или с помощью метода, выполняемая RefreshCommand .Whatever code is required to refresh the contents of the ListView should then be executed by the event handler for the Refreshing event, or by the method executed by the RefreshCommand. Один раз ListView обновляется и IsRefreshing свойство должно быть присвоено false, или EndRefresh метод должен вызываться, для указания выполнения обновления.Once the ListView is refreshed, the IsRefreshing property should be set to false, or the EndRefresh method should be called, to indicate that the refresh is complete.

Примечание

При определении RefreshCommand , CanExecute метод команды можно задать, чтобы включить или отключить команду.When defining a RefreshCommand, the CanExecute method of the command can be specified to enable or disable the command.