Post
Ask Question

Searchable ListView In UWP

Introduction

 
In this article we are going to develop a simple UWP application with a listview along with searching the items in the listview using LINQ.
 
Requirements
  • Visual Studio 2017 or 2019 with UWP(Universal Windows Platform) installed.
  • C# basics
  • Windows 10 PC
Step 1
 
Open Visual Studio 2017 or 2019 and Click Create a new project
 
Searchable ListView In UWP
 
Step 2
 
Select UWP Blank App from the available projects and Click next
 
Searchable ListView In UWP
 
Step 3
 
Give a name to your Project and Click Create Button,
 
Searchable ListView In UWP
 
Step 4
 
Type the following XAML code in MainPage.xaml.
  1. <Page    
  2.     x:Class="ListSearch.MainPage"    
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  5.     xmlns:local="using:ListSearch"    
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  8.     mc:Ignorable="d"    
  9.     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    
  10.     
  11.     <Grid>    
  12.     
  13.         <Grid.RowDefinitions>    
  14.             <RowDefinition Height="Auto"/>    
  15.             <RowDefinition Height="Auto"/>    
  16.             <RowDefinition Height="*"/>    
  17.         </Grid.RowDefinitions>    
  18.             <TextBox x:Name="sbar" TextChanged="sbar_TextChanged" PlaceholderText="Enter the item to search" Grid.Row="0"/>    
  19.         <Button Content="Search" Width="400" Click="Button_Click" Grid.Row="1" HorizontalAlignment="Stretch"/>      
  20.     
  21.         <ListView x:Name="mylst" Grid.Row="2">    
  22.                 <ListView.ItemTemplate>    
  23.                     <DataTemplate>    
  24.                         <StackPanel Orientation="Horizontal">    
  25.                             <Image Source="{Binding img}" Width="200" Height="200"/>    
  26.                             <StackPanel Orientation="Vertical">    
  27.                                 <TextBlock Text="{Binding name}" FontSize="30" />    
  28.                                 <TextBlock Text="Founded Year" FontSize="25"/>    
  29.                                 <TextBlock Text="{Binding year}" FontSize="20"/>    
  30.                             </StackPanel>    
  31.                         </StackPanel>    
  32.                     </DataTemplate>    
  33.                 </ListView.ItemTemplate>    
  34.             </ListView>           
  35.     </Grid>    
  36. </Page>    
Searchable ListView In UWP
 
Description
 
In the above XAML code we created a user Interface for the application. Switch to designer mode to see the UI components. It will look similar to the above image. It has a TextBox control, button control, and Empty ListView which has a image control and TextBlock control.
 
Step 5
 
Open MainPage.xaml.cs file and enter the following code.
  1. public class Person  
  2.    {  
  3.        public string name { get; set; }  
  4.        public int year { get; set; }  
  5.        public string img { get; set; }  
  6.    } 
Description
 
Here a class named Person is created with three properties,  name, year and img, which are used to store the url of the image source for image control in the list view.
  1. List<Person> names;  
  2.        public MainPage()  
  3.        {  
  4.            this.InitializeComponent();  
  5.            names = new List<Person>();  
  6.            names.Add(new Person() { year = 1975, name = "Microsoft", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/768px-Microsoft_logo_%282012%29.svg.png" });  
  7.            names.Add(new Person() { year = 1976, name = "Apple", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/120px-Apple_logo_black.svg.png" });  
  8.            names.Add(new Person() { year = 1998, name = "Google", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/375px-Google_2015_logo.svg.png" });  
  9.            names.Add(new Person() { year = 1938, name = "SamSung", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Samsung_wordmark.svg/330px-Samsung_wordmark.svg.png" });  
  10.            names.Add(new Person() { year = 2001, name = "Xbox", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/XBOX_logo_2012.svg/330px-XBOX_logo_2012.svg.png" });  
  11.            names.Add(new Person() { year = 2001, name = "iTunes", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/ITunes_12.2_logo.png/96px-ITunes_12.2_logo.png" });  
  12.            names.Add(new Person() { year = 2000, name = "C#", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/C_Sharp_logo.png/225px-C_Sharp_logo.png" });  
  13.            names.Add(new Person() { year = 2008, name = "GitHub", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Font_Awesome_5_brands_github.svg/81px-Font_Awesome_5_brands_github.svg.png" });  
  14.             
  15.            mylst.ItemsSource = names;  
  16.        } 
Description
 
Here a list of type Person is created to store the list of objects of the class Person and it is given as item source to the ListView by using ItemsSource property.
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2.       {  
  3.           var cont = from s in names where s.name.Contains(sbar.Text) select s;//LINQ Query  
  4.            
  5.           mylst.ItemsSource = cont;  
  6.       } 
Description
 
Here click event for the search button is handled. A simple LINQ query is used to search through the list for a given item in search textbox and set the result of the LINQ query which has the items which are found to the ListView ItemsSource. 
 
This is the entire MainPage.xaml.cs code, 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using System.Runtime.InteropServices.WindowsRuntime;  
  6. using Windows.Foundation;  
  7. using Windows.Foundation.Collections;  
  8. using Windows.UI.Xaml;  
  9. using Windows.UI.Xaml.Controls;  
  10. using Windows.UI.Xaml.Controls.Primitives;  
  11. using Windows.UI.Xaml.Data;  
  12. using Windows.UI.Xaml.Input;  
  13. using Windows.UI.Xaml.Media;  
  14. using Windows.UI.Xaml.Navigation;  
  15.   
  16. // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
  17.   
  18. namespace ListSearch  
  19. {  
  20.     /// <summary>  
  21.     /// An empty page that can be used on its own or navigated to within a Frame.  
  22.     /// </summary>  
  23.     public sealed partial class MainPage : Page  
  24.     {  
  25.         List<Person> names;  
  26.         public MainPage()  
  27.         {  
  28.             this.InitializeComponent();  
  29.             names = new List<Person>();  
  30.             names.Add(new Person() { year = 1975, name = "Microsoft", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/768px-Microsoft_logo_%282012%29.svg.png" });  
  31.             names.Add(new Person() { year = 1976, name = "Apple", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/120px-Apple_logo_black.svg.png" });  
  32.             names.Add(new Person() { year = 1998, name = "Google", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/375px-Google_2015_logo.svg.png" });  
  33.             names.Add(new Person() { year = 1938, name = "SamSung", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Samsung_wordmark.svg/330px-Samsung_wordmark.svg.png" });  
  34.             names.Add(new Person() { year = 2001, name = "Xbox", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/XBOX_logo_2012.svg/330px-XBOX_logo_2012.svg.png" });  
  35.             names.Add(new Person() { year = 2001, name = "iTunes", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/ITunes_12.2_logo.png/96px-ITunes_12.2_logo.png" });  
  36.             names.Add(new Person() { year = 2000, name = "C#", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/C_Sharp_logo.png/225px-C_Sharp_logo.png" });  
  37.             names.Add(new Person() { year = 2008, name = "GitHub", img = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Font_Awesome_5_brands_github.svg/81px-Font_Awesome_5_brands_github.svg.png" });  
  38.              
  39.             mylst.ItemsSource = names;  
  40.         }  
  41.   
  42.         private void Button_Click(object sender, RoutedEventArgs e)  
  43.         {  
  44.             var cont = from s in names where s.name.Contains(sbar.Text) select s;//LINQ Query  
  45.              
  46.             mylst.ItemsSource = cont;  
  47.         }  
  48.   
  49.         private void sbar_TextChanged(object sender, TextChangedEventArgs e)  
  50.         {  
  51.             mylst.ItemsSource = names;  
  52.         }  
  53.     }  
  54.   
  55.     public class Person  
  56.     {  
  57.         public string name { get; set; }  
  58.         public int year { get; set; }  
  59.         public string img { get; set; }  
  60.     }  
  61. } 
All set! Now run your application by selecting LocalMachine.
 
Searchable ListView In UWP
 
The output will be similar to this.
 
Searchable ListView In UWP


Similar Articles