ListView 대화형 작업ListView 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:

두 실행은 동일한 항목을 두 번 눌러 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. ListView 하지 MenuItem 자체에서 MenuItems에 대 한 탭 이벤트가 발생 합니다.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.

기본적으로 MenuItem에 속하는 셀을 알 수 없습니다.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.

하지만 여러 상황에 맞는 작업 하나만 있어야 셀에 추가할 수 있습니다 IsDestructivetrue합니다.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 이-의-기본을 지원합니다.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.