Functionality Of A ListView In Xamarin.Forms

In this article, we will discuss three different functionalities of ListView.

• Pull to Refresh
• Selection
• Context Action

Pull To Refresh

Xamarin provides pull to refresh functionality on all platforms. In this functionality, you will pull your list view down to refresh it. While pulling it down, an activity indicator is shown that can read all of your written code and show the list again.

In an actual example, all the data comes from a remote API or from some other source and refreshes your data. But in this example, we can hard code our list data and on refreshing the list, we can add some more data in it.

 Let’s implement it.

XAML 

<ListView x:Name="lst" IsPullToRefreshEnabled="True" Refreshing="lst_Refreshing">
</ListView>

You can also make item template, data template, or cells in your list. But for now, I just made a simple List View to understand its functionality.

Code

public List()
        {
            InitializeComponent();
            lst.ItemsSource = new List<string>() { "Item 1" , "Item 2" };

        }

        private void lst_Refreshing(object sender, EventArgs e)
        {
            lst.ItemsSource = new List<string>() { "Item 1", "Item 2" , "Item 3", "Item 4"};
            lst.IsRefreshing = false;

        }

When the list is initialized, it contains 2 items and after refreshing, it can add 2 more items in it.

Output on Android

Output - When List is refreshed, you will see an activity indicator.

Output - After refreshing a list.

SELECTION

You can also handle an event when list item is selected. You can move to the next page. Now, any alert or anything you want can be done by this event.

In our example, when user selects a list item, we will show him a display box that contains a message of selected item name in it.

Let’s Implement it.

XAML

<ListView x:Name="lst" ItemSelected="lst_ItemSelected"></ListView>

CODE

public List()
       {
           InitializeComponent();
           lst.ItemsSource = new List<string>() { "Item 1" , "Item 2" };

       }

       private void lst_ItemSelected(object sender, SelectedItemChangedEventArgs e)
       {
           DisplayAlert("Item Selected",e.SelectedItem.ToString(),"ok");
       }

In selected item event, we can show a display box that contains selected item name.

OUTPUT

Context Action

You can set different context actions in Xamarin.Forms. Context Actions can be shown -

On iOS: Swipe it from right to left.

On Android: when the user performs a long-click (press and hold an item).

You can do any action on it. In this example, we are going to make one context item named “More” and when the More is tapped, the Display box is shown that contains its name.

Implementation

XAML 

<ListView x:Name="lst" ItemSelected="lst_ItemSelected">
      <ListView.ItemTemplate>
          <DataTemplate>
              <ViewCell>
                  <StackLayout>
                      <Label Text="{Binding .}"></Label>
                  </StackLayout>
                  <ViewCell.ContextActions>
                      <MenuItem Text="More" x:Name="More" Clicked="More_Clicked" CommandParameter="{Binding .}"></MenuItem>
                  </ViewCell.ContextActions>
              </ViewCell>
          </DataTemplate>
      </ListView.ItemTemplate>
  </ListView>

Here you see that we set a context action to view cell. You may also set context actions to Image cell or Text Cell.

CODE 

     List<string> templist = new List<string>() { "Item 1", "Item 2", "Item 3", "Item 4"};

     public List()
     {
         InitializeComponent();
         lst.ItemsSource = templist;
     }

private void More_Clicked(object sender, EventArgs e)
     {
         var name = (sender as MenuItem).CommandParameter as string;
         DisplayAlert("Context Action", name, "ok");
     }

Output -  Press and hold an item

Output - When tapped on more

That's it. Thanks for reading.