Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (383)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (86)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (56)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin

Overview of the Autocomplete control in Xamarin.Forms

Introduction

Welcome to a quick walk-through of Syncfusion’s autocomplete control for the Xamarin.Forms platform. The autocomplete control provides end users with possible matches as soon as they start typing, and includes key features like different suggestion modes, matching text highlights, multi-selection, diacritic sense, custom search, and much more.

In this blog, we will learn how to build the UI depicted in the following figure.

Xamarin.Forms autocomplete control

Creating a project from a Visual studio template

Refer to this section of the Xamarin Getting Started guide to create a Xamarin.Forms application through Visual Studio.

Adding references from NuGet

Refer to our documentation for the steps for obtaining Essential Studio components in your solution.

Note: Refer to our documentation for the dependency assembly details for adding the autocomplete control to your project. After the assembly reference has been added, an additional step is required for iOS and UWP projects.

Adding control initialization code

For our first example, let’s look at an emailing scenario like the one in the previous image, where the To address bar needs an autocomplete control. In the following steps, the necessary XAML code has been added to initialize the autocomplete control.

Step 1: Include the SfAutoComplete namespace in the respective page.

<contentpage x_class="MultiSelect.MainPage">
  </contentpage> 

Step 2: Declare SfAutoComplete with the content page by defining the height as 40, since the address bar needs a 40-pixel height.

<contentpage x_class="MultiSelect.MainPage">  
              <autocomplete:sfautocomplete heightrequest="40">
  </autocomplete:sfautocomplete></contentpage>

 

Autocomplete control with 40-pixel height

Binding data

Naturally, the autocomplete control will need to be bound with a data source. For our example, we need to show contact details such as names, IDs, pictures, and their online status. So, we need to create a model and its data as follows.

Creating model

Here we are creating a real-time entity named ContactsInfo with necessary members such as name, ID, online status, and picture.

public class ContactsInfo 
      {
          public string ContactName { get; set;}
          public string ContactID { get; set;}
          public string ContactStatus { get; set;}
          public ImageSource ContactImage { get; set;}
   
      }

View model

Next, we create the ViewModel class to hold the collection of contacts by populating the ContactsInfo for several entities with their values for contact name, ID, online status, and picture.

 
 public class ViewModel
      {
          public
  ObservableCollection<contactsinfo> Contacts = new
  ObservableCollection<contactsinfo>();
          public ViewModel()
          {
              Contacts =
  GetContactDetails();
          }
   
          private Random random = new Random();
   
          public
  ObservableCollection<contactsinfo> GetContactDetails()
          {
             
  ObservableCollection<contactsinfo> customerDetails = new
  ObservableCollection<contactsinfo>();
   
              for (int i = 0; i < CustomerNames.Count(); i++)
              {
                  var details = new ContactsInfo()
                  {
                     
  ContactType = contactType[random.Next(0, 5)],
                      ContactName = CustomerNames[i],
                     
  ContactNumber = CustomerNames[i].Replace(" ", "") + "@outlook.com",
   
                     
  ContactImage = "Image" + (i % 19) + ".png",
                  };
                 
  customerDetails.Add(details);
              }
              return customerDetails;
          }
   
          string[] contactStatus = new string[]
          {
              "Available.png", "Offline.png", "Away.png","Busy.png", "DND.png"
          };
   
          string[] CustomerNames = new string[] 
          {
              "Kyle","Gina","Irene","Katie","Michael",
              "Oscar","Ralph","Torrey","William","Bill",
              "Daniel","Frank","Brenda","Danielle","Fiona",
              "Howard","Jack","Larry","Holly","Jennifer",
              "Liz","Pete","Steve","Vince","Zeke",
              "Aiden","Jackson","Mason","Liam","Jacob",
              "Jayden","Ethan","Noah","Lucas","Logan",
              "Caleb","Caden","Jack","Ryan","Connor",
              "Michael","Elijah","Brayden","Benjamin","Nicholas",
              "Alexander","William","Matthew","James","Landon",
              "Nathan","Dylan","Evan","Luke","Andrew",
              "Gabriel","Gavin","Joshua","Owen","Daniel",
              "Carter","Tyler","Cameron","Christian","Wyatt",
              "Henry","Eli","Joseph","Max","Isaac",
              "Samuel","Anthony","Grayson","Zachary","David",
              "Christopher","John","Isaiah","Levi","Jonathan",
              "Oliver","Chase","Cooper","Tristan","Colton",
              "Austin","Colin","Charlie","Dominic","Parker",
              "Hunter","Thomas", "Alex","Ian","Jordan",
              "Cole","Julian","Aaron","Carson","Miles",
              "Blake","Brody","Adam","Sebastian","Adrian",
              "Nolan","Sean","Riley","Bentley","Xavier",
              "Hayden","Jeremiah","Jason","Jake","Asher",
              "Micah","Jace","Brandon","Josiah","Hudson",
              "Nathaniel","Bryson", "Ryder","Justin","Bryce",
          };
   
      }

Now, we can bind the ViewModel’s contacts collection to SfAutoComplete in the XAML page.

 <contentpage x_class="MultiSelect.MainPage">      
             <autocomplete:sfautocomplete heightrequest="40" datasource="{Binding Contacts}">   
 </autocomplete:sfautocomplete></contentpage>

After the data source has been applied to the autocomplete control, it will simply read the whole object, so the name you want to search for should be assigned to the DisplayMemberPath of the control.

 <contentpage x_class="MultiSelect.MainPage">               
             <autocomplete:sfautocomplete heightrequest="40" datasource="{Binding Contacts}" dropdownitemsheight="40" dropdowncornerradius="20" dropdownmaximunheight="160" displaymemberpath="ContactName">   
 </autocomplete:sfautocomplete></contentpage>

Note: With the previous code, we have customized the drop-down’s corner, item height, and maximum height. After these customizations the design looks like the following figure:

Autocomplete control with customized appearance

Configuring autocomplete to achieve the desired style by using a template

The autocomplete control allows you to provide templates to the pop-up items. For our requirements, we need to display the contact’s image with an online status notification to the left, and the contact’s name and email ID to the right.

<contentpage x_class="MultiSelect.MainPage">    
    <autocomplete:sfautocomplete heightrequest="40" datasource="{Binding Contacts}" displaymemberpath="ContactName">
        <autocomplete:sfautocomplete.itemtemplate>
            <datatemplate>                            
                <stacklayout padding="15,10" verticaloptions="Center" horizontaloptions="Start" orientation="Horizontal">
                                  
                    <grid>
                        <img source="{Binding ContactType}" verticaloptions="Center" horizontaloptions="Center" heightrequest="50" widthrequest="50" data-action="zoom">
                        <img source="{Binding ContactImage}" verticaloptions="Center" horizontaloptions="Center" heightrequest="46" widthrequest="46" data-action="zoom">                                 
                    </grid>
                    <stacklayout margin="10,5" orientation="Vertical">
                        <label text="{Binding ContactName}" fontsize="18"></label>
                        <label text="{Binding ContactNumber}" fontsize="12"></label>    
                    </stacklayout>
                              
                </stacklayout>
            </datatemplate>
        </autocomplete:sfautocomplete.itemtemplate>
    </autocomplete:sfautocomplete>   
 </contentpage>

Now, the control appears like so:

Pop-up items with templates applied

Enabling token selection

The autocomplete control supports built-in customizable token styles for the close button. This support is enabled by setting DisplayMode to MultiSelectToken.

<contentpage x_class="MultiSelect.MainPage">   
   <autocomplete:sfautocomplete heightrequest="40" datasource="{Binding Contacts}" displaymemberpath="ContactName" displaymode="MultiSelectToken" tokenlayoutmode="VerticalWarp">
       <autocomplete:sfautocomplete.itemtemplate>
           <datatemplate>                             
               <stacklayout padding="15,10" verticaloptions="Center" horizontaloptions="Start" orientation="Horizontal">                                 
                   <grid>
                       <img source="{Binding ContactType}" verticaloptions="Center" horizontaloptions="Center" heightrequest="50" widthrequest="50">
                       <img source="{Binding ContactImage}" verticaloptions="Center" horizontaloptions="Center" heightrequest="46" widthrequest="46">
                   </grid>                                 
                   <stacklayout margin="10,5" orientation="Vertical">
                                   <label text="{Binding ContactName}" fontsize="18"></label>
                                   <label text="{Binding ContactNumber}" fontsize="12"></label>
                   </stacklayout>                             
               </stacklayout>
           </datatemplate>
       </autocomplete:sfautocomplete.itemtemplate>
   </autocomplete:sfautocomplete>   
</contentpage> 

Also with the previous code, TokenLayoutMode has been set as VerticalWarp. This TokenLayoutMode helps us place the overflowed token in either a horizonal scroll or vertical wrap.

Autocomplete control with customized token style

Customizing other fields

As stated previously, we are preparing a very simple email composing module with some fields such as To and Subject, a main editor, and buttons like Send and Cancel. The following code will meet our UI requirements.

<!--?xml version="1.0" encoding="utf-8" ?--><!--?xml version="1.0" encoding="utf-8" ?-->
 <contentpage x_class="MultiSelect.MainPage">
 <!--AutoComplete style will be
 updated-->
     <grid>
         <grid.rowdefinitions>
             <rowdefinition height="Auto"> <!--For Header-->
             <rowdefinition height="Auto"> <!--For Address bar and subject-->
             <rowdefinition height="*"> <!--For main editor-->
         </rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>
   
         <grid backgroundcolor="OrangeRed" heightrequest="50">
             <grid.columndefinitions>
                 <columndefinition width="*">
                 <columndefinition width="Auto">
                 <columndefinition width="Auto">
             </columndefinition></columndefinition></columndefinition></grid.columndefinitions>
   
 <!--Adding header with Send and
 Cancel buttons-->
             <label margin="10,0" text="Email
 - Compose" fontattributes="Bold" verticaloptions="Center" textcolor="White">
             <label grid.column="1" margin="10,0" text="CANCEL" fontattributes="Bold" verticaloptions="Center" textcolor="White">
             <label grid.column="2" text="SEND" margin="10,0" fontattributes="Bold" verticaloptions="Center" textcolor="White">
         </label></label></label></grid>
   
         <grid grid.row="1" margin="10,0,10,0">
             <grid.columndefinitions>
                 <columndefinition width="40"> <!--For Title field-->
                 <columndefinition width="*"> "/> <!--For SfAutoComplete-->
             </columndefinition></columndefinition></grid.columndefinitions>
             <grid.rowdefinitions>
                 <rowdefinition height="50"> <!--For To field-->
                 <rowdefinition height="50"> <!--For Cc field-->
                 <rowdefinition height="50"> <!--For Bcc field-->
             </rowdefinition></rowdefinition></rowdefinition></grid.rowdefinitions>
   
             <label text="To" verticaloptions="Center" horizontaloptions="Center">
   
 <!--Here’s our SfAutoComplete for To
 address -->
             <autocomplete:sfautocomplete grid.column="1" heightrequest="40">
   
             <label text="To" grid.row="1" verticaloptions="Center" horizontaloptions="Center">
   
 <!--Here’s our SfAutoComplete for Cc
 address-->
             <autocomplete:sfautocomplete grid.row="1" grid.column="1" heightrequest="40">
   
             <label text="To" grid.row="2" verticaloptions="Center" horizontaloptions="Center">
   
 <!--Here’s our SfAutoComplete for
 Bcc address -->
             <autocomplete:sfautocomplete grid.row="2" grid.column="1" heightrequest="40">
   
   
         </autocomplete:sfautocomplete></label></autocomplete:sfautocomplete></label></autocomplete:sfautocomplete></label></grid>
   
         <grid grid.row="2" margin="10,0,10,0">
             <grid.rowdefinitions>
                 <rowdefinition height="50"> <!--For Subject field-->
                 <rowdefinition height="*"> <!--For Main editor-->
             </rowdefinition></rowdefinition></grid.rowdefinitions>
             <entry margin="5,0,0,0" placeholder="Subject" fontsize="15">
             <editor margin="5,10" fontsize="12" grid.row="1" text="Sent
 from my smartphone.">
   
         </editor></entry></grid>
     </grid>
 </contentpage>

Conclusion

The autocomplete control is designed with high customization for every aspect. This control also includes powerful APIs to increase developers’ productivity.

You can download the complete sample from this link.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top