title: Xamarin.Forms: Creating a SearchBar and search on a ListView
body: <p>Good Day everyone. I'm currently doing an application that allows the User to CRUD record of an Customer and save it on a database.
  All the created records are displayed on a ListView.</p>
  
  <p>What I want to do is to create a SearchBar that allows me to search Customer Records that is inside my ListView. In a separate program, I've tried to create a searchbar but I was only able to search records from a pre-defined ListView.</p>
  
  <p>The searchbar I need to do should allow me to search on a ListView that comes from a database.</p>
  
  <p>Hope you can help me with this.</p>
  
  <p>Here are some of my codes. If you need to see more. Please let me know. Thanks a lot.</p>
  
  <p><strong>CustomerViewModel.cs</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.ComponentModel;
  using System.Linq;
  using System.Runtime.CompilerServices;
  using System.Text;
  using System.Threading.Tasks;
  using Xamarin.Forms;
  using XamarinFormsDemo.Models;
  using XamarinFormsDemo.Services;
  
      namespace XamarinFormsDemo.ViewModels
      {
      public class CustomerVM : INotifyPropertyChanged
      {
  
          private List&lt;Customer&gt; _customerList;
  
  
      public List&lt;Customer&gt; CustomerList
      {
          get { return _customerList; }
          set
          {
              _customerList = value;
              OnPropertyChanged();
          }
      }
  
  
  
  
      public CustomerVM()
      {
          InitializeDataAsync();
      }
  
      private async Task InitializeDataAsync()
      {
          var customerServices = new CustomerServices();
  
          CustomerList = await customerServices.GetCustomerAsync();
      }
  
  
      public event PropertyChangedEventHandler PropertyChanged;
  
      protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
      {
          var handler = PropertyChanged;
          if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
          }
  
  
      }
  }
  </code></pre>
  
  <p><strong>CustomerPage.xaml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           x:Class="XamarinFormsDemo.Views.ClientListPage"
           xmlns:ViewModels="clr-namespace:XamarinFormsDemo.ViewModels;assembly=XamarinFormsDemo"
           xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
           BackgroundImage="bg3.jpg"
           Title="Client List"&gt;
  
  
    &lt;ContentPage.BindingContext&gt;
      &lt;ViewModels:CustomerVM/&gt;
    &lt;/ContentPage.BindingContext&gt;
  
  
    &lt;StackLayout Orientation="Vertical"&gt;
  
  
  
      &lt;ListView x:Name="CustomerListView"
            ItemsSource="{Binding CustomerList}"
            HasUnevenRows="True"&gt;
        &lt;ListView.ItemTemplate&gt;
          &lt;DataTemplate&gt;
           &lt;ViewCell&gt;
              &lt;Grid Padding="10" RowSpacing="10" ColumnSpacing="5"&gt;
                &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="*"/&gt;
                &lt;/Grid.RowDefinitions&gt;
                &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
                &lt;/Grid.ColumnDefinitions&gt;
  
                &lt;controls:CircleImage Source="icon.png"
                   HeightRequest="66"
                   HorizontalOptions="CenterAndExpand"
                   Aspect="AspectFill"
                   WidthRequest="66"
                   Grid.RowSpan="2"
                 /&gt;
  
  
                &lt;Label Grid.Column="1"
                   Text="{Binding CUSTOMER_NAME}"
                   TextColor="#24e97d"
                   FontSize="24"/&gt;
  
  
  
            &lt;Label Grid.Column="1"
                    Grid.Row="1"
                     Text="{Binding CUSTOMER_CODE}"
                     TextColor="White"
                     FontSize="18"
                     Opacity="0.6"/&gt;
  
  
            &lt;Label Grid.Column="1"
                Grid.Row="2"
                Text="{Binding CUSTOMER_CONTACT}"
                 TextColor="White"
                 FontSize="18"
                 Opacity="0.6"/&gt;
  
  
  
          &lt;/Grid&gt;
        &lt;/ViewCell&gt;
      &lt;/DataTemplate&gt;
    &lt;/ListView.ItemTemplate&gt;
  
  &lt;/ListView&gt;
  
  
  &lt;StackLayout Orientation="Vertical"
           Padding="30,10,30,10"
           HeightRequest="20"
           BackgroundColor="#24e97d"
           VerticalOptions="Center"
           Opacity="0.5"&gt;
    &lt;Label Text="© Copyright 2016   SMESOFT.COM.PH   All Rights Reserved "
           HorizontalTextAlignment="Center"
           VerticalOptions="Center"
           HorizontalOptions="Center" /&gt;
      &lt;/StackLayout&gt;
    &lt;/StackLayout&gt;
  
  
  
  &lt;/ContentPage&gt;
  </code></pre>