Xamarin Forms contacts search

I’m in the middle of writing a Xamarin Forms app and today I needed to add in a contacts search page, and remembered that James Montemagno had created a plugin that exposes contacts in a platform neutral manner so I downloaded it and used it in my app.

I also wanted to add a search bar, and again there’s a control in XF for that, so I ended up with (somewhat simplified) the following XAML…

  
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <SearchBar x:Name="search" Placeholder="Search">
  </SearchBar>
  <ListView Grid.Row="1" ItemsSource="{Binding FilteredContacts}" 
    IsGroupingEnabled="true" GroupDisplayBinding="{Binding Key}" 
    GroupShortNameBinding="{Binding Key}">
    <ListView.ItemTemplate>  
      <DataTemplate>
        <TextCell Text="{Binding Name}" TextColor="Black" 
          Detail="{Binding PhoneNumber}" DetailColor="Gray">
        </TextCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>  

I have removed some of the XAML as it’s not that important to this post (it’s available in the download). Now, with that in place (and a load of code in the view model which I’ll get to in a minute) I got a UI as follows…

So far so good. Then I needed to hook up the search box, and as I’m using XAML (and if you’re not, you should give it a try as it’s way easier to create UI’s using it) I needed a way to bind to the search box to that I could respond to the TextChanged event.

Another excellent package that you’ll want to use it the Xamarin.Behaviors package by Corrado – massive thanks to him for putting this together, it’s excellent!

Behaviors to the rescue

By adding a behavior into the XAML, I can handle an event – so in this case I added the following to the SearchBar…

  <SearchBar x:Name="search" Placeholder="Search">
    <b:Interaction.Behaviors>
      <b:BehaviorCollection>
        <b:EventToCommand EventName="TextChanged" 
          Command="{Binding SearchTextChanged}" 
          CommandParameter="{Binding Text, Source={x:Reference search}}"/>
      </b:BehaviorCollection>
    </b:Interaction.Behaviors>
  </SearchBar>

This hooks the TextChanged event of the search bar, calls the SearchTextChangedCommand on my view model, and passes through the value of the Text property of the search bar. Yay!.

Or not.

The problem I found was that my command was being passed a string, but it was the text before the ne character was entered, so say I pressed ‘X’ in an empty search bar, my code would be called with an empty string. Pressing ‘A’ next, my command would get ‘X’, and pressing ‘M” next, my code would get ‘XA’. I was always getting the data just prior to the new character – so I guess that the TextChanged event should be more clearly termed as the TextChanging event.

Anyway, I needed to fix this – so looked at the actual event and it contains two properties, the current text and the new value. All I needed to do was get the new vale of the event arguments and I’d be away.

To the best of my knowledge there is no way to bind to the event arguments, you need to write some additional code (this was true in WPF and Silverlight, I’ve done exactly the same there too). So, I cranked out a new behavior that attaches to the SearchBar’s TextChanged event, and calls the command with the new value of the text property. My XAML is therefore this…

  <SearchBar x:Name="search" Placeholder="Search">
    <b:Interaction.Behaviors>
      <b:BehaviorCollection>
        <bh:SearchBarTextChanged Command="{Binding SearchTextChanged}"/>
      </b:BehaviorCollection>
    </b:Interaction.Behaviors>
  </SearchBar>

Here I'm using my SearchBarTextChanged behavior to hook to the SearchTextChanged command, and sure enough now when I type in the search bar I get the desired effect. Excellent!

Filtering in code

In the view model I use James’ contacts plugin to select all contacts that have a mobile phone, and that have at least a forename or surname (my real code blew up on a colleagues iPhone as he has a contact with just a company name). I tuck this list away as the source, and then create a filtered collection from the source and the filter statement.

CrossContacts.Current.PreferContactAggregation = false;
var hasPermission = CrossContacts.Current.RequestPermission().Result;

if (hasPermission)
{
  // First off convert all contacts into ContactViewModels...
  var vms = CrossContacts.Current.Contacts.Where(c => Matches(c))
    .Select(c => new ContactViewModel(c));

  // And then setup the contact list
  var grouped = from contact in vms
    orderby contact.Surname
    group contact by contact.SortByCharacter into contactGroup
    select new Grouping (contactGroup.Key, contactGroup);

  foreach (var g in grouped)
  {
    _contacts.Add (g);
    _filteredContacts.Add (g);
  }
}

The above code uses some Linq to select all contacts and group them by first character of their surname. I created a simple Matches(contact) function that checks that the contact has a mobile phone number and also that they have one of forename or surname.

Then I have the code that is called to filter the collection when you type text into the search bar...

private void FilterContacts(string filter)
{
  _filteredContacts.Clear ();

  if (string.IsNullOrEmpty(filter))
  {
    foreach (var g in this.Contacts)
      _filteredContacts.Add (g);
  } 
  else
  {
    // Need to do some filtering
    foreach (var g in this.Contacts)
    {
      var matches = g.Where (vm => vm.Name.Contains (filter));

      if (matches.Any())
      {
        _filteredContacts.Add (new Grouping (g.Key, matches));
      }
    }
  }
}

This is a bit ropey but does the trick. As the collection is an ObservableCollection, any changes are shown in the UI immediately.

Code

I’ve created a simple example project (the one shown above) that you can download. Hopefully this will help someone out. I’ve not tried this on Android or Windows Phone as yet, but as none of the code is in the platform specific library I can’t see any reason for it not to work on those platforms too.

Bye for now!