How to build ListView in Xamarin?

Because it can easily attract users or make things easier and more attractive. List view is also one of the elements used to list or summarize the items in the  application. This article will explain how to create a view list and make related settings.

What is ListView?

ListView  is a widget that displays a list of items in the application. In other words, ListView is used to list items in the application. The list that is created and includes the items of the  application  can be scrolled, and there is no limit to the number of items on the list. ListViews include a list of mobile contacts, a list of emails, or a list of cities with their weather information.

It is possible to customize, create and apply custom changes in ListView, and all items can be placed from the simplest state in the form of text to the most complex state in the form of images, links, etc.

In this tutorial, you will learn that:

- How to create a ListView in this using the XAML file?
- How to put data in ListViews?
- How to respond to items inside ListView?
- How to change the appearance of cells in ListView?

Learn how to create a ListView in Visual Studio

The requirements for doing this training are as follows:

- Install the latest version of V.Studio 2019 on the system
- Install the latest version of  Mobile development with .NET  on the system

1- Open  Visual Studio  2- After opening Visual Studio, you need to create a new black this app.
3- Choose a name to create. The name chosen in this article is ListViewTutorial.

Note:

It is best to choose names for projects and classes created.

Note:

The name selected for the project must be the same as the name chosen for the solution, so choose the solution name ListViewTutorial.

- After naming, you must ensure that the system and application support the .NET Standard mechanism for shared code.

This mechanism is used to share written in Xamarin.Forms with the C #  programming  language. If your system and app do not support this mechanism, it cannot have multiple outputs on multiple platforms at once so that you can have multiple outputs on several different platforms at the same time.

- Click on this in the Solution Explorer section of the ListViewTutorial project and replace the codes with all the code in that section.

By entering this code, you specify a UI for the page, including a ListView in StackLayout. ListView.ItemSource attribute Displays the items to be displayed inside the ListView in a string presentation.

- Press the Start or Control + F5 key to see the result of the applied changes.

Learn how to columns and rows in Xamarin.Forms using Visual Studio

1- To put content and data inside ListView, you need to create and columns and rows.
2- To columns and rows for data placement, you must change the ListView definition in the MainPage.xaml files.
3- Replace the code with all the code in this file.

In this code, an object called Monkey is defined to take the monkey image's name, location, and URL. It also overrides the ToSting method class that can return the Name attribute.

1- Click on this via Solution Explorer in the ListViewTutorial project.
2- Double click on MainPage.xaml.cs to open it.
3- Replace the code with all the MainPage.xaml.cs file.

By entering this code, you create an attribute called Monkeys, and its type is IList and put it as an empty list in the Constructor. The Monkey object is then added to the Monkeys collection, and the MainPage object becomes the BindingContext page.

1- To set the ItemSource attribute for the Monkeys set, we need to change the definition of ListView in the MainPage.xaml file.
2- Replace the code in the MainPage.xaml file with the code below.

You set the ItemSource attribute to the Monkeys set by entering this code.

- Press the Start button or Control + F5 key to see the result of the applied changes.

Learn how to put content in columns and rows of Xamarin.Forms ListViews using Visual Studio

1- Change the definition of ListView from this to put the contents inside columns and rows.

2- Replace the codes below with all the codes in the MainPage file.

Inserting this code creates an event handler for ItemSelected called OnListViewItemSelected, and also creates a handler event for ItemTapped, also called OnListViewItemTapped.

3- Click on this via Solution Explorer in the ListViewTutorial project.

4- Then double click on MainPage.xaml.cs to open it.

5- Create the OnListViewItemSelected and OnListViewItemTapped event handlers by replacing the code listed below with all the code in this file.

ItemSelected and ItemTapped events start when an item in ListView is taped. The OnListViewItemSelected and OnListViewItemTapped methods are then executed.

The SelectedItemChangedEventArgs argument in the OnListViewItemSelected method provides the selected items.

The ItemTappedEventArgs argument in the OnListViewItemTapped method provides the items that have been hit.

- Press the Start button or Ctrl + F5 key to see the result of the applied changes.

You will see that ItemSelecte starts when an item is selected in ListView, but ItemTapped will start when an item is hit.

Learn how to change the appearance of  Xamarin.Forms  ListViews using V.Studio

1- Change the definition of ListView from it to change the appearance of ListView as well.
2- Replace the codes with the code in the MainPage.xaml file.

Inserting this code puts the DataTemplate data in the ListView.ItemTemplate attribute that determines the appearance of each row.

Layouts inside ViewCell are managed using Grid, including one Image object and two Label objects. The lengths of the ListView rows are the same by default, but in this code, we set the value to true for ListView.HasUnevenRows, which makes the rows longer depending on the length of the content inside them.

- Press the Start or Ctrl + F5 key combination to see the result of the applied changes.

Learn how to create a ListView in Xamarin.Forms using Visual Studio for Mac

The requirements for doing this training are as follows:

- Install the latest version of  V.Studio  for Mac on the system
- Install the latest version of support platform for Android and iOS on the system
- Install the latest version of Xcode

1- Open V.Studio for Mac.
2- After opening Visual Studio for Mac, you need to create a new black this app.
3- Choose a name you create. The name chosen in this article is ListViewTutorial.

Note:

It is best to choose names for projects and classes created.

Note:

The name selected for the project must be the same as the name chosen for the solution, so choose the solution name ListViewTutorial.

- After naming, you must ensure that the system and  application  support the .NET Standard mechanism for shared code.

This mechanism is used to share code written in Xamarin.Forms with the C # programming language. If your system and app do not support this mechanism, it cannot have multiple outputs on multiple platforms at once so that you can have multiple outputs on several different platforms at the same time.

- Click on this in the Solution pad section of the ListViewTutorial project and replace the code with all the code in that section.

By entering this code, you specify a UI for the page, including a ListView in StackLayout. ListView.ItemSource attribute Displays the items to be displayed inside the ListView in a string presentation.

- Press Start or Control+ F5 key combination to see the result of the applied changes.

Learn how to specify columns and rows in Xamarin.Forms ListViews using Visual Studio for Mac

1- To create content and data inside ListView, you must create and specify columns and rows.
2- To specify columns and rows for data placement, you need to change the ListView definition in the MainPage.xaml file.
3- Replace the code below with all the code in this file.

In this code, an object called Monkey is defined to take the monkey image's name, location, and URL. It also overrides the ToSting method class that can return the Name attribute.

1- Click on this via the Solution pad in the ListViewTutorial project.
2- Then double click on it.cs to open it.
3- Replace the code below with all the MainPage.xaml.cs file.

By entering this code, you create an attribute called Monkeys, and its type is IList and put it as an empty list in the Constructor. The Monkey object is then added to the Monkeys collection, and the MainPage object becomes the BindingContext page.

1- To set the ItemSource attribute for the Monkeys set, we need to change the definition of ListView in this file.
2- Replace the code in this file with the code below.

You set the ItemSource attribute to the Monkeys set by entering this code.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes.

Learn how to put content in columns and rows of Xamarin.Forms ListViews using Visual Studio for Mac

1- Change the ListView definition from its section to place the contents in columns and rows.
2- Replace the code below with all the code in these files.

Inserting these codes creates an event handler for ItemSelected called OnListViewItemSelected, and also creates a handler event for ItemTapped, also called OnListViewItemTapped.

1- Click on this via the Solution pad in the ListViewTutorial project.
2- Then double click on it to open it.
3- Create the OnListViewItemSelected and OnListViewItemTapped event handlers by replacing the code listed below with all the codes in the MainPage.xaml.cs file.

ItemSelected and ItemTapped events start when an item in ListView is taped. The OnListViewItemSelected and OnListViewItemTapped methods are then executed.

The SelectedItemChangedEventArgs argument in the OnListViewItemSelected method provides the selected items.

The ItemTappedEventArgs argument in the OnListViewItemTapped method provides the items that have been hit.

- Press the Start button or Ctrl + F5 key combination to see the result of the applied changes.

You will see that ItemSelecte starts when an item is selected in ListView, but ItemTapped will start when an item is hit.

Learn how to change the appearance of Xamarin.Forms ListViews using Visual Studio for Mac

1- Change the definition of ListView from it to change the appearance of ListView as well.
2- Replace the code below with all the code in these files.

Inserting this code puts the DataTemplate data in the ListView.ItemTemplate attribute that determines the appearance of each row.

Layouts inside ViewCell are managed using the Grid, including one Image object and two Label objects. The lengths of the ListView rows are the same by default, but in these codes, we set the value to true for ListView.HasUnevenRows, which makes the rows longer depending on the length of the content inside them.

- Press the Start button or Ctrl + F5 combination to see the result of the applied changes.