ListView 대화형 작업ListView interactivity

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.ios ListView 클래스는 표시 되는 데이터와의 사용자 상호 작용을 지원 합니다.The Xamarin.Forms ListView class supports user interaction with the data it presents.

선택 및 탭Selection and taps

@No__t_1 선택 모드는 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.

참고

@No__t_3 이벤트에 대 한 이벤트 인수를 포함 하는 ItemTappedEventArgs 클래스에는 GroupItem 속성이 있으며 해당 값이 탭 항목의 ItemIndex 에 있는 인덱스를 나타내는 0 속성이 있습니다.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. 마찬가지로, ItemSelected 이벤트에 대 한 이벤트 인수를 포함 하는 SelectedItemChangedEventArgs 클래스에는 SelectedItem 속성이 있으며 해당 값이 선택 된 항목의 ListView에 있는 인덱스를 나타내는 SelectedItemIndex 속성이 있습니다.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.

@No__t_1 속성이 Single로 설정 된 경우 ListView 의 항목을 선택할 수 있으며, ItemSelectedItemTapped 이벤트가 발생 하 고 SelectionMode1 속성이 선택 된 값으로 설정 됩니다. 항목만.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.

@No__t_1 속성이 None로 설정 된 경우 ListView 의 항목을 선택할 수 없으며 ItemSelected 이벤트가 발생 하지 않으며 SelectedItem 속성이 SelectionMode0 유지 됩니다.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로 설정 되 고 0 이벤트가 1 항목으로 발생 합니다.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:

선택 사용 안 함Disable selection

@No__t_1 선택을 사용 하지 않도록 설정 하려면 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:

컨텍스트 작업은 및 XAML에서 C# 구현 될 수 있습니다.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.

@No__t_0 요소를 사용 하 여 컨텍스트 작업을 만듭니다.Context Actions are created using MenuItem elements. @No__t_0 개체에 대 한 탭 이벤트는 ListView 아닌 MenuItem 자체에 의해 발생 합니다.Tap events for MenuItems objects 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. @No__t_0에서 이벤트를 발생 시키기 때문에 해당 이벤트 처리기에는 선택 하거나 탭 하는 항목과 같은 키 정보가 제공 됩니다.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. @No__t_0 속성은 MenuItemViewCell 뒤에 있는 개체와 같은 개체를 저장 하는 MenuItem에서 사용할 수 있습니다.The CommandParameter property is available on MenuItem to store objects, such as the object behind the MenuItem's ViewCell. @No__t_0 속성은 XAML 및 C#에서 설정할 수 있습니다.The CommandParameter property can be set in both XAML and C#.

XAMLXAML

MenuItem 요소는 XAML 컬렉션에서 만들 수 있습니다.MenuItem elements can be created in a XAML collection. 다음 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");
}

참고

Android 용 NavigationPageRenderer에는 사용자 지정 Drawable에서 아이콘을 로드 하는 데 사용할 수 있는 재정의 가능한 UpdateMenuItemIcon 메서드가 있습니다.The NavigationPageRenderer for Android has an overridable UpdateMenuItemIcon method that can be used to load icons from a custom Drawable. 이 재정의를 통해 Android의 MenuItem 인스턴스에서 SVG 이미지를 아이콘으로 사용할 수 있습니다.This override makes it possible to use SVG images as icons on MenuItem instances on Android.

코드Code

컨텍스트 작업은 MenuItem 인스턴스를 만들고 해당 셀에 대 한 ContextActions 컬렉션에 추가 하 여 Cell 하위 클래스 (그룹 헤더로 사용 되지 않는 한)에서 구현 될 수 있습니다.Context actions can be implemented in any Cell subclass (as long as it isn't being used as a group header) by creating MenuItem instances 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.

여러 컨텍스트 작업을 셀에 추가할 수 있지만 하나는 trueIsDestructive 설정 해야 합니다.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);

새로 고치려면 끌어오기Pull to refresh

사용자가 데이터 목록에서 아래로 끌면 해당 목록이 새로 고쳐집니다.Users have come to expect that pulling down on a list of data will refresh that list. @No__t_1 컨트롤은이 기능을 지원 합니다.The ListView control supports this out-of-the-box. 끌어오기-새로 고침 기능을 사용 하도록 설정 하려면 IsPullToRefreshEnabledtrue으로 설정 합니다.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. 그러나 RefreshControlColor 속성을 Color설정 하 여 IOS 및 Android에서 회전자 색을 변경할 수 있습니다.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. @No__t_0 콘텐츠를 새로 고치는 데 필요한 모든 코드는 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. @No__t_0를 새로 고치면 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.

참고

@No__t_1를 정의할 때 명령의 CanExecute 메서드를 지정 하 여 명령을 사용 하거나 사용 하지 않도록 설정할 수 있습니다.When defining a RefreshCommand, the CanExecute method of the command can be specified to enable or disable the command.

스크롤 검색Detect scrolling

ListView 은 스크롤이 발생 했음을 나타내기 위해 발생 하는 Scrolled 이벤트를 정의 합니다.ListView defines a Scrolled event that's fired to indicate that scrolling occurred. 다음 XAML 예제에서는 Scrolled 이벤트에 대 한 이벤트 처리기를 설정 하는 ListView 보여 줍니다.The following XAML example shows a ListView that sets an event handler for the Scrolled event:

<ListView Scrolled="OnListViewScrolled">
    ...
</ListView>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

ListView listView = new ListView();
listView.Scrolled += OnListViewScrolled;

이 코드 예제에서는 Scrolled 이벤트가 발생 하면 OnListViewScrolled 이벤트 처리기가 실행 됩니다.In this code example, the OnListViewScrolled event handler is executed when the Scrolled event fires:

void OnListViewScrolled(object sender, ScrolledEventArgs e)
{
    Debug.WriteLine("ScrollX: " + e.ScrollX);
    Debug.WriteLine("ScrollY: " + e.ScrollY);  
}

@No__t_0 이벤트 처리기는 이벤트와 함께 제공 되는 ScrolledEventArgs 개체의 값을 출력 합니다.The OnListViewScrolled event handler outputs the values of the ScrolledEventArgs object that accompanies the event.