Collapse All Expand All

This section describes adding a XuniAutoComplete control to your portable or shared application and displaying a list of items in the drop-down as suggestions for users.

Complete the following steps to display a XuniAutoComplete control.

• Step 1: Add a list of pre-defined suggestions
• Step 2: Add a XuniAutoComplete control and populate it with suggestions
• Step 3: Run the Project

The following image shows how the XuniAutoComplete control provides a list of suggestions in a drop-down list when the user enters text.

Step 1: Add a list of pre-defined suggestions

Complete the following steps to add a list of items to be displayed in the drop-down list.

1. Create a new portable or shared Xamarin.Forms application (Refer Creating a New Xamarin.Forms App for detailed instructions).
2. Add a new class (say Country.cs) to your application.
3. Add the following code to initialize a collection of items (here, a list of major countries).

   C#	Copy Code
   public class Country { public string Name { get; set; } public static List<Country> GetCountries() { List<Country> listCountries = new List<Country>(); string[] countries = new string[] { "United States", "Chile", "Great Britain", "India", "Indonesia", "Greece" }; foreach (var item in countries) { listCountries.Add(new Country() { Name = item }); } return listCountries; } }

Step 2: Add a XuniAutoComplete control and populate it with suggestions

1. Add a new Forms XAML Page (say Page1.xaml) to your application.
2. Edit the <ContentPage> tag to include the required Xuni reference.

   XAML	Copy Code
   xmlns:xuni="clr-namespace:Xuni.Forms.Input;assembly=Xuni.Forms.Input"

3. Initialize an editable XuniAutoComplete control and set some of its basic properties such as Name, DisplayMemberPath, etc. by adding the given markup between <StackLayout></StackLayout> tags inside the <ContentPage></ContentPage> tags.

   XAML

   Copy Code

   <StackLayout Orientation="Vertical"> <xuni:XuniAutoComplete x:Name="autoComplete" IsEditable="True" HorizontalOptions="FillAndExpand" DropDownBackgroundColor="Gray" DisplayMemberPath="Name" VerticalOptions="Start"> <xuni:XuniAutoComplete.ListView> <ListView> <ListView.ItemTemplate> <DataTemplate> <StackLayout Orientation="Horizontal" > <Label Text="{Binding Name}" /> </StackLayout> </DataTemplate> </ListView.ItemTemplate> </ListView> </xuni:XuniAutoComplete.ListView> </xuni:XuniAutoComplete> </StackLayout>

4. Expand the Page1.xaml node in the Solution Explorer to open Page1.xaml.cs and add the given code in the constructor to set ItemsSource property of the AutoComplete control.

   C#	Copy Code
   this.autoComplete.ItemsSource = Country.GetCountries();

Step 3: Run the Project

1. In the Solution Explorer, double-click App.cs file to open it.
2. To return a Forms XAML Page, set the MainPage to Page1 in the constructor App() as illustrated in the given code

   C#	Copy Code
   public App() { // The root page of your application MainPage = new Page1(); }

3. Some additional steps are required to run iOS and WinPhone apps:
   • iOS App:
     1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
     2. Add the following code to the FinishedLaunching() method.

        C#	Copy Code
        Xuni.Forms.Input.Platform.iOS.Forms.Init();

   • WinPhone App:
     1. In the Solution Explorer, expand the MainPage.xaml inside YouAppName.WinPhone project.
     2. Double click the MainPage.xaml.cs to open it and add the following code to the class constructor.

        C#	Copy Code
        Xuni.Forms.Input.Platform.WinPhone.XuniInputRenderer.Init();

4. Press F5 to run the project.

 

 

---

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback