.NET MAUI Data Binding with MVVM & XAML [5 of 8] | .NET MAUI for Beginners
Learn more ➡️ learn.microsoft.com/training/...
Welcome to the .NET MAUI for Beginners Series where you will learn the basics of building multi-platform apps with .NET MAUI for iOS, Android, macOS, and Windows from a shared C# code base. In this video, James introduces us to the MVVM (Model-View-ViewModel) architecture pattern that separates your user interface from your code. It also unlocks the ability to use data binding, which is the glue between the view and viewmodel that makes the UI responsive when properties change and vise vera! In this video we take the UI that we built with XAML and make it functional with MVVM and the .NET Community Toolkit which streamlines development.
.NET MAUI for Beginners series playlist: aka.ms/dotnet/beginnervideos/...
Follow along: aka.ms/dotnet/beginnervideos/...
4 Hour .NET MAUI Workshop: • Learn .NET MAUI - Full...
Follow James:
- James on KZhead: / jamesmontemagno
- James on Twitter: / jamesmontemagno
Links:
- .NET MAUI Self-guided Learning on Microsoft Learn: aka.ms/dotnetmaui-beginner/ms...
- .NET MAUI Website: aka.ms/dotnetmaui-beginner/we...
- Install .NET MAUI: aka.ms/dotnetmaui-beginner/in...
- My Tasks Sample: aka.ms/dotnetmaui-beginner/my...
- .NET MAUI Documentation: aka.ms/dotnetmaui-beginner/docs
- .NET MAUI on GitHub: aka.ms/dotnetmaui-beginner/gi...
- .NET MAUI Workshop: aka.ms/maui-workshop
- .NET Community Toolkit Docs: aka.ms/dotnetmaui-beginner/to...
- .NET Community Toolkit GitHub: aka.ms/dotnetmaui-beginner/to...
- More .NET Beginner Series Videos: dot.net/videos
- .NET KZhead - / dotnet
- .NET on Twitter - / dotnet
Corrections:
09:10 - [ICommand] is now [RelayCommand] in the final version of community toolkit for mvvm
15:05 - [ICommand] is now [RelayCommand] in the final verison of community toolkit for mvvm
#dotnet #dotnetmaui #ios #android #windows #macos #csharp
🙋♀️🙋♂️ Get your questions answered on the Microsoft Q&A for .NET: aka.ms/dotnet-qa
🏫 Learn C#, F#, and .NET with free self-guided learning from Microsoft Learn: aka.ms/learndotnet
Correction: 09:10 - [ICommand] is now [RelayCommand] in the final version of community toolkit for mvvm Correction: 15:05 - [ICommand] is now [RelayCommand] in the final verison of community toolkit for mvvm
- I found a problem with ICommand - I went down to comment section to find other ppl who encourage this problem as well. - I found this comment. I can feel I am bless!
Why not update the video? The comments are full of confusion over this, and the video has only been out a month.
@@kaseywahl we actually did do an update to the video here and hid the old one and added little pop ups here. There unfortunately isn't a simple way of replace a video directly in youtube.
@@dotnet Who said it had to be "simple". You get paid to do this and do it right. Right? Do you know how many opportunities you lose by having an out-of-date video. If not, you should.
How to add separate Model Class for Items so we can have View, Model and ViewModel?
My brain is incrementally exploding while watching the data-binding part :D
this seems unnecessarily complicated when its supposed to be aimed at beginners
it looks hard but it's standard way in MAUI and many years ago in WPF
@@shitpostinglel i mean its functionality you need, so would be weird if he didn't explain it in these video's
Well, welcome to MAUI for beginners series. I agree with you.
James explains this stuff so well. MS and the Maui team are lucky to have him.
This is ridiculously overcomplicated. What should have been something like "bind = myObject.myProperty" is now a bunch of code spread to several files.
If you are also having trouble because the DeleteCommand isn't triggering, double check that your is wrapped inside a tag (with an s). Once I fixed that it started working.
Man, I got completely lost. This is supposed to be for beginners but it seems to assume that you already know how to develop apps. What should I learn before this? I'm a Unity developer with 10+ years of experience making games but zero experience making apps.
James is the best. I love your teaching the most in KZhead. Life without you would have been critical😅 . I'm praying for your best health brother ❤
Traversing up the stack beyond the DataTemplate, in one line of xaml, brilliant.
After working with UI Frameworks like Flutter, VueJS, and React the MAUI DATA-Binding seems way too complicated. Too many lines of code to achieve a trivial task relative to other frameworks.
exactly its just that MS team always try to act smart end up being so hard for us
After working with React and Maui, Maui is just 10x better.
Maui is way easier than ReactJs
TOTALLY BULSHIT
NOT UNDERSTANDABLE
I haven’t seen a pachinko machine in years. I loved playing them as a kid.
Welcome Back James
It's been a year and still the SwipeView it's complete broken on Windows
Hi! Could anyone give me an advice, what's the most efficient way to make button's two images changing by bool property binding in Maui's approach? Not sure if I should create a converter for it, or if there is a simplier way. Thanks in advance!
This series is AWESOME. Perfectly targeted at people like me... TOTAL BEGINNERS!
Great video series!
Do i need to use this MVVM model when I am connecting to a database?
How to add separate Model Class for Items so we can have View, Model and ViewModel?
Always Top Notch Session 🤗
Thanks for this! I heard you say "Let me pull over my source generators" and I had to pause. I had no idea that was there in the Solution Explorer and I've been unable to navigate to the generated code (Version 17.4.0 Preview 2.1). Even though it's not what this video was about, it helped save me a bunch of frustration.
I saw it presented in Nick Chapsas vide few months earlier, I mean code generators. But the author is MS guy, so he could know it earlier.
@@RemigijusPankevicius I primarily use Rider for MAUI and since my post above, both Visual Studio and Rider are much better at making the generated source available if you want to see it, or hidden if you don't need to see it.
Nice video. I want more like this one :)
as someone who did some WPF in the past the 'INotifyProperyChanged' bit made me shudder... The toolkit seems cool, but in reality it works around stuff that Microsoft should of completely redesigned when approaching Maui. it's way, way, way too complicated. lots of nice stuff - but this is pretty heavy
Thanks for excellent videos!! Why am I not able to see the Items on the Windows Machine Emulator in MVVM & XAML [5 of 8] .Net Maui. It's working fine on Android's Emulator. Appreciate your answer!
Could you tell me why the data binding of the swipeItem works for me in debug but not in release. Greetings.
the MAUI DATA-Binding seems way too complicated. Too many lines of code to achieve a trivial task relative to other frameworks.
So true
Please name few of "other frameworks".
@@RemigijusPankevicius kotlin & Flutter
hi how to update BindingContext data from other page? I have two pages ProductPage and ProductAddPage so how to update BindingContext of ProductPage from ProductAddPage.
Why does the items property bind8ng work even when it's marked as private?
James do we have [DependsOn] attribute in CommunityToolkit. Mvvm?
data binding are so hard to understand, why can't they develop like angular databindings
As a beginner myself I am struggling. James has a great video that explains MVVM which might help understand the data bindings. I am a total learn by doing sort of guy so I won't really understand any of this at all until I start trying to build something new that isn't exactly what I am being walked through.
how can I bind a list of a list ? like List manufacture [ford-tesla-mercedes-etcetc] which has inside a list of model List carModel [ka-fiesta-puma-etc] Thanks!
Excellent video. Thanks, I could not see any video showing maui on Iphone or deploying ios app. can you do one please.
Thank you
is it really code for begginer ? or professionals ?
Hi James, I feel lucky finding your videos on this subject. Could you explain why in viewModel the defined string property "item" or "text" got capital case when you assign them??
Hi, i hope i'm not wrong. I thing with the Attribute [ObservableProperty] there will be created an Property which have capital case.
@@94Chef I forgot about my comment, you are correct I found out when watched again
The casing of property, method, and class names in C# follows the Pascal casing convention. Similar to how in Java camelCase is used for method and property names
I can tell you. You remember before we replaced the code with the decorators? ([IObservableProperty], [ICommand]) IF you remember, the declaration of the "string text;" had getters and setters. It was something like: private string text; public string Text { get => text; set { Text = value; OnPropertyChanged(nameof(Text))}} Well, that code is still there, you just don't see it because of the decorators. If that code was still there, would the "text" "Text" still confuse you? Also note the same thing happened with the ObservableCollection items; That list is referred to as Items elsewhere in the code for the same reason.
Hi! Thanks a lot for the video! I'm trying to repeat binding of the DeleteCommand, but it can't hit a breakpoint into the Detete(string s) function of view model; How can I debug it and understand what exactly went wrong?
Did you find a solution? I have the same issue!
For me, I was missing the: Now it works. (I was already using [RelayCommand], but surrounding with solved my problem.)
Still having the same issue with the delete command
@@omarsebakhi Same for me. I was missing . Adding that fixed my problem. Thanks for posting.
@@SimspaceDev Glad to hear that :) you are welcome
Thank you for this tutorials it helps alot. ICommand its not working on CommunityToolkit 8.2.2. Is there an alternative to using old version ?
I just came back here because I am having the same issue. Please tell me if you ever found an answer. Or is the solution to use an older version?
data binding getting complicated, i'm sure there will an easy method in the future
hello James, I have a problem with my app, I use an Entry to enter data and these data will be transferred to a Label in another page but it doesn't work with my view collection. Can you help me? please
Ok, you are binding to a ViewModel -- which, in my opinion, looks like a "mutant" because it's a kind of Model plus some infrastructure (INotifyPropertyChanged, or whatever monstrosity that toolkit nuget package decides to generate for me in the behind of the behind of the scene). But if I have a weather sensor sending me humidity and temperature, it will actually send me a Model like { temp: 25, hum: 75 } -- do I always have to translate this Model into a ViewModel (and eventually back)?
You could simply have the Model as a public property that gets notified when it changes and it would re-evaluate.
I am having some issue when I try to run in my iphone. I have developer tool on and the app installs but it cant run. it just shows a quick moment like it is loading but then shut off. I check credentials and all of apple developer tools but nothing helps
uff, this toolkit makes it first complicated af
Mvvm feature is cool in dotnet MAUI.
Watched this series last year and I am now confident to start using .NET MAUI for my mobile app development going forward. I just love your teaching style. It is so easy to follow. Please drop your x handle so I can follow you and ask few questions. Thanks a bunch.
i think this toolkit makes things harder to understand and complicated
At around the 5:00 mark, the presenter says " it will set the code behind text value and then raise this property change notification, which means that the entry will automatically be updated and vice versa. The entry is automatically two way data bound, which means if we enter text here will automatically set the value right here in our code behind.". Can someone please explain why that is happening - is the name Text special? I didn't see anything in the that suggested it was bound to anything. Edit: OK, I've watched further in the video, and once they've stripped out all that code, at the 7:42 mark the author goes into the and binds it to the Text property - now that makes sense!
Yea but later he used plugin that alredy did that for him u can see it at 7:10 mark it says public String Text thats the one he is binding at 7:42 mark
at 16:50 why cant we just explicitly bind to the viewmodel, rather than climb up the ancestry tree until we get to the viewmodel? (im new to C#/XAML/.Net)
The Command lives in the ViewModel... but we are inside of the DataTemplate INSIDE of the collectiview so the bindingcontext is the item itself (in this case the string) so you need to poke out to say hey actually go bind up to the viewmodel for this command
@@JamesMontemagno then every time we are in the data template of some collection will it be nesessary to climb up to get the viewmodel? sorry for my english
why can't be binding in the XAML?
Every time I want to create a view model in WPF I have to write a lot of boilerplate code like this, which can be mostly avoided if I use something like React.js. Is there any improvement in MAUI to help us to avoid these coded?
Take a look at the mvvm toolkit which i used: learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/
hello sir... my CommunityToolkitMVVM does not contain ICommandGenerator..... what to do??
ICommand has been renamed as RelayCommandAttribute in CommunityToolkitMVVM preview4
@@natureandfun62 ty sir that was helpful
Why not just bind the DeleteCommand? If it was just to show us what was possible, that wasn't apparent.
why there's so many code just for click event ?
Trying to troubleshoot a problem with Windows Machine build.... After entering items into MyList then deleting just one item, when I try to add another item I get a crash that I cannot trace... "Value does not fall within the expected range." Figuring this issue was my fault, I cloned/ran your app and had the same problem for a Windows Machine build. I placed breakpoints in the Add() method and the app makes it though fine with appropriate action until stepping past the ending bracket of Add(), which sends me to exception handling in App.g.i.cs. Another observation... the app works as expected without crashing in the Android Simulator as well as directly on an iPhone (local iOS). I have not tried the app on MacOS yet. I am on Windows11 with VS pre6.0 Thank you for this fantastic tutorial and all your hard work!
How did you get delete to work? I can't get the Delete Command to fire at all.
@@-pcmr-108 There are a few ways for me to interpret your question. What I'll give you is what I experienced while trying to troubleshoot Delete not working for me... For windows machine build, I thought my delete wasn't working as well. I could not get the Delete button to show while trying to swipe with any gesture I could think up using a mouse. What I found was a two finger swipe on my trackpad worked. I had no problem using the mouse for delete in the android emulator. If that isnt a solution for you, I would grab a copy of James' mauiApp code from github and compare operations and code with yours. I hope that helps.
I get the same error. It works perfectly on Android emulator but crashes on Windows. CollectionView works fine without the SwipeView. They should show these demos working on all formats, not just the ones with no bugs. Or at least tell us which formats are broken.
Good lord, .Net is such a mess. Good to see a simple topical video about it that's not 3 hours long though.
The SwipeItemInvoked command does not work in my version. doesn't work with a COMMAND either. Did this work for anyone else?
why when i add after removing an item the app crasshes?
i have done exactly the same but DeleteCommand is not working. i dont know why?
Hi, I watched the full video and cant figure out this problem. When i try to add something to the list it doesnt do anything. I added a breakpoint and noticed the Add command never gets called?
Did you make sure to register your viewmodel and set it to the BindingContext? Checkout the final solution in the show notes.
@dotnet Hi thanks for your reply. I can't find the final solution in the show notes? Edit: Never mind, I found the problem after comparing the code. Thanks for the great video
How would you bind a command to a CheckBox? It has no Command property.
For a Checkbox you would be binding to the IsChecked property learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/checkbox?view=net-maui-7.0
Good tutorial but: after installing the app on my smartphone the entries disappear after a day or so, does someone know why?
Any new entries will be stored in RAM and will disappear when the program restarts.
@@Assistedsarge So I have now an app thats complete useless...
as of CommunityToolkit.Mvvm 8.0.0-preview4 ICommandAttribute has been renamed to RelayCommandAttribute, for anyone else having issues with that
thank you
When deleting any item from the list and adding a new one later, an unhandled exception is raised "Value does not fall within the expected range."
@agustinbcu I'm having the same issue, and pulling my hair out with frustration. No idea what's going on, an unhelpful error message, and no stack trace either. Did you ever figure out the issue?
@@theagemaway sadly no. I was evaluating the platform for new development, but I move in other direction. Probably when the platform becomes a real release, because now do looks a stable version to me.
the same error
In lesson 5 of 8... Some on knows why in the code we add(Text) and Delete(string)???? (Why we don't did the same add(Text) and Delete(Text)???
Because Text is bind to "Enter Task" Entry and you want to delete items from the list with the swipe function.
The only thing I felt that this tutorial was missing was when you have a ItemSource of a ObservableCollection of a Model instead of a string, because I had this problem trying to bind a property but the property called GroupName wasn't in the ViewModel but in a Model separated, so when I tried to make a Label with a Text={Binding GroupName}, it couldn't find it until I did this: xmlns:Model="clr-namespace:Test.Models" xmlns:ViewModel="clr-namespace:Test.ViewModels" and inside the CollectionView, I did this: So, instead of using x:Type x:String, I had to obtain the property GroupName from the Model AccountGroup and User from another Model called Account
Also now I noticed, that's the reason why James did in 8:11 the x:DataType, so he wouldn't have to do inside the Entry --> or something similar I think Now I wonder, it's possible to make multiple x:DataType inside a ?
SwipeView doesn't work on Windows App?
Swipe with two fingers and it’s will work
@@esazebari1879 How can I do it on my desktop PC
@@HainnTheBurmese give me something which i can contact u , and i will send u solution
It doesn't work with the windows emulator. You'll need to use the android emulator for that.
It works if you are on a touchscreen device. There are now context menus: devblogs.microsoft.com/dotnet/5-dotnet-maui-desktop-features/#context-menus
2:40 Make sure that the program isn't still debugging still or it won't allow you to create and rename new folders.
(Like: Hein Lin Htun 5 days ago.... ->>>>>> SwipeView doesn't work on Windows App... For what reason???? Hope we get answers to our comments....
It works if you are on a touchscreen device. There are now context menus: devblogs.microsoft.com/dotnet/5-dotnet-maui-desktop-features/#context-menus
@@JamesMontemagnothanks, that was bugging me too!
i'm use Mvvm version 8.2.2 and not it works. For beginners in programming it is very difficult.
MAUI seems so messy and disorganised
Can I confirm ObservableCollection is depreciated ?
Hi not really sure anyone is reading this, there in NO ObseravbleCollection.
ObservableCollection has been around for many years: learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0
@@JamesMontemagno That does NOT answer his question. Has it been deprecated? It's a very simple question.
Great tut, but that music is very annoying. Hard to focus.
I am able to swipe but the DeleteCommand is not getting triggered, does not hit the breakpoint, actually it does not do anything and it is frustrating when there is no error but just dead silent
Verify if you forget to put the inside the . I had the same issue, becouse my code was like this And the correct is
@@alexalmeidajr.9203 That is exactly what I missed, Thank you
This is why I really dislike .net maui/xamarin. Helpful videos get posted and they are great for a time I'm sure, but then someone changes the name of something, and makes it such a hassle to track down the fix, and then you end up in situations like this where even the corrected code doesn't work as there are multiple breaking points. And this is less than 2 months old. For anyone else wondering, ICommand is now RelayCommand, and simply changing that will get you up to the swipe delete, which I still haven't figured out.
J'ai une erreur with vm ,???
that background music is so annoying
great!!!!
it take 1 minute and 10 seconds to build the almost empty android app on a powerful computer, is that normal ?!!
I fixed that by removing 'builder.Logging.AddDebug();' line from MauiProgram.cs and just enabling it when neeeded
it takes less than 10 seconds to compile
Hi there! Some one knows where I can learn the following sintax (Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}},Path=DeleteCommand}")?
Look for this vid: Learn .NET MAUI - Full Course for Beginners | Build cross-platform apps in C# It's explained at 2:34:43
Checkout learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/relative-bindings?view=net-maui-7.0
command does not trigger event. SOLUTION: Use instead and place a child label or other visual elements inside there. As a test, just use .
Not sure what's broken but neither SwipeItem's Command or SwipeItemsView's Command bindings are working for me
Non of the solutions are working for me eigher :(
Found the solution :) Name the ContentPage as x:Name="thisPage" and change the command to: Command="{Binding BindingContext.DeleteCommand, Source={x:Reference thisPage}}"
Try this. It finally worked for me with this. I kept having hard to find typos in the code until this one.
@@marctalcott5613 Thanks. This was the correct solution.
Setting up data-binding is WILDLY unintuitive. You would never discover what to do if you didn't have access to this video or some other tutorial.
I really don't like that the presenter uses a community toolkit to accomplish basic functionality like binding. I want to see how things are done vanilla in a beginner video.
The background music is distracting.
I entered to KZhead looking for some F# with unity, but appears this, and i get so bored with this microsoft technologies, microsoft would be bright more support in F# and maui would be very fun and unity would be very fun too, but there are a lot of people that losing time with OOP, i cannot understand why someone likes writes 50 lines of code that makes the same thing that you'll do with 5 in a functional aproach. if you wanna really get some fun doing very cool stufs, go to LiveView Native with Elixir or React native with FC components, you will a very happy enginner.
was following it, but then it became very complex and hard to understand real quick as a beginner :(
Make sure you use 'AncestorType' and not 'AncestorLevel' the intellisense can easily screw you over :D
I thought the content was excellent, but I really need to concentrate on the words, and that background music is incredibly distracting. I don't know what the name is for the inability to listen to words while light jazz is playing in the background, but I've got it! I tried turning down the audio to the point that I could only hear the words, and that worked to a certain extent, but I want to show this in class, which means that I'll need the sound cranked. Anyway that we could get that music track pulled (or a new, track-less version posted) by ... tomorrow? Probably not, but I thought I'd ask anyway.
Or just turn on Closed Captioning (CC)
awesome editor, making use of his obnoxious hand movements (cwl)
Great tutorial. Thanks for making such good quality stuff for us. however... I am trying to concentrate intensely - and the background music is KILLING me. There is no way to turn that crap off!!!! Jesus - ruined the whole thing. I ahve a headache now.
wow that's complicated data binding, I prefer Blazor Hybrid
this was insanely complicated
Are you sure this stuff is for beginners?!!
i did not understand anything
that's an awful lot of code to get a string from a to b.
I almost bought into this MAUI stuff, but after watching these videos - there is NO WAY I am going to use it, nor am I going to allow any of our developers to use it. This is just another WAY overcooked mess of a "tool" from Microsoft. Every time they do something "new", they add 13 more layers of complication. The most simple task becomes like learning everything all over again. Then later, it is abandoned for something else. I have been a MS developer since 1982. I know what I'm talking about. Yes, pre-windows. As in MS-DOS.
"and i will ADD this and that Perfect, and also i will... WTF man" why u even here? funny dress hat man...
You are good instructor, but doing the mistake that a lot of coaches do. You explain everything well, but you try to explain too many things in one class. I have coached 5 sports and I've noticed it is better to stick with one or two things and explain them really well, rather than try to explain as much info as possible in one class.
i just wished u didnt use that community thing. now i dont understand it at all.
It's WAY easier to use it than to not use it. It does away with a LOT of convoluted boilerplate code, like manually implementing INotifyPropertyChanged etc
@@yannduranx why all cant build up uppon html and css, the world would be another
something is really wrong with the intro
When I heard the phrase "ancestry binding", I almost threw up. OMG. Really? A relative source? Jesus H Criminey. Can you make this any more convoluted??? I'm out.
James I am trying to setup a login Page to identity. when the user clicks the button I call a login procedure which is a task. It is working fine. how ever I would like the login procedure to load a bunch of data and in between the calls push status to the user on what data has loaded. I can not figure out how to do it. My code does not run properly. the ui does not update. I use statehaschanged. please help.
I'm seeing an issue in my version of this MAUI application with the ObservableCollection inside a CollectionView. I can add items, but once I remove an item and then try to add another item I get the **UnhandledException**: [Microsoft.UI.Xaml.UnhandledExceptionEventArgs] Exception = {"Value does not fall within the expected range."} Message = {"The parameter is incorrect."} [UPDATE] I just discovered the issue was with the SwipeView inside the CollectionView. I hope someone on the MAUI team is working on the bugs with the SwipeView control. I have taken it out for now; not sure how a developer would make this work on a phone?... for now I'm just going to show a delete button.
Thanks so much my friend
OnPropertyChaGNed() Nice.
I don't know how that doesn't jump out from the code and punch him in the nose. I saw it as soon as he typed it!