How To Create A List View Action In Xamarin.Forms

Introduction

This article demonstrates how to create a ListView Action Application using C# and XAML in Xamarin.Forms.
  
Let’s start.

Step 1
 
Open Visual Studio and go to New Project >> installed >> Visual C# >> Cross-Platform.

Select Cross-Platform App, then give your project a name and location.
 
 

Step 2
 
Open Solution Explorer >> Project Name >> Mainpage.xaml. Double click to open the Design View of this page. This page is the Design page or Front-end.

 
 
The code is given below.

 

XAML Code
 
We are creating the ListView and Datatemplate inside the ItemTemplate. 
  1. <ListView x:Name="MainListView"  
  2.              HasUnevenRows="True"  
  3.              ItemTapped="MainListView_ItemTapped">  
  4.        <ListView.ItemTemplate>  
  5.            <DataTemplate>  
  6.                <ViewCell>  
  7.                    <StackLayout Orientation="Vertical">  
  8.                        <Label Text="{Binding Name}" />  
  9.                        <Label Text="{Binding Description}" />  
  10.                        <Label Text="{Binding OrderNumber}" />  
  11.                    </StackLayout>  
  12.                </ViewCell>  
  13.            </DataTemplate>  
  14.        </ListView.ItemTemplate>  
  15.    </ListView>  
Step 4
 
Next, go to the Project Name (Portable) >> Right Click. Select the new folder and a dialogue box will open. Just give the folder a name. The folder name is "Classes".
 
 

Step 5
 
Next, go to project Name (Portable) >> Classes Folder >> Right Click >> Add >> Class.
 
 
 
The dialogue box will open. Add the class and give a name.

 
Step 6
 
Open Solution Exploree >> Project Name >> Classes Folder >> ListViewTemplate >> Right Click. Open the Class page.
 
 
 
The code is given below.
 
 
 
C# Code  
  1. public class ListViewTemplate  
  2.    {  
  3.        public string Name { getset; }  
  4.        public string Description { getset; }  
  5.   
  6.        public int OrderNumber { getset; }  
  7.   
  8.    }  
Step 7
 
Open Solution Explorer >> Project Name (Portable) >> Right Click >> New Item.

 
 
The dialogue box will open. Now, add the XAML page.
 


Step 8 
 
Open Solution Explorer >> Project Name (Portable) >> Page1.xaml. Double click to open the backend view of this page. 

 
The Code is given below.

 
 
Xaml Code
 
The XAML page is used to select the ListView.
  1. <StackLayout>  
  2.       <Label Text="XAMARINFORMS"  
  3.              FontSize="Large"  
  4.              HorizontalOptions="Center"  
  5.              VerticalOptions="Center"/>  
  6.       <Label Text="LISTVIEWACTION"  
  7.              FontSize="Large"  
  8.              HorizontalOptions="Center"  
  9.              VerticalOptions="Center"/>  
  10.   </StackLayout>  
Step 9
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs.Double click to open the backend view of this page.
 
 
The Code is given below.
 
 
 
C# Code
  1. namespace ListViewAction  
  2. {  
  3.     public partial class MainPage : ContentPage  
  4.     {  
  5.         public MainPage()  
  6.         {  
  7.             InitializeComponent();  
  8.   
  9.             MainListView.ItemsSource = new List<ListViewTemplate>  
  10.   
  11.             {  
  12.             new ListViewTemplate  
  13.                 {  
  14.                 Name = "Xamarin.Forms",  
  15.                     Description = "One",  
  16.                     OrderNumber = 1  
  17.                },  
  18.                new ListViewTemplate  
  19.                {  
  20.                    Name = "Android",  
  21.                    Description = "Two",  
  22.                    OrderNumber = 2  
  23.                 },  
  24.                 new ListViewTemplate  
  25.                 {  
  26.                     Name = "IOS",  
  27.                     Description = "Three",  
  28.                     OrderNumber = 3  
  29.                },  
  30.                new ListViewTemplate  
  31.                {  
  32.                    Name = "Windows",  
  33.                    Description = "Four",  
  34.                    OrderNumber = 4  
  35.                }  
  36.            };  
  37.         }  
  38.      async private void MainListView_ItemTapped(object sender, ItemTappedEventArgs e)  
  39.         {  
  40.             var Selected = e.Item as ListViewTemplate;  
  41.   
  42.             switch (Selected.OrderNumber)  
  43.             {  
  44.                 case 1:  
  45.                     await Navigation.PushAsync(new Page1());  
  46.                     break;  
  47.                 case 2:  
  48.                     break;  
  49.                 case 3:  
  50.                     break;  
  51.                 case 4:  
  52.                     break;  
  53.             }  
  54.   
  55.             ((ListView)sender).SelectedItem = null;  
  56.   
  57.   
  58.         }  
  59.     }  
Step 10
 
Open Solution Explorer >> Project Name (Portable) >> App.xaml >> Right Click >> App.xaml.cs. Double click to open the backend view of this page.

 
The code is given below.
 
 
C# Code 
  1. public App()  
  2.        {  
  3.            InitializeComponent();  
  4.   
  5.            MainPage = new NavigationPage(new MainPage());  
  6.        }  
Step 11
 
Next, select the build & deploy option, followed by Clicking "Start Your Application".
 
Now, go to the Run Option, choose Debug. From the list of an Android Emulators or simulator, you can choose any API (Application Program Interface) Level Emulator and simulator to run it.
 
Output 
 
After a few seconds, you will see your app working.
 
 
 
Finally, we have successfully created an app for creating a list view action in Xamarin.Forms. 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now