Post
Ask Question

Searching A Name From The ListView Using Xamarin.Forms For UWP

Introduction

A ListView is used to store the data in the form of Scrollable type.Now, in this article, we will discuss how to create a ListView and how to search a particular search item from the list.

Prerequisites
  • Windows10
  • Visual Studio 2017 Community Edition
  • Xamarin package
Step 1

Open Visual Studio 2017 Community Edition then go to File ->New ->Project. Now, select Visual C#->Cross-Platform->Cross Platform App(Xamarin). Now, give the name to the project then, select the destination folder (if needed) then click OK.


Step 2

Now a new window will open. Select Blank App template then, select Xamarin.Forms then, Portable Class Library(PCL) and click OK.

 
Step 3

Now, select the Target version and minimum version for UWP and click OK. 

 
Step 4

After creating the project open Solution Explorer and under Portable select MainPage.xaml.

 

Step 5

Now write the following code in MainPage.xaml,
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Xamarin_Forms_Search_ListView" x:Class="Xamarin_Forms_Search_ListView.MainPage">  
  3.     <StackLayout>  
  4.         <Label x:Name="MainLabel" Text="Search | ListView" Font="40" TextColor="Red" HorizontalOptions="Center" FontSize="Large" />  
  5.         <SearchBar x:Name="MainSearchBar" SearchButtonPressed="OnBtnPressed" />  
  6.         <ListView x:Name="MainListView" HasUnevenRows="True">  
  7.             <ListView.ItemTemplate>  
  8.                 <DataTemplate>  
  9.                     <ViewCell>  
  10.                         <Label Text="{Binding .}" TextColor="Blue" FontSize="40" /> </ViewCell>  
  11.                 </DataTemplate>  
  12.             </ListView.ItemTemplate>  
  13.         </ListView>  
  14.     </StackLayout>  
  15. </ContentPage>  
 
Step 6

Now open Solution Explorer and in the Portable Class select MainPage.xaml.cs under MainPage.xaml and write the following:

 
Now, create a list by writing: 
  1. List<string> names = new List<string>  
  2. {  
  3.    "Kartik",   
  4.    "Deepak",  
  5.    "Amar",  
  6.    "Rahul",  
  7.    "Chetan",  
  8.    "Girish"  
  9. };  
 

Step 7

Under Public, MainPage write

MainListView.ItemsSource =names; 
 
Step 8

Now create a searching activity so that after the name is being searched it can filter those names. We will create this activity by using LINQ: 
  1. void OnBtnPressed(object sender,EventArgs ea)  
  2. {  
  3.    var keyword = MainSearchBar.Text;  
  4.    MainListView.ItemsSource =  
  5.    names.Where(name => name.ToLower().Contains(keyword.ToLower()));  
  6. }  
 
 
 
Step 9

Now build the application by opening Solution Explorer, select Portable, on that right click and select Build.
 
Step 10

Now, in the start option select UWP and click to start to run the application. 
 
 
 
 
 
 
Now, type the name to be searched in the search bar and click the search icon.
 
 

Conclusion

Now, we have successfully created a ListView and searched required items from the list.


Similar Articles