ListView etkileşimi

sınıfı, Xamarin.FormsListView sunduğu verilerle kullanıcı etkileşimini destekler.

Seçim ve dokunmalar

Seçim ListView modu, özelliği sabit listesi değerine ListViewSelectionMode ayarlanarak ListView.SelectionMode denetlenmektedir:

• Single , seçili öğenin vurgulandığı tek bir öğenin seçilebileceğini gösterir. Bu varsayılan değerdir.
• None öğelerin seçilemeyeceğini gösterir.

Kullanıcı bir öğeye dokunduğunda iki olay tetiklenir:

• ItemSelected yeni bir öğe seçildiğinde tetiklenir.
• ItemTapped bir öğeye dokunulduğunda tetiklenir.

Aynı öğeye iki kez dokunulduğunda iki ItemTapped olay tetiklenir, ancak yalnızca tek ItemSelected bir olay tetiklenir.

Not

Olay ItemTappedEventArgs için ItemTapped olay bağımsız değişkenlerini içeren sınıfın ve Item özellikleri ve değeri, eşlenen öğenin dizinini ListView temsil eden bir ItemIndex özelliği vardırGroup. Benzer şekilde, SelectedItemChangedEventArgs olay için ItemSelected olay bağımsız değişkenlerini içeren sınıfın bir SelectedItem özelliği ve değeri seçili öğenin dizinini ListView temsil eden bir SelectedItemIndex özelliği vardır.

SelectionMode özelliği olarak Singleayarlandığında içindeki öğeler ListView seçilebilir, ItemSelected ve ItemTapped olayları tetiklenir ve SelectedItem özellik seçili öğenin değerine ayarlanır.

SelectionMode özelliği olarak ayarlandığında Noneiçindeki ListView öğeler seçilemez, ItemSelected olay tetiklenmez ve SelectedItem özelliği kalırnull. Ancak, ItemTapped olaylar tetiklenmeye devam eder ve dokunan öğe dokunma sırasında kısa bir süre vurgulanır.

Bir öğe seçildiğinde ve SelectionMode özelliği olarak NoneSelectedItemSingle değiştirildiğinde özelliği olarak ayarlanır null ve ItemSelected olay bir null öğeyle tetiklenir.

Aşağıdaki ekran görüntüleri, varsayılan seçim moduyla bir'i ListView gösterir:

Seçimi devre dışı bırakma

Seçimi devre dışı bırakmak ListView için özelliğini olarak NoneSelectionMode ayarlayın:

<ListView ... SelectionMode="None" />

var listView = new ListView { ... SelectionMode = ListViewSelectionMode.None };

Bağlam eylemleri

Kullanıcılar genellikle içindeki bir öğe ListViewüzerinde işlem yapmak ister. Örneğin, Posta uygulamasındaki e-postaların listesini göz önünde bulundurun. iOS'ta, bir iletiyi silmek için çekebilirsiniz:

Bağlam eylemleri C# ve XAML'de uygulanabilir. Aşağıda her ikisi için de belirli kılavuzlar bulabilirsiniz, ancak önce her ikisi için de bazı önemli uygulama ayrıntılarına göz atalım.

Bağlam Eylemleri öğeler kullanılarak MenuItem oluşturulur. Nesneler için MenuItems dokunma olayları kendi başına MenuItem oluşturulur, değil ListView. Bu, dokunma olaylarının hücreler için işlenme şeklinden ListView farklıdır ve burada olay hücre yerine tetiklenir. ListView olayı yükselttiğinden, olay işleyicisine hangi öğenin seçildiği veya dokunulduğu gibi önemli bilgiler verilir.

Varsayılan olarak, bir MenuItem hücrenin hangi hücreye ait olduğunu bilmenin hiçbir yolu yoktur. CommandParameter özelliği' öğesinin arkasındaki nesne gibi nesneleri depolamak MenuItemViewCelliçin kullanılabilirMenuItem. CommandParameter özelliği hem XAML hem de C# dilinde ayarlanabilir.

XAML

MenuItem öğeleri bir XAML koleksiyonunda oluşturulabilir. Aşağıdaki XAML, iki bağlam eyleminin uygulandığı özel bir hücreyi gösterir:

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

Arka planda kod dosyasında yöntemlerin uygulandığından Clicked emin olun:

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

Not

NavigationPageRenderer Android için, özel Drawablebir uygulamasından simgeleri yüklemek için kullanılabilecek geçersiz kılınabilir UpdateMenuItemIcon bir yöntemi vardır. Bu geçersiz kılma, Android'de örneklerde MenuItem SVG görüntülerinin simge olarak kullanılmasını mümkün kılar.

Kod

Bağlam eylemleri herhangi bir Cell alt sınıfta (grup üst bilgisi olarak kullanılmadığı sürece) örnekler oluşturup MenuItem bunları hücrenin koleksiyonuna ContextActions ekleyerek uygulanabilir. Bağlam eylemi için aşağıdaki özellikler yapılandırılabilir:

• Metin : Menü öğesinde görünen dize.
• Tıklandı – öğeye tıklandığında gerçekleşen olay.
• IsDestructive – (isteğe bağlı) true olduğunda öğe iOS üzerinde farklı işlenir.

Bir hücreye birden çok bağlam eylemi eklenebilir, ancak yalnızca birinin olarak trueayarlanmış olması IsDestructive gerekir. Aşağıdaki kod, bağlam eylemlerinin öğesine ViewCellnasıl ekleneceğini gösterir:

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

Yenilemek için çekme

Kullanıcılar, bir veri listesinin aşağı çekilmesinin bu listeyi yenilemesini bekliyor. Denetim ListView bu ilk çalıştırmayı destekler. Yenileme çekme işlevini etkinleştirmek için olarak ayarlayın IsPullToRefreshEnabledtrue:

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

Eşdeğer C# kodu:

listView.IsPullToRefreshEnabled = true;

Yenileme sırasında varsayılan olarak siyah olan bir değiştirici görüntülenir. Ancak, özelliği olarak Colorayarlanarak RefreshControlColor iOS ve Android'de spinner rengi değiştirilebilir:

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

Eşdeğer C# kodu:

listView.RefreshControlColor = Color.Red;

Aşağıdaki ekran görüntüleri, kullanıcı çekerken yenilemeyi çekme işlemini gösterir:

Aşağıdaki ekran görüntüleri, kullanıcı çekmeyi yayımladıktan sonra yenilemeyi gösterir ve döndürücü güncelleştirilirken ListView gösterilir:

ListView yenilemeyi Refreshing başlatmak için olayı başlatır ve IsRefreshing özelliği olarak trueayarlanır. öğesinin içeriğini ListView yenilemek için gereken kod, olay için Refreshing olay işleyicisi veya tarafından yürütülen yöntem tarafından RefreshCommandyürütülmelidir. ListView yenilendikten sonra, IsRefreshing özelliği olarak ayarlanmalıdır falseveya yenilemenin EndRefresh tamamlandığını belirtmek için yöntemi çağrılmalıdır.

Not

bir RefreshCommandCanExecute tanımlarken, komutu etkinleştirmek veya devre dışı bırakmak için komutunun yöntemi belirtilebilir.

Kaydırmayı algılama

ListView kaydırmanın gerçekleştiğini belirtmek için tetiklenen bir Scrolled olayı tanımlar. Aşağıdaki XAML örneği, olay için bir olay işleyicisi Scrolled ayarlayan bir gösterirListView:

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

Eşdeğer C# kodu:

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

Bu kod örneğinde OnListViewScrolled , olay çalıştırıldığında Scrolled olay işleyicisi yürütülür:

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

Olay işleyicisi OnListViewScrolled , olaya eşlik eden nesnenin ScrolledEventArgs değerlerini verir.