Build a WPF MVVM Application - START TO FINISH TUTORIAL
Vložit
- čas přidán 15. 06. 2024
- Learn how to build a WPF MVVM CRUD application from start to finish in .NET!
Throughout this start to finish tutorial, I cover various topics, such as:
🔥 Building user interfaces with XAML
🔥 Hooking up user interfaces w/ MVVM architecture
🔥 Managing application state
🔥 Dependency injection
🔥 Connecting to a database via Entity Framework
🔥 Packaging for deployment
🔥 Releasing via GitHub Releases
🔥 And much more!
TIMESTAMPS:
0:00 - Introduction
1:21 - Project Setup
3:20 - Basic MVVM
3:21 - ⭐ Views
25:59 - ⭐ View Models
47:23 - ⭐ Models and ⭐ Stores
1:03:47 - Modals/Popups
1:04:36 - Prototyping w/ Figma
1:07:13 - Views for Modal
1:19:15 - View Models for Modal
1:21:54 - ⭐ Navigation
1:28:25 - Displaying the Modal
1:32:44 - ⭐ Commands
1:32:45 - Basic Commands
1:49:46 - Async Commands
1:54:07 - Data Stores
2:14:12 - ⭐ Database Interaction w/ Entity Framework
2:14:53 - ⭐ Domain Layer
2:21:43 - Entity Framework Setup
2:27:41 - ⭐ Services
2:39:16 - Database Migrations
2:45:50 - ⭐ Async Data Loading
2:56:20 - Finishing CRUD
3:02:33 - Edge Cases
3:02:34 - ⭐ Loading Spinners
3:21:47 - ⭐ Error Handling
3:32:52 - ⭐ .NET Generic Host
3:46:29 - Miscellaneous Cleanup
3:55:11- ⭐ Source Control w/ Git
3:59:46 - ⭐ Publishing
4:03:40 - Conclusion
⭐ = key concept
PROPERTY CHANGED SNIPPET: singletonsean.s3.amazonaws.co...
SOURCE CODE: github.com/SingletonSean/yout...
💎 Become a Member: / @singletonsean
🏠 Discord: / discord
🐤 Twitter: / singletonsean_
🏆 Donate: www.paypal.com/donate?hosted_...
✉️ Email: youtube@singletonsean.com - Věda a technologie
Thank you to everyone for helping the channel reach 10,000 subscribers! To celebrate, this week's video is just a bit longer than usual 😄 🎉
Thank you!
Gracias por compartir conocimiento de calidad....saludos de los andes peruanos
I have never posted a comment on CZcams but this video has really helped me out so much that I wanted to say thank you for taking the time to produce it. I still have a long way to go building my own competency and will be watching this on repeat until all of the concepts sink in. Thanks once again. Now let’s have a look at some of your other videos.
Thanks apeshape, glad that this was helpful! I hope that other videos on this channel will help solidify some learnings. Cheers!
This is by far the best turorial on WPF coding I've ever seen. Good presentation, explination and knowledge on WPF and it's querks. Thank you!
Thank you for the feedback SodaDK, glad this presentation was helpful!
Gem right here! This comes in such a perfect timing for one of the things that I'm training for!
Fantastic Dan, glad this is helpful and I hope the training continues to go well!
Fantastic, really detailed and nicely done
Hi Sean! Neil Singleton here! Lol. Finding this extremely good and clear. I'm looking to change jobs and focus on WPF, which I did touch on a few years ago. Thanks bro. 😉
Thanks Sean. I like the underscore in fields. Good visual reminder between the public and private variables.
Holy coder! I just watched how u set up that interface. I know its just some "simple stuff" but the amount of knowledge you have about all the details is astonishing - or your video editing skills are impressiv as well :D. I mean you simply translate your talking to coding without hesitation.
Anyway just wanted to say thank you for giving a much needed step by step MVVM Tut. Keep it up
I've folloed your video step by step. It took me probably more that 8 hours. It is very complete and rich of interesting cues. Very good job. Thanks
Bravo Matteo, glad this was helpful!
Exactly what I needed!!! Great content as always
The best WPF content creator strikes again 😁😁
Thanks for the amazing channel and the amazing video 💐💐
THE best WPF DeepDive Video! Others take up to 4h but never go in depth as you. Please keep it up! Maybe evaluate some WPF Nuget Packages.
Thanks Charles! That's a good idea - there are some WPF packages that I'd like to take a look at. I'll book some time for that!
Very cool lessons on WPF! Keep it up please! There are few good wpf tutorials on the internet
I can’t import namespace at 7:33. Ctrl . Does not do anything and when I type the namespace in my self it does not work
Awesome! Thank you so much for your time and energy. I learned a lot from it and will definitely try these techniques in other applications.
Thanks omostan, glad this was helpful!!
That's Great 4 hours of pure new things to learn :D u made my day
very great usefull stuff. that´s already what i need. thank you so much 💚
Hey Singleton, any chance you could make an application that uses a calendar? Where you can add some kind of events and maybe even an option for sorting depending on the type of the event that would produce some kind of a list?
Thank you for sharing your great videos, there are full all good information, it is awesome!!
Dear Sean! Great video as it is, but it would be nice to add unit tests to it. It would be interesting to see if you test only the domain layer, or the db layer and the views as well in a start to finish tutorial.
Hey DrSteve! I would certainly test the domain layer (as you suggested) and miiiight test the DB layer with an EF in memory database. On the MVVM side, I'd also test commands since they typically contain important application logic. I probably wouldn't test view models that hard since they're typically just made up of properties, but I'd test any view models that have other methods defined. Lastly, I haven't had much luck ever testing views.
I haven't done my research yet, but I'd love to figure out how to do E2E testing on a WPF application. That would probably be the best way to confidently test views and view models.
I place a lot of value on testing in personal projects, so it would be nice to bring that to projects on the channel (hopefully in a non-repetitive or boring way lol). Good suggestion!
Love you man!
Excellent stuff. Thank you very much!
A question: How to handle the reading and writing of data using DTO's when there are related data to load from the database? An example on your system would be posts written by users that also have comments from other users.
Thanks for the tutorial very helpful
Wow. So much information. And I’m only 1 1/2 hours in!
I'm just starting this video, Sean you rock! I'm planning to build an engineering app in WPF for my company. Thank you!
Awesome! Hope these videos help 😃
@@SingletonSean can I ask how you personally learned WPF?
how do you feel about multi window apps? I have had my users request the ability to show more than one window at a time, but it seems to raise the complexity an order of magnitude.
Hi Sean, your videos are awesome... I fully completed this video and coding without missing a single line of code. Learnt lot.
Could you please make a video using Reactive Extension (Rx Library) with WPF.
Hello Sean,
another great video! Could you extend the application to read, write and update data (with Entity Framework) that are in a many to many relationship?
Greetings from germany - Patrick
Great and informative video. Thanks. I want to point out that there is a lot of xaml nesting that probably doesn't need to be there and is a bad habit to get into for performance sake.
This is really good, thanks
Thanks for the tutorial. It really helped me out. I wanna leave one remark, if it's not already here :D. When you add/edit, it would be good to disable the cancel button, when you click submit, because if we have some kind of delay, we will have problems.
Awesome!! THX!
I've been on a Hiatus from the defense/aerospace company I previously worked at (which did desktop/WPF applications for military aircraft), too do some web development, both frontend and backend. I'm going back too the aerospace company though, so this has been an amazing refresher on WPF, Styling, MVVM etc. I didn't forget it all, but after working in Typescript and react for the past 10 months I def needed this. Thanks Sean!
That's great Brandon, I also went through the transition from WPF defense industry into React + Typescript last year! I feel like a lot of front-end web concepts are applicable to WPF and can actually enhance our WPF skills. Regardless, I'm glad this was a nice refresher. Maybe in a few months I'll have to watch this video hahaha
@@SingletonSean Yeah I totally agree. Although React and WPF are for completely different types of applications my skills have definitely transferred.
@@SingletonSean Just curious, what defense company did you work for? Did you enjoy the work? Unless the stuff you worked on was under a clearance of course haha.
That SharedSizeGroup is so nice... Why didn't I know about this 100 projects ago?
Ah ikr, I was so satisfied when I was first introduced to SharedSizeGroup hahah
Sick video, I had to slow you down to keep up. Subscription is coming right now!
Awesome, glad this was helpful!!
02:02 Startup / Entrypoint startup
15:30 IsSharedSizeGroup
20:10 Tool used to design UI
20:35 Button highlights fix
23:00 Casting, storyboard background color;
25:00 Fix stupid borders radius*;
26:45: CallerMemberNaame (INotifyOnPropertyChanged)
Hi Sean, I have a question
There's any reason why you choose to have all-in-one architecture?
Awesome video
Thank you!
Hello Sean, Great video !
I've question about the navigation, is it possible to make a button with a dynamic NavigateCommand ? For example I'm at the home page and the button dependent of a variable, the button will set the current view to page 1, 2 or 3. I don't know if I need to set the variable in the ViewModel or in the App.xaml.cs. Thank you for all your content ! You really help me a lot through my personal project.
I am currently at the same situation, did you figure it out ?
First of I love this tutorial very informative :-D
Now how would you add a CLI interface with say basic CRUD functions so that say a server could add entries to the database that you work with in the GUI?
Thanks Sean, Great Video. i have a request can you post a video on Extensible WPF application with plugins addon like add new functionality just with adding plugins.
Thanks for the basic tutorial for my level of understanding, could you please make a video for custom messagebox in MVVM
When it comes to using a class library, which elements of mvvm should be put inside a class library
What is the advantage of using ContentControl, with changing content (Views/ViewModels) under the influence of Command [or just MVVM], over using Frame with changing Pages?
just more separation of concerns or something more?
Hi Sean, congratulations on your channel, I've been looking for more in-depth explanations about MVVM for some time without success, until I found your channel.
In all the examples I found on your channel, you do the MVVM navigation where the CurrentView is changed by calling the next View by the CurrentView itself.
How to have a fixed Menu in MainView (or MainWindow) and that the CurrentView is called through it?
And also how to have more than one View opened (not modal), because in your examples we always have a single View, the CurrentView?
Thanks in advance!
I’ve been racking my brains all day, but I finally managed to solve the problem.
I put the buttons in the MainWindow and the ContentControl in an area of the Grid (specific row/column in the grid). And in MainViewModel I created the Commands that fill that area of the grid with Views, making the buttons always available to change the View of that area.
It worked, but if I got something wrong, correct me. Thanks.
Ah I understand your situation Roberto! Your solution above is the most natural solution, so I definitely second that idea. Glad you solved this, and thanks for supporting the channel!
Hi Sean, I liked the video, made it easy to understand xaml and how it works, one issue tho. I just started learning c# and this video was a little bit too fast for me on normal speed, maybe in the future you can go lik 20-15% slower? that would help a lot
Have you tried slowing the view down using on CZcams?
@@kylerbriskey372 It's just not the same.
I'm wondering why in the CZcamsViewersListing you wouldn't just give the ListView a Margin = Corner radius (in this case 5) so the border corners don't have the ListView covering them?
Hi Sean, I've been learning C# lately and am about to learn WPF for building an app project that requires many contacts with the Windows API. Can you help me? In your experience, do you think it's possible to do these stuff:
- Running the WPF app in the background (as a system tray)
- Get selected text from outside of the WPF program (so when the user selects a text on any program outside of the current program window, we can get listen to the event and get the text accordingly)
- Registering a hotkey to run the program
After I'm confident enough that those things possible, I want to learn more about it and watch some of your videos for reference. Especially the MVVM part.
Thanks 😄
I have mvvm project with main view contain 2 views, I want to update textblock value in the first view from the second one .
The value updated only after refreshing the main view.
I fired the event for the property change to update the textblock binding property but still the value not updated only in case of refreshing the main view
Thanks for the video! I've noticed when you're formatting XAML all node params are alphabetically ordered, is it editor configuration or some plugin?
Hey Sergey! It's a VS extension called XAML Styler (marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler). It's suuuper helpful.
@@SingletonSean Man, you're a lifesaver! Thanks!
i'm starting c# and never use mvvm so tks to propose me this perfect example
Hi Sean, I want advices to Build an Api for my wpf C# project with PostgreSql. Can you help me
Hello singleton, this is Delegate. Nice to meet you 😬
Nice to meet you Delegate! 😁
Hey, how did you edit 1 line into 4 like in 10:09? Thanks for your answer in advance.
hey man great video!
i have one question tho.
how do you move all the attributes into separate lines?
my textbox attributes all go in a single line and i don't want to manually add enter before every attribute
is there a format setting that does that?
Hey Viktor! I missed this comment, but I use XAML Styler: marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler It is great!
Hey Sean,
Thank you very much for expended you time and show the community the correct architecture MVVM for WPF.
Very detailed and Great video!
Could you extend the application to use logging like Serilog or NLog? because your video about logging is very simple and show only one command (MakeSandwichCommand).
Could you recommend any book about WPF MVVM?
thanks and take care
Thanks MGA! That is a shame, I can't believe I missed out on doing logging in this video. I will have to come back for more on that, or maybe tackle it in the next big application video. Regardless, I would probably follow all of the concepts from the other logging video I have.
As for WPF books, I really haven't found many that focus on MVVM. I used to always browse through "Pro WPF 4.5 in C#" by Matthew MacDonald and learn some good WPF concepts though.
@@SingletonSean
Hey Sean
thanks for answering my question, it would be great if you could implement logging in your next big application
but I know it would be even cooler if you could implement the hamburger menu and of course the sub menus as well.
I hope you can do it very soon
take care and stay healthy
best regards
Marce
Hi Sean, what a shortcut key you was used to break line in XAML. From 12:30 to 12:33
Hi Takashi, I actually just use this VS extension that formats my XAML whenever I save a file: marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler
It's awesome and I highly recommend it!
I'm quite new to programming and recently moved from doing console programs to doing WPF and your videos (especially this one) are very helpful. I have encountered one problem though.
@47:10 I cannot get it to show the bindings, just as it was for you before you had to reboot. I tried the same and it still doesnt work. I followed the whole video step by step so I have no idea why it won't work.
I'm using VS Community 22 (.net 6.0)
Have you fixed the binding issues ? I'm still having issues with the listview binding.
@@thesorus You have a typo. The binding works fine. I find the issue with using a lot of similar 'names' results in typos. If you're using VS2022 when you run the program you'll see a red circle with a number in it on the top of the program window. Click that and look at the error message. Any null will be a typo. Look for a missing "s" or a capital letter or something that makes you roll your eyes.
How can use this concept to switch to different views in the DetailsView?
Great!
Please make an MVVM Crud app turorial with unlimited level treeview list!
Ah unlimited tree view lists are a tough problem, might have to try that out!
Hi good video so far, Sean!
I've been reproducing it/learning from it for about two days now. I ran into a problem with the initial migration of the DB which starts at 2:41:40.
My problem was this message:
"Could not execute because the specified command or file was not found.
Possible reasons for this include:
* You misspelled a built-in dotnet command.
* You intended to execute a .NET program, but dotnet-ef does not exist.
* You intended to run a global tool, but a dotnet-prefixed executable with this name could not be found on the PATH."
Which could only be solved by this command "dotnet tool install --global dotnet-ef".
I wanted to share this with you in case someone runs into the same problem.
Hey Freelancer, good catch! I must've skipped over that since I've had that tool installed for so long. Thanks for calling that out for everyone!
How different is WPF today compared to say 4-6 years ago? I ask because there appears to be so many more WPF tutorials in the previous 4+ years.
What are you doing to reorder your xaml properties? I see in Tool -> Options -> Text editor there is an option to enforce a separate line for each property, but you pushed something to reorder "Padding" from the last element in the list to the first.
Hi jonnyjazzz! I use this XAML Styler VS extension. It's awesome! marketplace.visualstudio.com/items?itemName=TeamXavalon.XAMLStyler
niceeee
using mvvm and command develop calculator application without codebehind and BODMAS rule has to work could you please make a video
Maybe you will explain this Grid.OpacityMask in detail, completely don't understand it
Is it possible to show item details within a Datagrid?
Please create tutorial for prism library or composite pattern for wpf mvvm
Good work brp, sir when will you be looking at .Net MAUI Sir
Thanks Olanrewaju! I'll look into .NET MAUI once it's fully released (it's currently in preview still)
In case you run into issues and get an error when adding migration just run "dotnet tool install --global dotnet-ef" in the terminal
Ah good call out. I already had this tool installed from previous projects, so I lost track of mentioning this. Thanks for mentioning this, Lavender!
Sean Da Gawd
Can you make the same tutorial using MVVM toolkit?
Can't the "Store" be another public property inside viewmodel?
Hey Deivid, the Store technically could be a public property that the view directly binds to. However, binding to objects that don't implement INotifyPropertyChanged could result in memory leaks, so you'll want to implement that interface on the store.
On the other hand, I typically prefer views to only bind directly to view model properties. This allows stores or any other infrastructure beyond the view model layer to change independently without breaking a binding on the view. It's also just nice for the view model to explicitly reflect the data required for the view in my opinion.
drop down menu nuget package is not compatible with .net framework 4.6 , is there any other way?
Hey Sunil, you could copy the dropdown component code into your own project so that it's built with .NET framework: github.com/SingletonSean/wpf-ui-workshops/tree/master/DropdownMenuControl
My bad for not being this component backwards compatible with .NET framework!
@@SingletonSean Thank You , worked !
😍😍😍😍😍
!!!!! Help me pls!!! But if we want add one more table, for example... a table with gadgets from which viewers are watching. there will be a field with the ID of the gadget and its name, how to make it show the name of the viewers in the main form, whether he is signed or not and the NAME of the gadget from which he is watching (how to make a connection between these two tables)
Is it fine to watch this one first or should you watch your Models - WPF MVVM Tutorial first?
Hi YaygerBombz! Either one is a good start - that said feel free to start with this one 😁
What i need
DimGray is a great color when you want something darker than gray and don't want to spend much time on it.
Ah that's good to know, I will have to try that next time. Thanks UnknownMoses!
I really love the tutorial, but I would prefer a shorter video that focuses on the topic. It is an MVVM pattern video. You focus on styling, templating and animations. But great tutorial tho.
Haha "DarkGray is lighter than Gray"!
Yep! I guess we should use "DimGray" if we want an actual dark gray haha stackoverflow.com/a/47053673
36:00
Can you help me i am getting error please connect with me it'll be really great help from your side.
Good tutorial, but unnecessary long and bad names for variables and methods that made code barley readable
Thanks for the feedback! This video was indeed long - I'm not sure I could've made it much shorter. Do you have any examples of bad naming and how those could be improved? Interested in hearing other's perspectives on naming conventions.
@@SingletonSean The CZcams prefix just made the code much longer and harder to read, I watched till 1 hour and couldnt keep up anymore because of too long names and the name differences are so little you sometimes miss it, next time try to find a much more shorter and simple names please. Its not the problem how long the video is, the problem is how long the names are (characters) so you cant keep up. Also please dont switch between tabs so fast its hard to keep up, for 1 hour of your video it took me 4 hours because I had to pause and look where I am and check the names if they are correct... You seem like you know a lot and its a great tutorial but its too complicated with the names and the speed of you switching between tabs, it makes it really hard to follow. Thank you for being nice and actually wanting to know what the problem is, respect and good luck to you!
I hate WPF. It keeps giving me errors, and when I build the solution they go.
Thanks for the content! BUT I just have to say that it pisses me off when I heard "I haven't planned this out", most of content creators on WPF and MVVM do this, and it makes harder to learn than it should.
Hey Alex, no need to worry! When I said that, it was true. However, I took many breaks throughout the creation of this video for planning and to keep us on track. But it would be impressive to create an app in a 4 hour video with no planning :)
@@SingletonSean Thank you for the response! I give it a go then!
plz use microsoft mvvm toolkit is inexpensive and shortens you a lot of things
Hi mohamed, I will soon! I want to do a video on MVVM toolkit specifically, perhaps even as a livestream.
@@SingletonSean good , thks you ,I wait to see it😍
Is it possible for someone with ADHD and Dyslexia to ever become a decent programmer? This looks way overwhelming to me and I came from the WinForms generation. :(
Why wouldn't it be possible 🙂
I'm pretty sure there are blind programmers out in the industry
@@starlk_ Good point, trying to force myself to take 15 min breaks every 1 1/2 hrs during the tutorials. Goal 1 is to follow along and do what is done. Goal 2 is to take the app, make a v2 with a better UI, add more DB functions, add more commands, etc. Goal 3 is to make my own from scratch but for a diff purpose.
With goals like those, you're well on your way to becoming more than just a decent programmer 😁
Really confusing code, many things could of been explained better and written clearer.
Too fast, and too much for a simple app don't u think ? :/
The goal is not to blindly copy the code, but to understand concepts that can be applied to other more significant projects. A small project to demonstrate such concepts is very good.
52:27 Yet another person who seems not to understand and must be producing poor quality code. I think their code must be hard to look at.
hai Sean im having this error when im downloading the dropdownmenu package:
Error Could not install package 'DropdownMenu.WPF 1.0.0'. You are trying to install this package into a project that targets '.NETFramework,Version=v4.7.2', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.
Hey Sean
please could you help me with this issue
i put the the logic for the Error and Status message in a class MessageViewModel
MessageViewMode is instanced into the ViewModel
now i try to consume that in the View, See code
but a binding error is trown:
ErrorMessageViewModel property not found on object of type MessageViewModel. Target TextBlock.DataContext
Do you have any suggestion about it?
Tanks very much for your response
Regards
MGA
Hi MGA! The issue is that the Grid and the TextBlock DataContext's bind to an ErrorMessageViewModel. If you remove the TextBlock's DataContext binding, all your bindings should work.
The reason the TextBlock doesn't need a DataContext set is that the TextBlock already inherits the DataContext from the Grid. Since the TextBlock inherits the DataContext from the Grid, all bindings set on TextBlock properties will already point to the ErrorMessageViewModel. By setting the TextBlock DataContext again, the DataContext is attempting to bind to an ErrorMessageViewModel.ErrorMessageViewModel property, which of course doesn't exist.
Let me know if this makes sense!
@@SingletonSean Hi
the issue with the DataBinding at the TextBlock is fixed, but now appear three issues
MessageViewModel AddCZcamsViewersCommand Button.Command ICommand AddCZcamsViewersCommand property not found on object of type MessageViewModel
MessageViewModel CZcamsViewersListingViewModel CZcamsViewersListing.DataContext Object CZcamsViewersListingViewModel property not found on object of type MessageViewModel.
MessageViewModel CZcamsViewersDetailsViewModel CZcamsViewersDetails.DataContext Object CZcamsViewersDetailsViewModel property not found on object of type MessageViewModel.
the issues are now, because the DataContext for CZcamsViewersView is ErrorMessageViewModel and no more the CZcamsViewersViewModel
Do you have any suggestion for the issues?
Greetings MGA
This simple app has gotten so complex, I can't even think about trying to build a bigger project using MVVM right now 🥲
Well, as long as you're following the main principles of MVVM, you can scale the small app into a bigger one relatively easily.
28:39
48:51
1:32:54
2:17:19