Controls > Input > AutoComplete > Quick Start: Populating AutoComplete with Data |
This section describes adding the AutoComplete 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 an AutoComplete control.
The following image shows how the AutoComplete control provides a list of suggestions in a drop-down list when the user enters text.
Complete the following steps to add a list of items to be displayed in the drop-down list.
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; } } |
XAML |
Copy Code |
---|---|
xmlns:c1="clr-namespace:C1.Xamarin.Forms.Input;assembly=C1.Xamarin.Forms.Input" |
XAML |
Copy Code |
---|---|
<StackLayout Orientation="Vertical"> <c1:C1AutoComplete x:Name="autoComplete" IsEditable="True" HorizontalOptions="FillAndExpand" DropDownBackgroundColor="Gray" DisplayMemberPath="Name" VerticalOptions="Start"> <c1:C1AutoComplete.ListView> <ListView> <ListView.ItemTemplate> <DataTemplate> <StackLayout Orientation="Horizontal" > <Label Text="{Binding Name}" /> </StackLayout> </DataTemplate> </ListView.ItemTemplate> </ListView> </c1:C1AutoComplete.ListView> </c1:C1AutoComplete> </StackLayout> |
C# |
Copy Code |
---|---|
this.autoComplete.ItemsSource = Country.GetCountries(); |
C# |
Copy Code |
---|---|
public App() { // The root page of your application MainPage = new Page1(); } |
C# |
Copy Code |
---|---|
C1.Xamarin.Forms.Input.Platform.iOS.C1InputRenderer.Init(); |
C# |
Copy Code |
---|---|
C1.Xamarin.Forms.Input.Platform.UWP.C1InputRenderer.Init(); |