UI for Xamarin Deep Dive: Typing Efficiency with AutoComplete

Welcome to Day 5 of our UI for Xamarin article series. You survived the long reads! On the plus side, hopefully your mobile app is coming together nicely using specialized polished UI controls. Let's finish off the week with something lightweight, but important - the icing on the cake so to speak.

Let's face it - other than teenage kids, very few people enjoy typing on their mobile devices. Although keyboards, both physical and digital, have come a long way, mobile device typing is fraught with typos and frustrating auto-corrections. If and when the users of your mobile app have to type, you as a developer should try to ease the pain and aim to make it a pleasurable experience if possible.

The maxim of less is more holds true - offer suggestions and allow the user to type as little as feasible. This is true for any mobile platform, but puts the onus on developers. It turns out that pattern matching and offering suggestions with customizable UI during typing is tricky business.

The Telerik AutoComplete in UI for Xamarin is a simple, yet nifty control - it provides customizable suggestions as the user is typing. With robust data-binding options, the AutoComplete control makes it easy for developers to ease the users' pain by allowing them to choose one or multiple matching items from a list. The corresponding UI is customizable and caters to the nuances of individual mobile platforms.

This article takes an under-the-covers look at the Telerik AutoComplete control and what it can do for developers building Xamarin.Forms apps.

Show Me the Money

Since seeing is believing, here's a quick first look at a working AutoComplete control - allowing multiple selections from a pattern-matched list, along with a custom-colored look.

The Basics

First, let us get started with the AutoComplete control in its most simple form - here's some code showing the XAML markup and essentially feeding the AutoComplete control a list of strings. As the user starts typing, it does default pattern matching and aids in completing user input by offering suggestions.

// XAML Markup
.. xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input" ..
<telerikInput:RadAutoComplete BackgroundColor="White" x:Name="autoComplete" Watermark="Search here..." />

// Code Behind
this.autoComplete.ItemsSource = new List<string>()
{
    "Freda Curtis",
    "Jeffery Francis",
    "Eva Lawson",
    "Emmett Santos",
    "Theresa Bryan",
    "Jenny Fuller",
    "Terrell Norris",
    "Eric Wheeler",
    "Eduardo Thomas",
    "Jarvis Victorine",
    "Dane Gabor"
};

And here's the result - notice the nuanced differences across mobile platforms.

True Data Binding

In reality, AutoComplete usage will need more advanced and controlled data-binding to a data source against which pattern-matching will be performed at runtime. You may have a collection of objects and want the AutoComplete control to treat one text property on each object as the combined data source.

For example, when building my Aviation app that shows various planes and their top speeds, I started with a simple POCO class, like so:

public class JetData
{
    public string JetName { get; set; }
    public int JetMaxSpeed { get; set; }

    public JetData(string Name, int MaxSpeed)
    {
        this.JetName = Name;
        this.JetMaxSpeed = MaxSpeed;
    }
}

Next, here's a faux ViewModel class to hold a collection of jets - sample data being made up in line, like below:

public class SpeedViewModel
{
    public List<JetData> JetDataSource;

    public SpeedViewModel()
    {
        InitializeJetData();
    }

    private void InitializeJetData()
    {
        JetDataSource = new List<JetData>()
        {
            new JetData("Boeing Business Jet",890),
            new JetData("Gulfstream V",965),
            new JetData("Citation X",1125),
            new JetData("Bombardier Challenger 604",882),
            new JetData("Embraer Legacy",834),
            new JetData("Bombardier Learjet 60",839),
            new JetData("Beech Jet 400A",866),
            new JetData("Hawker 800XP",829),
            new JetData("Citation V",932)
        };
    }
}

With a data source in place, now I can proceed to bind the Telerik AutoComplete appropriately, like so:

// XAML Markup
<TelerikInput:RadAutoComplete x:Name="autoCompleteSearchBox" TextSearchPath="JetName"  />

// Code Behind
SpeedViewModel SVM = new SpeedViewModel();
this.autoCompleteSearchBox.ItemsSource = SVM.JetDataSource;

Notice how the ItemSource property of the AutoComplete control is being fed the data collection off the ViewModel, but the TextSearchPath is being set to a specific property of each object.

Flexibility

The Telerik AutoComplete control exposes a few properties that are aimed at providing flexibility to developers as they use the control in their apps. We developers love customization options, right?

• BackgroundColor: The text background color as the user is typing the text.
• TextSearchPath: Defines the object property name the search function will be executed against.
• ImagePath: Defines the object property name holding a path to an image.
• CompletionMode: Defines pattern matching mode against user-entered text | Values - Contains/StartsWith
• DisplayMode: Defines whether Autocomplete allows single/multiple selections | Values - Text/Tokens

Back in the aviation app example, the XAML markup could be updated to use some of these properties, as below (the corresponding result follows):

<TelerikInput:RadAutoComplete BackgroundColor="Silver" x:Name="autoCompleteSearchBox" Margin="0,15,0,0" 
    TextSearchPath="JetName" CompletionMode="Contains"  DisplayMode="Tokens" />

Suggestion Templating

Like the pattern-matching capabilities of the Telerik AutoComplete control, but want to customize the user experience further? Sure - developers can have fine-grained control over the way the suggested items list shows up as the user is typing. This is controlled through the SuggestionItemTemplate - a customizable data template that defines how each of the suggestion items should look like.

Let's take a look at customizing the suggestion templates through an example. Say you are using the AutoComplete control in a chat application and want to show the connectivity status of each person, in addition to their name, in the suggestions list - here's a sample business object:

public class BusinessObject
{
    public BusinessObject(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }
    
    public string Name { get; set; }
    
    public string ImageSource { get; set; }
}

And here's a sample View Model filling in a faux collection of business objects that can act as a data source for the AutoComplete control:

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<BusinessObject>()
        {
            new BusinessObject("Freda Curtis", "available.png"),
            new BusinessObject("Jeffery Francis", "away.png"),
            new BusinessObject("Eva Lawson", "available.png"),
            new BusinessObject("Emmett Santos", "away.png"),
            new BusinessObject("Eric Wheeler", "busy.png"),
            new BusinessObject("Eduardo Thomas", "away.png"),
            new BusinessObject("Lauretta Pozo", "busy.png"),
            new BusinessObject("Jarvis Victorine", "away.png"),
            new BusinessObject("Dane Gabor", "busy.png")
        };
    }
    
    public List<BusinessObject> Source { get; set; }
}

Now, here's the XAML markup for the AutoComplete control where we can do the binding to the local View Model - notice the use of the SuggestionItemTemplate that puts the person's name and status side by side:

.. xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input" ..
<telerikInput:RadAutoComplete BackgroundColor="White" ItemsSource="{Binding Source}" TextSearchPath="Name" VerticalOptions="Start" Watermark="Search here...">
  <telerikInput:RadAutoComplete.BindingContext>
    <local:ViewModel />
  </telerikInput:RadAutoComplete.BindingContext>
  <telerikInput:RadAutoComplete.SuggestionViewHeight>
    <OnPlatform x:TypeArguments="x:Double" iOS="400" Android="200" WinPhone="400" />
  </telerikInput:RadAutoComplete.SuggestionViewHeight>
  <telerikInput:RadAutoComplete.SuggestionItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label TextColor="Black" Text="{Binding Item.Name}" FontSize="24" Margin="5" />
        <Image Grid.Column="1" HeightRequest="20" WidthRequest="20" Source="{Binding Item.ImageSource}" Margin="5" />
      </Grid>
    </DataTemplate>
  </telerikInput:RadAutoComplete.SuggestionItemTemplate>
</telerikInput:RadAutoComplete>

And now the result, with a customized suggestion template catering to the nuances of each mobile platform:

Conclusion

The Telerik AutoComplete control looks simple - but is doing a lot of heavy lifting behind the scenes. The performant pattern-matching is powered by sophisticated algorithms, but your productivity can be boosted in not having to think about implementations. Simply drop in the AutoComplete control and customize it for your needs. You will make typing a better experience on your mobile apps. Happy users make for increased app usage and, in turn, happier developers.

This concludes our weeklong UI for Xamarin deep dive articles, showcasing individual controls and their usage. The goal is simple - make Xamarin developers more productive and successful with polished performant UI controls out of the box. We've only scratched the surface though - there are lot more controls in the UI for Xamarin suite. Look for another article series coming up soon. Until then, stay classy developers!

Other articles in this series:

• UI for Xamarin Deep Dive: Starting Strong
• UI for Xamarin Deep Dive: Must-have Interactivity with ListView
• UI for Xamarin Deep Dive: Solid Organization with SideDrawer
• UI for Xamarin Deep Dive: User Productivity with Calendar