Interaktivita objektu ListView

Stáhnout ukázku Stažení ukázky

Třída Xamarin.FormsListView podporuje interakci uživatele s daty, která prezentuje.

Výběr a klepnutí

Režim výběru se řídí nastavením ListViewListView vlastnosti Xamarin_Forms _ListView_SelectionMode" data-linktype="absolute-path">na hodnotu ListView.SelectionModeListViewSelectionMode výčtu:

Když uživatel klepne na položku, jsou aktivovány dvě události:

  • ItemSelected se zobrazí, když je vybraná nová položka.
  • ItemTapped se zobrazí, když je položka klepnutá.

Když dvakrát klepnete na stejnou položku, vyžádá se dvě události, ale ItemTapped vyžádá se jenom jedna ItemSelected událost.

Poznámka

Třída , která obsahuje argumenty události, má vlastnosti ItemTappedEventArgsItemTapped _ItemTappedEventArgs_Group Xamarin_Forms ItemTappedEventArgs data-linktype="absolute-path">a Group Xamarin_Forms ItemTapped _ItemTappedEventArgs_Item" data-linktype="absolute-path">a vlastnost, ItemItemIndexListView jejíž hodnota představuje index u klepané položky. Podobně má třída , která obsahuje argumenty události pro SelectedItemChangedEventArgsItemSelected událost, SelectedItemChangedEventArgs vlastnost Xamarin_Forms _SelectedItemChangedEventArgs_SelectedItem" data-linktype="absolute-path">SelectedItem a vlastnost, SelectedItemIndex jejíž ListView hodnota představuje index vybrané položky.

Když je vlastnost _ListView_SelectionMode" data-linktype="absolute-path">nastavená na Xamarin_Forms _ListViewSelectionMode_Single" data-linktype="absolute-path">, položky v objektu lze vybrat, události a se aktivují a SelectionMode vlastnost SelectionMode Xamarin_Forms SingleListViewItemSelectedItemTapped _ListView_SelectedItem" data-linktype="absolute-path">SelectedItem se nastaví na hodnotu vybrané položky.

Pokud je vlastnost _ListView_SelectionMode" data-linktype="absolute-path">nastavená na Xamarin_Forms _ListViewSelectionMode_None" data-linktype="absolute-path">, položky v objektu nelze vybrat, událost nebude aktivována a SelectionMode vlastnost SelectionMode Xamarin_Forms NoneListViewItemSelected _ListView_SelectedItem" data-linktype="absolute-path">SelectedItemnull vlastnost zůstane . Události se ale budou i nadále aktivovat a klepnutí na položku se během klepnutí ItemTapped krátce zvýrazní.

Když je vybraná položka a vlastnost _ListView_SelectionMode" data-linktype="absolute-path">se změní z SelectionMode Xamarin_Forms SelectionMode _ListViewSelectionMode_Single" data-linktype="absolute-path">Single na Xamarin_Forms _ListViewSelectionMode_None" data-linktype="absolute-path">, nastaví se None vlastnost Xamarin_Forms _ListView_SelectedItem" data-linktype="absolute-path">SelectedItem vlastnost nulla ItemSelected událost se bude aktivovat s null položkou.

Následující snímky obrazovky ukazují s ListView výchozím režimem výběru:

Objekt ListView s povoleným výběrem

Zakázání výběru

Pokud chcete zakázat výběr, nastavte vlastnost ListViewListView Xamarin_Forms _ListView_SelectionMode" data-linktype="absolute-path">SelectionMode na Xamarin_Forms _ListViewSelectionMode_None" data-linktype="absolute-path">: None

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

Kontextové akce

Uživatelé často budou chtít provést akci s položkou v ListView . Představte si například seznam e-mailů v aplikaci Pošta. V iOSu můžete potažením prstem odstranit zprávu:

Objekt ListView s kontextovou akcí

Kontextové akce je možné implementovat v jazyce C# a XAML. Níže najdete konkrétní příručky pro oba typy, ale nejprve se podíváme na některé klíčové podrobnosti implementace obou.

Kontextové akce se vytvářejí pomocí MenuItem prvků. Události klepnutí MenuItems pro objekty jsou vyvolány MenuItem samotným objektem, nikoli ListView objektem . To se liší od toho, jak se zpracovávají události klepnutí na buňky, kde metoda vyvolá ListView událost místo buňky. Vzhledem k tomu, že objekt vyvolává událost, její obslužná rutina události získá klíčové informace, například informace o tom, která položka byla vybrána ListView nebo klepnuta.

Ve výchozím nastavení MenuItem nemá žádný způsob, jak zjistit, do které buňky patří. Vlastnost CommandParameter je k dispozici pro ukládání MenuItem objektů, jako je například objekt za MenuItemViewCell objektem . Vlastnost CommandParameter lze nastavit v XAML i C#.

XAML

MenuItem Elementy lze vytvořit v kolekci XAML. Níže uvedený kód XAML ukazuje vlastní buňku se dvěma implementované kontextové akce:

<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>

V souboru kódu se ujistěte, že Clicked jsou implementované tyto metody:

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

Poznámka

Pro NavigationPageRenderer Android má přepisovatelná metoda, kterou je možné použít k UpdateMenuItemIcon načtení ikon z vlastního Drawable . Toto přepsání umožňuje používat obrázky SVG jako ikony MenuItem na instancích v Androidu.

Kód

Kontextové akce je možné implementovat v jakékoli podtřídě (pokud se nepoužívali jako záhlaví skupiny) vytvořením instancí a jejich přidáním do kolekce CellMenuItem pro ContextActions buňku. Pro kontextovou akci můžete nakonfigurovat následující vlastnosti:

  • Text – řetězec, který se zobrazí v položce nabídky.
  • Kliknutí – událost při kliknutí na položku.
  • IsDestructive – (volitelné), pokud je hodnota true, položka se v iOSu vykreslí jinak.

Do buňky lze přidat více kontextových akcí, ale pouze jedna akce by měla mít IsDestructive nastavenou hodnotu true . Následující kód ukazuje, jak by se kontextové akce přidaly do ViewCell objektu :

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

Aktualizace tažením

Uživatelé očekávají, že stažením seznamu dat se tento seznam aktualizuje. Ovládací ListView prvek tuto funkci podporuje. Pokud chcete povolit funkci aktualizace tažením, Xamarin_Forms _ListView_IsPullToRefreshEnabled" data-linktype="absolute-path">IsPullToRefreshEnabled na true :

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

Ekvivalentní kód jazyka C# je:

listView.IsPullToRefreshEnabled = true;

Během aktualizace se zobrazí číselník, který je ve výchozím nastavení černý. Barva číselníku se ale v iOSu a Androidu může změnit nastavením RefreshControlColor vlastnosti na Color :

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

Ekvivalentní kód jazyka C# je:

listView.RefreshControlColor = Color.Red;

Následující snímky obrazovky ukazují aktualizaci tažením při stahování:

Probíhající aktualizace tažením pro ListView

Na následujících snímcích obrazovky je vidět aktualizace tažením po vydání vyžádané položky uživatelem, přičemž při aktualizaci se zobrazuje ListView číselník:

ListView Pull to Refresh Complete

ListViewspustí událost, která zahájí Refreshing aktualizaci, ListView a vlastnost Xamarin_Forms _ListView_IsRefreshing" data-linktype="absolute-path">IsRefreshing se nastaví na true . Jakýkoliv kód, který je potřeba k aktualizaci obsahu objektu , by pak měl být proveden obslužnou rutinou události pro událost nebo metodou prováděnou objektem ListViewRefreshing Xamarin_Forms ListView _ListView_RefreshCommand" data-linktype="absolute-path">RefreshCommand . Po aktualizaci by měla být vlastnost nastavená na ListViewIsRefreshing nebo Xamarin_Forms falseListView _ListView_EndRefresh" data-linktype="absolute-path">EndRefresh měla být volána metoda , která označuje, že aktualizace je dokončená.

Rozpoznání posouvání

ListView definuje Scrolled událost, která se aktivuje, aby indikuje, že došlo k posouvání. Následující příklad XAML ukazuje , ListView který nastaví obslužnou rutinu události pro Scrolled událost:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu kódu se OnListViewScrolled obslužná rutina události spustí při Scrolled spuštění události:

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

Obslužná OnListViewScrolled rutina události vystupuje jako výstup hodnoty ScrolledEventArgs objektu, který doprovází událost.