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

Step 2

Select UWP Blank App from the available projects and Click next

Step 3

Give a name to your Project and Click Create Button,

Step 4

Type the following XAML code in MainPage.xaml.

<Page
x:Class="ListSearch.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListSearch"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="sbar" TextChanged="sbar_TextChanged" PlaceholderText="Enter the item to search" Grid.Row="0"/>
<Button Content="Search" Width="400" Click="Button_Click" Grid.Row="1" HorizontalAlignment="Stretch"/>
<ListView x:Name="mylst" Grid.Row="2">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding img}" Width="200" Height="200"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding name}" FontSize="30" />
<TextBlock Text="Founded Year" FontSize="25"/>
<TextBlock Text="{Binding year}" FontSize="20"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>

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.

public class Person
{
public string name { get; set; }
public int year { get; set; }
public string img { get; set; }
}

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.

List<Person> names;
public MainPage()
{
this.InitializeComponent();
names = new List<Person>();
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" });
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" });
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" });
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" });
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" });
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" });
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" });
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" });
mylst.ItemsSource = names;
}

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.

private void Button_Click(object sender, RoutedEventArgs e)
{
var cont = from s in names where s.name.Contains(sbar.Text) select s;//LINQ Query
mylst.ItemsSource = cont;
}

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,

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
namespace ListSearch
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
List<Person> names;
public MainPage()
{
this.InitializeComponent();
names = new List<Person>();
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" });
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" });
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" });
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" });
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" });
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" });
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" });
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" });
mylst.ItemsSource = names;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var cont = from s in names where s.name.Contains(sbar.Text) select s;//LINQ Query
mylst.ItemsSource = cont;
}
private void sbar_TextChanged(object sender, TextChangedEventArgs e)
{
mylst.ItemsSource = names;
}
}
public class Person
{
public string name { get; set; }
public int year { get; set; }
public string img { get; set; }
}
}

All set! Now run your application by selecting LocalMachine.

The output will be similar to this.