Custom ListView with search/filter function

Hi there,

I've just started my first app.

I've got some pictures but apparently I'm not allowed to link them yet. The first page of the app is a list of people names. The second page, the person's information page, is made up of three separate lists relating to that person; "Tags", "Connections" and "Notes".

I have got the first page working with a ListView with the search/filter function working.

However, person information page has those three other lists that are expandable, therefore this needs a ScrollView to see the whole page, which means the lists of "Tags", "Connections" and "Notes" can't be ListViews.

Note: ScrollViews should not be nested. In addition, ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView.

I have got this working using c# to populate StackViews for each of the lists with labels and 1px BoxViews for the dividers.

For continuity, I would like the same system for both pages.

If I do the c# StackLayout for the main page, every time the search field changes, I would have to remove all items from the StackView, filter the results and then repopulate the stack. Is this good practice?

(Note: I would like a fast search that updates as the user types, not just when they press "search" so it would be many updates to the stack)

I guess another way is to use ListViews that I modify so that it is okay to use them in a ScrollView? Do you recommend this? I do like the functionality of the ListViews and would prefer to use them.

I'm targetting Android and iOS.

Thanks for having a look at my question,
Stu

Posts

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    You could change your page using a tabbedpage with 3 tabs. So you can add a ListView of every page
  • I have considered this.

    To be honest, it doesn't matter how the information is provided. However, I am doing this project to learn more about Xamarin. In future, if a particular layout is important to a client, I would like to be able to make it. Surely there must be a way to make the desired layout.

    If it requires a lot of work, I think that must just be part of app development. I'm happy to do it. Unless there are other programs more suited to the task than Xamarin, however, Xamarin appears to have very good cross-platform support. What are your thoughts?

  • This is a link to a picture of the desired layout. (On a phone, each side would be a page)

    image.ibb.co/k3VFfn/Tablet_view.png

    I guess I could use a ListView for the screen on the left and StackLayouts on the right and just force all of the styling to be match? Is this wise? I imagine some devices are difficult to force into a specific styling for ListViews?

    I am using a simple filter for the ListView to search for people on the left hand side.

    private void SearchBar_OnTextChanged(object sender, TextChangedEventArgs e)
    {
        PersonsView.BeginRefresh();
        if (string.IsNullOrWhiteSpace(e.NewTextValue))
            PersonsView.ItemsSource = personsList;
        else
            PersonsView.ItemsSource = personsList.Where(i => i.Name.ToLower().Contains(e.NewTextValue.ToLower()));
        PersonsView.EndRefresh();
    }
    

    If I could re-create this functionality using another method that would be perfect. This is doable with a StackLayout populated with labels, I'm just not sure about performance issues given that it would have to clear and re-populate the stack each time the user entered a letter in the search bar. What is the best way to generate a scrollable list of labels that can be updated quickly and is not bound to the styling of a ListView?

Sign In or Register to comment.