SearchBar inside of a ListView does not respond

Question

I have a ListView with a SearchBar on top to filter the items. Requirements are that the SearchBar scrolls just like the items, so I added the SearchBar to my ListView.

When I tap on the SearchBar, nothing happens. Even when I add a TapGestureRecognizer to the SearchBar, it won't execute the tapped method.

ListView:

<ListView 
CachingStrategy="RecycleElement"
BackgroundColor="{StaticResource listBackgroundColor}"
Grid.Row="1"
Grid.Column="0"
x:Name="listViewUsers"
ItemsSource="{Binding Users}"
ItemTemplate="{StaticResource KontaktDataTemplateSelector}"
ItemTapped="Handle_ItemTapped"
IsPullToRefreshEnabled="false"
SeparatorColor="{StaticResource listSeparatorColor}">
    <ListView.RowHeight>
        <OnPlatform x:TypeArguments="x:Int32">
            <On Platform="iOS">88</On>
            <On Platform="Android">72</On>
        </OnPlatform>
    </ListView.RowHeight>
    <ListView.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <OnPlatform.iOS>
                0,10,0,0
            </OnPlatform.iOS>
            <OnPlatform.Android>
                0,0,0,0
            </OnPlatform.Android>
            <OnPlatform.WinPhone>
                -10,0,0,0
            </OnPlatform.WinPhone>
        </OnPlatform>
    </ListView.Margin>
</ListView>

The ViewCell is very basic:

<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
          xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" 
          prism:ViewModelLocator.AutowireViewModel="True" 
          xmlns:i18n="clr-namespace:One;assembly=One"
          x:Class="One.Views.SuchenViewCell">
    <SearchBar 
        Placeholder="{i18n:Translate Text=suchen}"
        Margin="5, 0, 0, 0"
        Grid.Row="0"
        Grid.Column="0"
        Text="{Binding Suchtext}"
        Style="{StaticResource searchBarStyle}"
        TextChanged="Handle_TextChanged">
        <SearchBar.GestureRecognizers> // only for test, but even this doesn't get executed
            <TapGestureRecognizer
                NumberOfTapsRequired="1"
                Tapped="SearchBar_Tapped">
            </TapGestureRecognizer>
        </SearchBar.GestureRecognizers>
    </SearchBar>
</ViewCell>

I am adding the SearchBar like this in the DataTemplateSelector:

public class KontaktDataTemplateSelector : DataTemplateSelector
{
    private readonly DataTemplate kontaktViewCellDataTemplate;
    private readonly DataTemplate suchenViewCellDataTemplate;

    public KontaktDataTemplateSelector()
    {
        kontaktViewCellDataTemplate = new DataTemplate(typeof(KontaktViewCell));
        suchenViewCellDataTemplate = new DataTemplate(typeof(SuchenViewCell));
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item == null)
        {
            return null;
        }

        UserDto userDto = item as UserDto;

        if (userDto.IsSuchenViewCell)
        {
            return suchenViewCellDataTemplate;
        }
        else
        {
            return kontaktViewCellDataTemplate;
        }
    }
}

Any ideas why SearchBar isn't working as soon as I add it to the ListView? It does work if I put it outside of the ListView, but then it won't scroll and stays on above the ListView, which doesn't meet the requirements.

Answer 1

Yoou need to specify HeightRequest and Width Request of Search Bar in ListView Header

 <ListView.Header>
    <SearchBar HeightRequest="40" WidthRequest="150">...</SearchBar>
 </ListView.Header>

Answer 2

Try to add your SearchBar in the listview's header like this :

<ListView.Header>
   <SearchBar>...</SearchBar>
</ListView.Header>

Answer 3

How do you put the searchBar inside the ListView? .

I think that if you put searchBar like Header of ListView it will work.