How to implement the address bar we see in Google maps and other apps using Xamarin

Question

Hello I'm new to Xamarin development. I am trying to implement the address bar feature in the application. When user starts typing the address I want to show the suggestions using Googles places API.

I have already got the background service calls to google and getting the suggestions in a LIST and trying to bind the list in the VIEW. But when binding the application is crashing and look of List is also doesn't look as expected.

View:

<Entry Placeholder="From Address" x:Name="FromAddressTxtbx" Text="{Binding AddressText}" TextChanged="Handle_TextChanged_1"/>
        <ListView ItemsSource="{Binding Addresses}" >
      <ListView.ItemTemplate>
        <DataTemplate>
             <TextCell Text="{Binding Address}"/>
             </DataTemplate>
             </ListView.ItemTemplate>
           </ListView>

Can anyone please provide me a suggestion or Direction I want this look like address bar in the UBER app.

Thank in advance

You could refer to this discussion. https://stackoverflow.com/questions/38417979/xamarin-forms-autocomplete-crossplatform — Junior Jiang, Jul 02 '19 at 08:16
Thanks for the direction. But it is still no help. I’m really new xamarin or wpf development. So, any code sample will be great full — LReddy, Jul 03 '19 at 02:15
Okey, here is a solution maybe your want, I will update in answer. — Junior Jiang, Jul 03 '19 at 05:52

score 0 · Answer 1 · answered Jul 03 '19 at 06:17

Here is a solution about using Entry and ListView to show updated list when text changed in Entry.

Xaml:

<Entry x:Name="MainEntry" TextChanged="MainEntry_TextChanged" Placeholder="Inupt Adress"/>
<ListView x:Name="NameListView" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding .}" TextColor="Navy" FontSize="40"/>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ContentPage:First setting example data for ListView,

List<string> adressnames = new List<string>()
        {
            "Alabama", "Florida" , "Kentucky" , "Missouri", "North Carolina" ,"South Dakota" , "Wisconsin"
        };
NameListView.ItemsSource = adressnames;

Now when Text changed , ListView will list updated data:

private void MainEntry_TextChanged(object sender, TextChangedEventArgs e)
{
    var keyword = MainEntry.Text;
    NameListView.ItemsSource = adressnames.Where(name => name.Contains(keyword));
}

By the way , you also can use SearchBar to achieve it:

<SearchBar x:Name="MainSearchBar" TextChanged="MainSearchBar_TextChanged"  Placeholder="Inupt Adress"/>

With text Changed method:

private void MainSearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
    var keyword = MainSearchBar.Text;
    NameListView.ItemsSource = adressnames.Where(name => name.Contains(keyword));
}

Thank you. I figured the issue Just now. The is caused by clearing the binding oberservational list — LReddy, Jul 04 '19 at 05:33
@LReddy Glad to hear that ! If be helpful, thanks for marking it *.^ — Junior Jiang, Jul 04 '19 at 05:39

How to implement the address bar we see in Google maps and other apps using Xamarin

1 Answers1