Xamarin.Forms ListView vs. CollectionView - Which to use and why!
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- You asked for it, so I am here to break down all of the key differences between the Xamarin.Forms ListView and the brand new CollectionView. Which one should you use and why? Which features are exclusive to each control and which can be combined with new awesome things built directly into Xamarin.Forms.
Full Xamarin Beginner's Playlist - • Xamarin & Xamarin.Form...
👕 Buy some swag! - jamesmontemagno.myspreadshop....
Time codes:
00:00 - Introduction
02:15 - ListView and CollectionView overview
05:15 - RefreshView - Pull-to-Refresh on CollectionView
06:00 - CollectionView Headers, Footers, & Grouping
07:20 - CollectionView SelectionMode & EmptyView
08:30 - CollectionView ItemTemplate & SwipeView
10:30 - CollectionView Load on Demand/Lazy Loading data
12:00 - ItemsLayout - Horizontal, Vertical, Grids
16:20 - Even more CollectionView & Wrap-up
Links:
* Source Code: github.com/jamesmontemagno/My...
* MVVM Helpers: github.com/jamesmontemagno/mv...
* ListView Docs: docs.microsoft.com/xamarin/xa...
* CollectionView Docs: docs.microsoft.com/xamarin/xa...
* RefreshView Docs: docs.microsoft.com/xamarin/xa...
* SwipeView: docs.microsoft.com/xamarin/xa...
* Xamarin Community Toolkit: docs.microsoft.com/xamarin/co...
What is on my hat? It is the CLE clothing logo because I am from Cleveland! Checkout their awesome CLE merch: cleclothingco.myshopify.com/
What is that art on my wall? It is an original piece from the French street artist Gregos of La Butte Montmartre: / bcez1onhiqx
Disclaimer: This channel, videos, and streams are created in my spare time and are a product of me... James Montemagno! They are NOT officially affiliated or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
Follow:
👨💻 GitHub: github.com/jamesmontemagno
🦜 Twitter: / jamesmontemagno
🔴 Twitch: / jamesmontemagno
📄 Website: www.montemagno.com
📰 Newsletter: newsletter.montemagno.com/
My Setup:
* Blue Spark Microphone - amzn.to/3qgtYkq
* Blue Pop Filter - amzn.to/3jEWM3r
* Rode Microphone Arm - amzn.to/2Z68AlE
* Sony MDR7306 Headphones - amzn.to/372jxta
* Stream Deck - amzn.to/373Uk1n
* Elgato Cam Link - amzn.to/3a9eGbh
* GoPro Hero - amzn.to/374lm90
* MX Master 2S Mouse - amzn.to/3d7J2gj
* Tecware Phantom Keyboard - amzn.to/3aUP4y9
#CollectionView #ListView #XamarinForms - วิทยาศาสตร์และเทคโนโลยี
I'm a long time WPF, ASP, and Winforms developer, just getting into Xamarin. It's pretty awesome how similar xamarin is to WPF so I feel like I can dive right into it without too much learning curve. These videos are really helpful though, great series!
instaBlaster
GREAT VIDEO AS ALWAYS
always, great educational stuff.Thanks Man!
Thank you James. clearly got how to use Collection view
Great content, thaks!
Thank you for the nice overview.
You got skills!!! Great teaching!!!
Thanks for the video and thanks for confirming it was OK to continue using list view, glad you used the span option as i had not noticed that before, will give it a go on my tablet version :)
Yeah that Span option really a big winner for me especially on tablet or other specific UI that need multi-column things like that.
Thank you for the video :)
Nice explanation
Thank you James
Thanks James, I always follow you, you're the man. Brazil - São Paulo (Google Tradutor)👍
Hi James! Great video! I've learned a lot about the Collection View! I find that after pressing the load more and clear buttons and after some refreshing the buttons stop working after a while. Is this just because I'm debugging or is it possible I've done something wrong or missed anything? I have tried to copy all the code you did behind the scenes. Best regards!
Hi James, been watching your videos for few weeks ! So thankfull for your lectures, i wonder if its possible and how would it be to add a searchbar to collectionView... Greatings from Mozambique!
Hi James.. Thank you for your videos. I have a quick query with collection view. Is it possible to have different view cells for each row in collection view?
With the 2 column Grid Layout, if the boxes are different heights is there a way to have them fit tightly instead of lining up in rows with whitespace inbetween
Thank you so much , I think that grouping header for ListView and Swipe option for Collection View not working properly in UWP , Please can you explain more about this .. Thanks
This has been a stealthy build. It’s like all of a sudden you have an app, lol. Caught me by surprise.
Hi I am facing one issue with collection view if we have only one item to bind then it will display on center only in IOS
Hey James I know the video is a year old but in a collection view can you have some sort of count for duplicate values, for instance I have 3 of the same number and on the view, I want to see the number and the amount of times it has been added
@james can you please make video on cameraview?
Hey James,
do you know if there's a way to show horizontal list as full width,
with small insets ?
Thanks James ,
Again a good example .
Trying some of the code you use is some video's .
But have some problems with SQL database, want to make something like Scoreboard .
I can find some examples like Todo databe etc but not with searching for highscore and so on.
There is no code to find on Github of the Scoreboard like Island Tracker App.
Maybe a request for a video about Sql database like you used in Scoreboard.
With different Tables for Highscore , games played and so on.
Bas
James, great video. Really appreciate the github availability. Request: add Coffee, edit Coffee and Mock data services. Are these topics in any of your coming video presentations?
Thanks! Absolutely! They are in the pipeline :)
Hi James, nice video.
I'm stuck with an issue with the bindings in a grouped collection view. I am using maui with the community toolkit.
I created a class Cloth, a class GroupedCloth that groups clothes for seasons (string for season name and list of Cloth).
Then in my viewmodel I have an observable property of the grouping object (List of GroupedCloth).
In the collection view I set the binding to the grouping object, and the groups are displayed correctly. Then I try to set the binding to the season names in the GroupHeaderTemplate, but the compiler return an error because the season name property (that is in GroupedCloth class) is not found inside the viewmodel.
The fun part is that if I set the binding during runtime, the hot reloads sees it and display the correct values.
A bug in the toolkit?
Please create a demo project on geofencing.
What can we do if we have a GridItemsLayout and the first item in every row is larger than the rest?
Could you please make a quick flyout customization(Adding header and image on flyout) for Xamarin Form Shell please ?
On my list for sure :)
After watching this, I did a ton of refactoring to migrate from ListView to CollectionView. I’m having massive problems when I bind to an ObservableCollection and try to insert Sections. Is there some known issues with grouped CollectionViews and ObservableCollection?
I would post over -> docs.microsoft.com/en-us/answers/products/dotnet
Hi James nice Vid thanks for that. Can u explane how i put a CollectionView(SecondView = horizontal) in a CollectionView(MainView = vertical)?
When I try, I only see one CollectionView at a time.
I am going to be implementing something like this with my Peloton clone that I have been building out and have videos on here. I think I may do a collection view where each item inside of it is a collection view that is horizontal..... if that makes sense.... or a scrollview with a bunch of collections views stacked up is another option.
Hi James, great video! Learned so much from it. But something you did didn't much work for me. In the CollectionView's GroupHeaderTemplate you got "{Binding Key}" in there, but for me I got a problem. It says 'Key' Doesn't exists in the ViewModel. I guess it thinks that the binding context of the group is the ViewModel instead of 'Grouping', and it doesn't let me compile. The weirdest thing is that if I put something else in there, compile, and then change it back to "{Binding Key}", it works. I did it exactly like you did in the video, what am I missing?
Check my GitHub repo I have the same there. I believe it is the data type binding that I fixed up on it
@James Montemagno Yeah I figured it out. I switched it so the ViewModel object is created in the XAML instead of the code behind, and removed the x:DataType property of the ContentPage. Thanks!
How did you get the SelectedCommand to popup the alert? I could not find any reference to 'SelectedCommand' in the XAML.
Sorry to be a pest. Thanks for the great videos!
There is SelectedItem binding => github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/Views/CoffeeEquipmentCVPage.xaml#L31
However probably you are looking for the event to command that I did a video on github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/Views/CoffeeEquipmentPage.xaml#L64-L69
Hi, James, I am very appreciate your video and I have a question. Why CollectionView Header and Footer not working after ClearCommand?
Hmmm it should else file an issue on GitHub
@@JamesMontemagno0:29
How to alternate colors on collection view
I was wondering if you know how to fix it / if there even is a thing already.
I have my ListView which default is null. Now I want to be able to check if there are any items inside the ListView.
But if I add an
if(TaskList != null)
{
}
it still goes off, even though its default is empty.
Then, I want to only be the first item (index 0) be active from the list. I made it work with using a for loop. But the moment there is only 1 item left in the list. The for loop seems to not work anymore. Even though I've created a few Console.WriteLine's to check if its outputting 0 on the list item. Any idea on how to fix this?
If you want to post a sample project I can take a look.
@@JamesMontemagno This my ViewModel code:
- pastebin.pl/view/1590df6c
This is my XAML (Just in case there's a problem there, but I am only using a binding) :
- pastebin.pl/view/851c459e
Thanks for taking a look! Really appreciate it.
Hi, Is there have an option to integrate amazon lex chatbot in Xamarin forms
If they have a .NET SDK or web api of some sort I am sure you could. I don't know much about their chat bot service. Azure has one as well azure.microsoft.com/services/bot-services/?WT.mc_id=friends-0000-jamont#overview Also, Telerik has a full conversational UI platform www.telerik.com/xamarin-ui/conversational-ui
Hello James. One reason for me to stay with listview is the lack of support to UWP. Any plan to show some Love with MAUI? UWP was not mentioned with. Net 6 preview 1
That is true, there is a breakdown -> gist.github.com/hartez/7d0edd4182dbc7de65cebc6c67f72e14 for .NET MAUI that plan there is feature parity. Good point thought!
Nice Video.. Is it possible to have a drop down list inside collectionView, I plan to have a list of images drop down when the user presses a down arrow, and shrink when up arrow?
Yeah, you would probably want to look at the expander view in the Xamarin community Toolkit -> docs.microsoft.com/xamarin/community-toolkit/views/expander?WT.mc_id=friends-0000-jamont
Thanks James, I appreciate you taking time to answer a question I am sure you are busy!
hi i want to know if exist a listview-like to use in a table and this table inside a scrollview i want to make the whole entire screen to scroll
Could use a scroll view and a grid? not sure what you are looking for but ask over on Q&A -> docs.microsoft.com/en-us/answers/products/dotnet
After many hours fighting "Property 'Key' not found" in the GroupHeaderTemplate binding when compiling, I got it resolved by removing the "x:DataType" parameter from the topmost ContentPage wrapper. Apparently, if that is set, the binding in the GroupHeaderTemplate will fall to that class instead of using the ItemsSource that is set in the ListView/CollectionView.
You can also use - x:DataType="{x:Null}" and that will ignore it.
@@JamesMontemagno Ahhh ok, ty! Love the series so far, been learning a ton. Just missed that little thing and that drove me crazy figuring it out lol
Thanks for the video!
Is there any way to have an Android behavior of context actions with CollectionView? (ToolbarItems)
With the SwipeView is the best way of doing it. Else you could do some gestures to pop up something like a picker probably.
@@JamesMontemagno
Yeah, but, well, SwipeView doesn't feel like Android-native behavior for list items.
Anyway, will figure something out, thanks!
@@oleksandr.liakhevych You can programmatically open a swipe view with swipeView.Open(). So you can maybe add the Drag gesture recognizer and on this gesture, open the swipeView, revealing the Delete button.
Hii James. Thanks for all your videos. I must say You are a Professor. Recently I have started an app development and regarding that need your guide. Pls help me. Want to create an app which prints invoice using buttons to tap to enter quantity and compute the bill, bit confuse what will work to save and print the invoice. Pls suggest me a print/ file format library. Waiting for your reply.
Sorry can't really help with code through comments. I would ask on Q&A - docs.microsoft.com/answers/products/dotnet?WT.mc_id=friends-0000-jamont
Hey mate, I've picked up Xamarin recently and am learning about it these days too, if you can, I have a suggestion for a video. Can you make a video where you create a stunning UI (You don't need to explain everything, just to get some context on how to do it) ... I'm stuck in that part cuz my imagination etc suck😭
Take a look at -> github.com/jsuarezruiz/xamarin-forms-goodlooking-UI :)
@@JamesMontemagno Woah, that would help a lot, thank you!💜
Hi James. Is it possible to have different objects in a CollectionView. I know you can have different controlls in a CollectionView but what about objects(models)? I hope you understand what I mean 😉
You could use DataTemplateSelectors that is what you would want to do.
@@JamesMontemagno I've tried that 😅 using the Microsoft doc. Example, but all you can do is to show different Datatemplate properties and not different objects(models).
Anyway thanks for the reply, I Hope you can do a video about this ☺️
James very good your videos, great fan of your work. With the colectionView we notice that it is very SLOW, SLOW. When we load it a bit the scroll becomes very bad.
Hmmmm i haven't really experience this, but I don't have mass things in the collection view... have you also tried the list view? I would also file a bug to see if it can be reproed.
I read this bug occurs when you put your Collection View inside a ScrollView. Try removing the scrollview or stack layout and leave only the collection view there
I got a question when I {Binding Key} In my GroupHeaderTemplate，said Key not found in my SongListViewModel（which is similar to CoffeeViewModel），I don't know how to bind context or what else here.Is someone can hekp me.
Take a look at my finished sample github.com/jamesmontemagno/MyCoffeeApp/blob/master/MyCoffeeApp/MyCoffeeApp/Views/CoffeeEquipmentPage.xaml#L30
Same here!! Glad it isn't just me but am LOVING this project!
It worked fine on a ListView on GroupDisplayBinding="{Binding Key}" but when I followed along, changed over to CollectionView and put as the Text a Label in a CollectionView.GroupHeaderTemplate I got the same message saying Key can't be found.
...do you have any ideas?
The CollectionView is nice but we've noticed some bugs on iOS that ListView doesn't have. One where focusing an entry field inside the header made the collection scroll strangely and one where the items required different heights but they wouldn't recalculate their height after the view was recycled. Reverting to a ListView fixed both of these issues.
Interesting! Did you open a bug on that one?
No, we didn't. Where can I find the proper guideline to do that? Honestly, a good video idea might be to walk us through how to correctly report a bug in a way that provides the most help/info for the Xamarin team. I'd hate to waste your time with a bad report!
For sure! Yeah and they have made tons of enhancements over the releases too. I would say that it one thing about ListView is that it has been there for along time and stable. CollectionView I feel is really stable although there are always corner cases, but they fixed lots of things leading up to XF 5.0. All new issues can be created over at -> github.com/xamarin/Xamarin.Forms/issues/new/choose
It's a pity, but there are still a lot of bugs in CollectionView 😥
I need a sample in xamarin with multilanguage without restart my app. I saw some piece of code but not worked in my app.
You could look at channel9.msdn.com/Shows/XamarinShow/Translating-Mobile-Apps-With-The-Multilingual-App-Toolkit-with-Cameron-Lerum?term=multilingual&lang-en=true with source code here github.com/jamesmontemagno/LocalizationSample/blob/master/LocalizationSample/LocalizationSample/MainPage.xaml.cs
@@JamesMontemagno Thanks James
What about Accessibility?
I found better accessibility support with listview
Hmmm that is a great question. I haven't really done tons of testing in this area. Is there something specific that you found was better with accessibility specifically?
@@JamesMontemagno I tried the collection view just as it released. In Android when you turn on the Accessibility mode - the control just ignores that mode. I don't really remember the situation with the iOS.
Also, the listview has some problems with the Accessibility mode - for example - @ Android it always add 2 to the item count (header and footer?), the navigation between list items is sometimes get stuck.
I think xamarin is a great framework - I hope it will have better support to users who have a visual disability.
James, thanks for the amazing channel.
For me, RemainingItemsThresholdReachedCommand firing twice :(
The only issue I have seen with CollectionView is that sometimes you could get it to cause a crash on iOS. There are fixes for that, I think.
Interesting yeah I haven’t had many issues especially with 5.0. For sure open issues if you find any crashes
@@JamesMontemagno I found someone else's solution to it. It's possible these were fixed in the latest version of Xamarin. Thank you for responding.
Nice yeah that have had a lot of updates over the releases. Was a bit rough early on as expected.
i had the same thing sometimes what do you do about it?
@@anassnassim If it is the "Cannot access a disposed object. Object name: 'GroupableItemsViewController`1", I had to create a custom renderer in iOS.
All the renderer does is a Dispose method like this.
ItemsCollectionView.SelectedItem= null;
ItemsCollectionView.ItemsSource = null;
base.OnDisappearing();
I found it here: github.com/xamarin/xamarin.forms/issues/8308.
I think there were some with the group headers, but I do not remember if I fixed it or used the Telerik ListView.
That said, I really like the CollectionView. It's has a lot more you can do with it, as this video showed.
Gotta love those helpful binding errors >=(
System.InvalidCastException
Message=Specified cast is not valid.
Apparently that exception means 'You forgot to remove the ViewCell tag from your DataTemplate'. Not filling me with warm fuzziness.
You really should use better demo data. It was impossible to tell when data was loading because you just repeat the same item. There are tons of mock data libraries readily available in various formats. It makes a huge difference when mocking up functionality to present to business owners or other devs.
Collection View keep full of bugs in Maui.
SwipeItem IsDestructive doesn't actually do anything
Sir, what happened to your beard? Oh my god.
To be honest SwipeView looks not so stable as community would want, even in the video it is janky. My fear it will not become better until MAUI😔
I just used some of the defaults but it is complete customizable and templateable and I use it in a bunch of my apps and am very satisfied, but for sure the team would be interested in what other features or improvements could help out
Hey James. When refreshing or loading More coffee item. It works fine on Android but it throws an exception on IOS.
MyCoffeApp.iOS[27001:515835] *** Assertion failure in -[UICollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:animator:collectionViewAnimator:], UICollectionView.m:8840