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. 

<ListView x:Name="MainListView"
             HasUnevenRows="True"
             ItemTapped="MainListView_ItemTapped">
       <ListView.ItemTemplate>
           <DataTemplate>
               <ViewCell>
                   <StackLayout Orientation="Vertical">
                       <Label Text="{Binding Name}" />
                       <Label Text="{Binding Description}" />
                       <Label Text="{Binding OrderNumber}" />
                   </StackLayout>
               </ViewCell>
           </DataTemplate>
       </ListView.ItemTemplate>
   </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  

public class ListViewTemplate
   {
       public string Name { get; set; }
       public string Description { get; set; }

       public int OrderNumber { get; set; }

   }

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.

<StackLayout>
      <Label Text="XAMARINFORMS"
             FontSize="Large"
             HorizontalOptions="Center"
             VerticalOptions="Center"/>
      <Label Text="LISTVIEWACTION"
             FontSize="Large"
             HorizontalOptions="Center"
             VerticalOptions="Center"/>
  </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

namespace ListViewAction
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            MainListView.ItemsSource = new List<ListViewTemplate>

            {
            new ListViewTemplate
                {
                Name = "Xamarin.Forms",
                    Description = "One",
                    OrderNumber = 1
               },
               new ListViewTemplate
               {
                   Name = "Android",
                   Description = "Two",
                   OrderNumber = 2
                },
                new ListViewTemplate
                {
                    Name = "IOS",
                    Description = "Three",
                    OrderNumber = 3
               },
               new ListViewTemplate
               {
                   Name = "Windows",
                   Description = "Four",
                   OrderNumber = 4
               }
           };
        }
     async private void MainListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var Selected = e.Item as ListViewTemplate;

            switch (Selected.OrderNumber)
            {
                case 1:
                    await Navigation.PushAsync(new Page1());
                    break;
                case 2:
                    break;
                case 3:
                    break;
                case 4:
                    break;
            }

            ((ListView)sender).SelectedItem = null;


        }
    }
}

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 

public App()
       {
           InitializeComponent();

           MainPage = new NavigationPage(new MainPage());
       }

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.