Utilization Of List View In Xamarin.Forms

Introduction

ListView helps in the arrangement of data in the form of a list. A list with a lot of data can be arranged using the scrolling functionality of the list.

We must know that we use lists in our cell phones messages or in the contact details which are shown on our cell phones. Data Binding can be done through ListView and we can manage the scrolling of data in the ListView in Xamarin.Forms.

Simple ListView

As we know, an XAML file is used for creating front end in Xamarin.Forms. So, we will utilize a tag named as “List View” for generating a list in “MainPage.Xaml”. We will give x: Name for referencing the element of ListView.

<ListView x:Name="LV"></ListView>

As we have generated front end XAML files, now we will create a backend. Now the backend will be created in “MainPage.Xaml.cs”, and in the constructor of “Main.Page.Xaml” we will call list variable and we will fetch items with it by using ItemSource to fetch all the items which are used in the list. String datatype is utilized because all the items will be in the form of a list.

public MainPage()
        {
            InitializeComponent();
            LV.ItemsSource = new List<string>()
            {"Munib","Zesshan","Ali"};
}

  

Using Binding with Classes

First, we will add a class in which we will define all the attributes we need to use in our ListView for binding.

I have added a class named “Message.cs” and added two attributes.

class Message
{
    public int Id { get; set; }
    public string Name { get; set; }
}

After adding the class, now create a tag of the list in ListView and we will bind the attributes to the ListView using text cell. Item template is used for visualization of the data objects. Data template tells what kind of data we are going to utilize. Binding keyword is utilized to attach with class attributes.

<ListView x:Name="LV">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Id}" Detail="{Binding Name}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Now we will work in “MainPage.Xaml.Cs” and the data in the list will be a type of our class called “Message”.

public MainPage()
        {
            InitializeComponent();
            LV.ItemsSource = new List<Message>()
            {new Message(){Id=1, Name="This is Ist Message" },
            new Message(){Id=2, Name="This is 2nd Message"} };
        }

 

 

Refreshing in List View

As the new data has been added in the list it needs to be refreshed, so we will use the command of “IsPullToRefreshEnabled="True" in our “XAML” page and the event will be generated by using the Keyword of refreshing.

<ListView x:Name="LV" IsPullToRefreshEnabled="True" Refreshing="LV_Refreshing">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Id}" Detail="{Binding Name}"></TextCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Now in “MainPage.Xaml.cs” an event has been generated. When the page is opened the two items will be there,  and after refreshing more data will be shown.

     public MainPage()
      {
          InitializeComponent();
          LV.ItemsSource = new List<Message>()
          {new Message(){Id=1, Name="This is Ist Message" },
          new Message(){Id=2, Name="This is 2nd Message"} };
      }

      private void LV_Refreshing(object sender, EventArgs e)
      {
          LV.ItemsSource = new List<Message>()
          {new Message(){Id=1, Name="This is Ist Message" },
          new Message(){Id=2, Name="This is 2nd Message"},
          new Message(){Id=3, Name="This is 3rd Message"}

      };LV.IsRefreshing = false;
}

Selection in List View

An event will be added in our “Xaml” file so that items can be selected.

<ListView x:Name="LV" IsPullToRefreshEnabled="True" Refreshing="LV_Refreshing" ItemSelected="LV_ItemSelected">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Id}" Detail="{Binding Name}"></TextCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

As the event has been generated, we will select the item by using “Selected Item” key word.

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

 

So, this is the proper overview of List View in Xamarin.Forms