Filter Xamarin.Forms CollectionView with ObservableCollection
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Filtering the CollectionView or ListView is actually done by filtering the underlying ObservableCollection. In this video we will learn how all these things fit together and ultimately see how we can apply that in our Xamarin.Forms application to actually filter the CollectionView.
💝 Join this channel to get access to perks:
th-cam.com/channels/ral.html...
🛑 Don't forget to subscribe to my channel for more amazing content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🔗 Links
Sample code github.com/jfversluis/XFFilte...
DataTemplate Video: • Make Your Data Look Pr...
Data Binding Playlist: • Xamarin.Forms ListView...
Xamarin Forms Repo: github.com/xamarin/Xamarin.Forms
Xamarin.Forms CollectionView Docs: docs.microsoft.com/xamarin/xa...
Xamarin.Forms SearchBar Docs: docs.microsoft.com/xamarin/xa...
⏱ Timestamps
0:00 Intro
0:18 Sample App Outline
1:12 Implement Sample UI: SearchBar and CollectionView
4:15 Implement ObservableCollection Filtering Code
15:40 Run Sample App
16:30 Remove Redundant Code
17:12 Outro
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Twitter: / jfversluis
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#XamarinForms #CollectionView #Filtering #ObservableCollection #ListView #SearchBar - วิทยาศาสตร์และเทคโนโลยี
Thank you for this video. It took me some time to figure out how to convert your example to MVVM, but you gave me all the clues to figure it out myself. Well presented & informative!
Appreciate it thanks! Glad you were able to make it work!
Really thanks for the *PRO TIP*
While starting with all of this that really got me good a couple of times 😅
Really great video
Thanks!
Hi Gerald. Great video. I have a scenario where I need to update 2 of the 100 records in the collection view and do not really want to reload the entire data set. Was thinking of removing it then adding the updated one but that seems odd. is there a way to have the collection view update changes to the records in the observable collection
Hello Gerald. It was a wonderful video and i hope all of your video contents will be very useful and help us. Here ,i am struggling with the progress bar without using nugget packages in MAUI MVVM with displaying the data, contains from the database. I want to animate the progress bar value based on the value increase or decrease. Please help me. Thanks in advance.
Thanks for this PRO PRO TIP, I have a question, if I am using a picker with the number of pages of my listview, I need to pick a page and move the listview to that corresponding page keeping the listview with all the items, like a book, Thanks.
Interesting use-case! I think the ListView has a ScrollTo or something, so you need to come up with some index corresponding between the Picker and the items in the ListView and depending on what is selected scroll to the right place :)
It is awesome the list got transitions on load, add, remove out of the box !
I've checked on Android and I've got the same transition for IOS
What transitions are that? Did I miss something? 👀
@@jfversluis I'm saying a good thing actually :)
No you did not miss anything ♥
I just meant the fade in/out and slide effect that the collection view does out of the box when an item is added / removed or the entire list is loaded.
In flutter you need to do so much effort to get these effects.
I hope it is clear now, And thank you form the heart for the best Xamarin videos ever ♥
May god bless you ☺♥
@@androidsavior Awesome! Thanks!
First, THANK YOU! please keep creating videos like this. So, I'm trying to apply the same approach to filter data in a collection and works fantastic. However, there is a huge performance issue when it tries to filter from an ObservableCollection of 500+ rows. Is there a way to improve that somehow?
Well, it appears, I fixed the performance issue by using ObservableRangeCollection from XCT.
LocationsToDisplay.Clear();
LocationsToDisplay.AddRange(filteredLocations);
However, filtering + infinity scrolling appear not to play well hehe!
After some tricky code changes, I made it work with the combination of both. Thanks @Gerald
Glad I could act as your rubber duck and you figured it out 😄
What method should I use if I am trying to search a collection? I plan to store user inputs throug sqlite from entries and then display a list which is searched through by those entries. I am struggling to understand how to do this and any help would be nice. If you need the source code I can also provide that.
Hey Gerald, Thanks for your amazing content first of all. I have a question, In the collection that I pass as ItemSource, I have two strings with the same value. But when I search on an other value in the searchbar and I go back to an empty searchbar. I only see one of the two strings described above with the same value. I hope you can follow me. Thanks in advance!
Thank you for you videos, it refreshing.
Ps just one more thing, set some top margin for title, it gives me ui ocd :D
Hahaha thank you! And I know, right?! I'm twitching every time too... but it's too much overhead to fix it _each_ time :D
Greetings. Great video. Question, but what if I want to show the filters for the words only after typing 3 letters? Thanks
Check out the amazing user stopped typing behavior in the Xamarin Community Toolkit for that: th-cam.com/video/OPDYAfPUv1g/w-d-xo.html
@gerald, what about a searchbar to search very fast an item in a picker and select it?
Interesting case! I guess you could do that :) are your picker options that many?
@@jfversluis yup, the picker has like 80 name of airports jeje ✌🏽🤣😂
@@codigoadictivo Maybe consider a UI redesign? :P
@@jfversluis uff jeje, picker method seems to work nice jeje, but i was thinking maybe there was a way on combining a searchbar with a picker lol.
The app is working fine, i just was thinking in a way of helping the pilots to search faster inside the picker jeje, but yeah. Nice vídeos btw 👍🏽
Oh sure! I guess you can definitely make it work, but I think you can create the same thing with a better user experience:)
Thank you!
Hi Gerald, did you make a video on filtering and mvvm?
Not yet! But I'll put it on the list :D
@@jfversluis thanks a lot. Your videos are great to learn from.
@@Onri Thank you Henry, that is great to hear
Hello Gerald, my problem is, I have a base64 json file that I need to output in pdf on screen. I’m sure it is simple but I am going round in circles. Thanks
Not sure how this relates to a CollectionView? 😅 you’ll probably need to convert the base64 to a byte array and save that as a file and then show it
How to view a products under category? If you have a category named Baberages, the products could be another list with the products in that category like Soda, Juice, Ice Tea an so on....
Thanks for the advice to filter on 'master source list'! But in this case, canceling the search does not keep the initial order of items
Why not? We iterate over the sourceItems so the items show up in the same order, right? And if you want to influence that you can simply add some order into the mix :)
Or am I not understanding you correctly?
@@jfversluis I meant, when you cleared the searchbox on 16:08 the "Subscribed yet?" stayed the second in the list. But of course, I agree, the initial order could be saved if it's required with some additional logic :)
@@jfversluis : This was an excellent tutorial. However, I actually encountered the same issue with the items not being sorted after the SearchBar is cleared. I thought that I would simply sort at the end of the SearchBar_TextChanged event, but Observable collections do not natively support OrderBy and I was trying to avoid doing heavy manipulation of the underlying collection as it seems to be that it would be inefficient/expensive to do. I looked at the CollectionViewSource class but it is not clear to me whether I could leverage that for this purpose.
Hi, I wonder if anyone tried this filtering on list counting thousands of complex items - how fast or slow is it?
If you use the virtualization it should be smooth. If you have that many items you might want to think about doing it server-side though
Interesting stuff thanks.... will you be doing an MVVM of this anytime soon? and also may you please send me the discord server link
I can definitely do that! What is the MVVM part that you’re struggling with?
Here’s the link: discord.gg/hFbKsXqF
@@jfversluis Thanks and yes I eventually got the issue sorted
That’s wonderful! Good job!
Can you make a video how we get device unique identity please
Didn’t you ask that before? 😅
@@jfversluisIDK😂
Hi I tried to use events and gestures inside the collection view with buttons included but it seems not working well ,
The events are executed twice on other items in the list
I am stuck really need for help and thanks
It’s a bit hard to say anything useful about it without knowing all the details, sorry!
@@jfversluisI found the issue when boxview or frame used inside the template this problem occurs
I solved by setting "IsEnabled" to false for the frame.
Perfect! Glad you figured it out!
Hi! I'm having issues filtering because my collection view has grouping, basically I have a List of Lists of Objects. Is there any way to apply this filter to this especific case? Here is the List of Lists:
public List CATEGORIAS = new List();
That belongs to this class:
public class productosCategorias : List
{
public string CATEGORIA { get; set; }
public productosCategorias(string cat, List productos) : base(productos)
{
CATEGORIA = cat;
}
}
I hope anyone can help me
Thanks
You want to make sure that you are searching in the nested collection. The rest should mostly be the same :)
I return here yet again
Glad to be of service!
Thanks for the video - but I see one disadvantage in that solution: The order of the result list is always changing……
Correct and also noted a couple of times before :) is an easy fix for it though
Hey there. Any chance of an invite to the discord :) Great content by the way. Thank you!
Thank you and absolutely! discord.gg/fTFGuHmS
First, thank you, please help me filter collectionview with Viewmodel
Added to the list, thanks!
I'd love to get an invite to the discord server
Ah you watched to the end! Thank you!
Here you go: discord.gg/djs4jN7n
how to combine multiple line same data in one single row in observable collection listview. like in the messenger chat system.
Example:
first data/line{
name: Funny Videos
id: ID01
Comment: wow!
}
second data/line{
name: Funny Videos
id: ID01
Comment: Awesome!
}
I want to show both the output in a single line/row under the same name and ID but with different or last recent comment.
as:
one single line/row{
name: Funny Videos
id: ID01
Comment: "wow!, Awesome!" or Just the last comment which is Awesome!
}
The data here is inserted at run time dynamically.
I'm very sorry but I don't know what you mean :)
Can I get discord invite?
Absolutely! discord.gg/djs4jN7n
@@jfversluis What is discord is ?
Like Slack :) just a place to chat, hangout and learn and help each other
@@jfversluis oh yes than you
Hello Gerald! I did exactly what the tutorial was explaining, but I got a null reference exception, can you invite me to your discord?
Hey Gerard, could you send me an Discord invite please :)Will try to implement this to my app now :D
Perfect! The link should be under every (more recent) video!