MVVM Dialogs: Showing Dialogs in an MVVM Application with a Dialog Service

In this video, I answer the question "How do I show Dialogs in an MVVM application?"
Showing dialogs in an MVVM application is a very common requirement. MVVM dialogs are actually core to any MVVM application. In this video, I show you how to use an MVVM Dialog Service to abstract away the process of creating and showing dialog objects from within a ViewModel.
The first step in showing dialogs in an MVVM application is to create an interface that defines your Dialog Service. For example
public interface IDialogService
{
void ShowDialog()
}
Next you need to create a class that implements your MVVM Dialog Service.
public class DialogService : IDialogService
{
public void ShowDialog() { ... }
}
Once created you would use this service in your ViewModel to show your MVVM dialogs
IDialogService dialogService = new DialogService()
dialogService.ShowDialog()
In this video, I will walk you through each step reuired to implement a proper MVVM Dialog Service.
We will cover:
- Creating the MVVM Dialog Service
- Showing dialogs using names
- Handling Dynamic Dialog Window content
- Responding to closing the Dialog within your ViewModel
- Passing data to your ViewModel when you close the dialog
- Registering ViewModels with your Dialogs
- Showing dialogs using a ViewModel Type instead of a name
00:00 - Intro
01:16 - The Demo App
02:54 - Creating the Dialog Service
05:52 - Dynamic Window Content
09:20 - Closing Dialogs with Parameters
14:39 - Strongly Typed Dialogs
21:24 - Automatically creating and assigning Data Context
23:53 - Summary
Be sure to watch my new Pluralsight course "Introduction to Prism for WPF":
📺 bit.ly/PrismForWpf
Sponsor Me on GitHub:
🙏🏼 bit.ly/SponsorBrianOnGitHub
Follow Me:
🐦 Twitter: bit.ly/BrianLagunasOnTwitter
📖 Blog: bit.ly/BrianLagunasBlog

[@rahulmathew8713]

I also asked you a similar question about login dialog box and you posted a video for that. Awesome video Brian, we are learning really cool lessons from you. It was only because of you I was able to complete my MVVM project and I landed in my new job.

[@BrianLagunas]

Wow! That’s great to hear. Thank you so much for your kind words. I will try my best to continue to help others. I wish for your success.

[@dsuess]

Brian, this is a great refresher for Prism's Dialog functionality. Your timing is perfect for the Prism.Avalonia project. This is literally the last piece for the v8.x upgrade; hard to find free time w/ office work's end of year crunches.

[@BrianLagunas]

Great to hear. I have a two week vacation coming up soon. I’m crunching on a lot of tasks trying to knock them out in time 😁

[@shaihulud4515]

That's so awesome! You inspired me to keep on practicing with C#, and this topic was one of my main questions - always has been. Now, about some time ago, I found my own way of doing this mvvm compatible. Now I am so excited to learn what your approach is! Many of that little step stones on the way to my own solution I learned to overcome thanks to your videos. Now, I am no programmer to make a living out of it, so I cannot allow me to judge on this behalf, but I am a teacher, so I know a thing or two about teaching, didactics, motivating people and the likes. You sir are an absolute brilliant teacher! Thank you!

[@BrianLagunas]

Thank you so much for the kind words

[@AlmirVuk]

Looking forward to more videos like these! I am a real fan of your presentation style :)

[@BrianLagunas]

Thank you so much.

[@robbienorton9522]

Excellent video and explanation of how everything works and why etc. I wish everyone did tutorials this clearly!

[@BrianLagunas]

Thank you so much!

[@rolandwatz7797]

By following your video and type the code shown in it, I have learnt in this hour more than in the month before. That was a huge motivation - boost. Thank you very very much. And whenever you come to germany - your coffee is for free - forever ;-) !!!!

[@BrianLagunas]

I’m so happy to hear this video was helpful to you. I will definitely take you up on that. When I go to Germany I’m always in Frankfurt. I hope you’re close by 😁

[@rolandwatz7797]

@@BrianLagunas I'm close to Stuttgart. But Frankfurt is my hometown. A good chance to go to a soccergame to the best club of the world ;-)

[@lilyflowerangel]

Nice video! Thanks for uploading. Solved a lot of my questions regarding MVVM-Dialog coding ethics.

[@BrianLagunas]

Thank you for watching. I’m happy to hear it was helpful

[@williamliu8985]

Thanks very much! Looking forward to more fancy WPF skills from here!

[@BrianLagunas]

Thanks for watching

[@robertthurman8412]

Another amazing video. I'm still trying to wrap my head around it but there is a ton here that have questions on.... I just need to get use to the abstraction that you are talking about. Again, great video.

[@BrianLagunas]

Thank you so much. If you have any questions let me know and I’ll try my best to help answer them.

[@robertthurman8412]

@@BrianLagunas hello.... I think you need to do a master class on some of the more advanced concepts.... this information that your providing is amazing. I do, however, have several questions regarding generating the views without instantiating them in the viewmodels. While this video seems to provide some idea around passing information from one viewmodel to another I just don't see it yet. So how do you pass in different parameters from the main viewmodel to a different view (the information passed could be anything) like what if you had a configuration view and viewmodel and needed to pass the configuration data back to the main view and viewmodel ... e.g. Say I have a main view that has a textbox and a button that opens another view. I want to type information in the textbox and pass it to the another view / viewmodel when I click the button. Now I (for the most part) understand binding and kind of have my head wrapped around dependency injection but for the life of me I can't figure out how to get infomation from one viewmodel to another. Maybe its my understanding of interfaces... and that is the solution to the problem. Do you have a class that you offer on this subject? Let me know.

[@rodrigojuarezdev]

Awesome content, thanks!!

[@BrianLagunas]

Thanks for watching

[@solvedplus858]

awesome, many thanks for your very nice tutorial

[@BrianLagunas]

Thanks for watching

[@mosayyeb.ebrahimi]

Fascinating!

[@BrianLagunas]

Thanks

[@saexpat]

I liked your video cos you said not to but I also was interested in your content too. Thanks

[@BrianLagunas]

Thank you so much

[@立青-0.0]

The video is great, it helped me a lot, thank you❤

[@BrianLagunas]

Thanks for watching

[@harvey6456]

Thanks, I learned a lot in this video.

[@BrianLagunas]

Thanks for watching

[@mdrahbarahmedkhan]

I asked this question 😁 Thanks Brain 🙂

[@BrianLagunas]

I’m happy I finally got to answer it 😁

[@dsuess]

This is a good reminder, thank you. I'm still wrapping up Prism.Avalonia v8.x upgrade and DialogService is the last piece missing, which I'm trying to find time to wrap up.

[@BrianLagunas]

Nice! Sounds like a fun project

[@pminnebach]

Hi Brian, nicely explained video. I'm creating an application that has a textbox and a button "search". The searchbutton would open a new dialog. So far so good thanks to your video. But what my app needs is that the input from the textbox is passed as a parameter (or some other way) into the viewmodel of the new dialog, some code would then populate a combobox based on content from the textbox and the selected item is then returned back to the original viewmodel that opened the dialog. Can you help me?

[@xozuhanjan]

always thanks

[@BrianLagunas]

Thanks for watching

[@andreikashin]

Amazing

[@BrianLagunas]

Thank you

[@jumeaux146]

This is really great! I was wondering if you could do something with dependency injection. I see it a lot but I can't seems to find someone to explain and show how to do it easily! Thank you in advance :)

[@BrianLagunas]

I did a live stream on dependency injection a while back. Here is the link. Just scrub through that video kzbin.info/www/bejne/d4SnnqWLlrRomac

[@geoffshotts]

Hi: you mentioned you would normally inject the DialogService into the (ViewModel?) constructor. So do you usually only have one instance of a DialogService which is part of the ViewModel construction parameters? Also, is your DialogService a singleton or do you leave the possibility of having multiple instances of DialogService?

[@BrianLagunas]

Usually all services are registered with the container as singletons. Very rarely are there multiple instances of a services.

[@jannickbreunis]

In what part of the project the dialogservice is located? Is it a public class in the core (viewmodel+model) or is it part of the view? Thanks for the tutorial, I'm going to work out how a viewmodel can initiate another viewmodel with relevant view.

[@KashifMubarak]

Hi Brian, this is so cool and thanks for a thorough explanation throughout the video! I do have a question though; how to register a viewModel that accepts some parameters?

[@BrianLagunas]

Modify the service to accept parameters, and then create an interface that the VMs should implement which will be used to pass the parameters to the implementing VM.

[@chrisvarone87]

Hi Bryan, This was a really helpful video in trying tog et my head around MVVM, but scrolling through the comments it looking for ways to add data to the dialog box. I.E. I want an exception window that provides a call stack and exception message and a Title as Parameters I send in to be displayed and I have more generic Dialog box that does not need anything but a message. The only solution I saw was make an overload to the show dialog with more parameters and restrict your Views to those with View models that have this interface. This feels... Overly complex and brittle. Each time a new Dialog bog with a new Input configuration is created we need to ake a new interface for that ViewModel and then make sure the view specifed for the show dialog has a view model of that interface type. is that correct? At that point it starts to feel clunky... Do you have any better solutions?

[@MrATFisher]

I have an application I'm trying to develop for my company that uses Dialog windows for receiving and returning input from a user to a ViewModel. Is it a better practice to have a DialogueWindow template and inject Views into the window by setting the content? Currently I have each view defined as a window instead of a user control, but I'm not sure if that's the appropriate way to do things. I'm pretty new to MVVM and WPF.

[@BrianLagunas]

Do what works for you and what makes you successful.

[@juliocesaramadortejeda1455]

very good video, thank you very much, a question: how do I get the dialog to return generic data, for example, can I have a list and select a value and return it to the main view?

[@melsawy93]

Hi Brian. Appreciate the huge effort and helpful videos you are putting out. I understand that in this video you are implementing a "mini" version of the IDialogService already in Prism. I am currently using the IDialogService in Prism. When I try to .showDialog and specify a Window not a Usercontrol it gives me an error "System.InvalidOperationException: 'Window must be the root of the tree. Cannot add Window as a child of Visual.' Is this because the IDialogService in Prism only allows usercontrols to be injected into a blank window? I believe you might of faced the same issue in your Outlook series right? Would I need to modify the IDialogService in Prism?

[@BrianLagunas]

You cannot use a Window as a dialog in prism. It must be a UserControl.

[@melsawy93]

@@BrianLagunas Thanks thats what I figured. Can dialog windows have regions and having the ability to inject views into them? I have a mainshell and I want to click a button that would open a window/dialog for a module.

[@BrianLagunas]

Yes. You just have to handle that yourself.

[@melsawy93]

@@BrianLagunas okay. I will have to read more and learn how to do this. Thanks!

[@solvedplus858]

I like your method to open any dialogue from the viewmodel i used it on xamrin forms but the pages freeze until the viewmodel load and get all data from database my question is how to load the page fast then let the viewmodel do his staff then update the UI so my view or page not get freeze, thanks in advance

[@mdrahbarahmedkhan]

Hi Brain, Could you please guide us how to implement WPF application on Dual or multiple monitors ?

[@Iftkwlfb]

Hi Brian. Thanks for the great content. What is the best approach to implement drag and drop on a treeview with mvvm?

[@BrianLagunas]

Drag drop is a UI concern. Can you explain in more detail exactly what you are expecting to happen when you drag drop?

[@Iftkwlfb]

​@@BrianLagunas I want to move one node to another in a TreeView without violating the MVVM principles. The logic should take place in the ViewModel

[@BrianLagunas]

Sounds like a behavior may be a better approach

[@kennethfleckensteinnielsen4708]

I like you approach, but I run into a problem, with how to map the viewmodels to views. I can ofcause do it in the xaml, under but I want to use the register viewmodels/views, for that, that must be possible somehow.. Thanks good stuff ;-)

[@muraliq24]

Hi Brain, Thanks for such a great video.. I am working on an application where I need to show a keyboard dialog for user input. I also need to restrict the user to enter a value between min & max range. I have a KaypadViewModel with min, max and userInputValue properties. I followed your video and able to display the keypad but I am not able to figure out how i can exchange data between my KeypadViewModel and MainWindow. Can you please share your thoughts on this? Thanks a lot

[@BrianLagunas]

Send the data back in a callback that the MainWIndow ViewModel can handle.

[@muraliq24]

@@BrianLagunas Thanks Brian. Will give it a try

[@prakashview4341]

Hi Brain, Thanks for the video. So If I want to pass any data to NotificationDialog ( Data is binded to textblock control), How do i do that?

[@BrianLagunas]

Just modify your service to accept parameters and then pass them to your views via an interface in your implementation

[@NagiTangCheong]

is there any reason using Activator CreateInstance not a new T()

[@drzavnasluzba]

Hey Brian, great video as always. I have a question, how to use dialog service to show progress dialog? Need to block clicking other buttons until awaited task finish.

[@BrianLagunas]

Call ShowDialog on the window instead of Show in your service to block interaction.

[@drzavnasluzba]

@@BrianLagunas Yeah, I tried with ShowDialog but it blocks code execution until closed, so I cant do: service.ShowDialog(); await someTaskAsync(); because someTaskAsync will start only when I close dialog. So maybe dont await task first and then showDialog?

[@BrianLagunas]

@@drzavnasluzba oh, I understand now. You need to use a busy indicator not a dialog. You can still use a service to inject it into any view.

[@mdrahbarahmedkhan]

Hi Brain, I need help. Actually I have an Item Control and when I populate the same with data it comes around 50-80 item in the Grid Each Item Control has button. On click of that button I wanted to open popup but that pop-up should be inside the item control area. Could you please help me

[@BrianLagunas]

There are too many variables in the described design that make providing any type of solution impossible. To make the correct design decision I would need a lot more information which cannot be provided via a comment. Sorry I couldn’t be more helpful.

[@frednicholson]

I'm not sure if I see how wrapping a dialog with an interface class solves the layer violation caused by opening a dialog from the view model? Shouldn't the dialog be generated by the view?

[@BrianLagunas]

There is no layer violation and you aren’t opening a dialog from the view model. You are simply calling a method from an interface in the view model. The VM doesn’t know what that method actually does. Only the implementation knows what that method does. That’s the power of abstraction via interfaces.

[@frednicholson]

@@BrianLagunas Thanks for your comment. I'm still learning this stuff. and don't have a deep perspective yet. Was just put on a large WPF code base. Dialog boxes are implemented via controls in the view that are selectively displayed via binding to view model variables. Seems weird, but there are many different interpretations of MVVM.

[@torchok19081986]

I have a tech question : how do i pass ViewModel Object with data to Commandparamter in MVVM in ICommand if i have two diferent types of Model or exists easier approach to achieve that ?

[@BrianLagunas]

I'm sorry, but I don't understand the scenario. Can you provide more information or context?

[@torchok19081986]

@@BrianLagunas Ok. I have dataGrid with Itemsource ObservableCollection two different Models, where one of them is reference over another with ID. App was created in MVVM Pattern. I want add Details additonally from another Model / ViewModel for example Customer Company can be Supplier as well. All of them is in same DataGrid.

[@mahdimohammadalipour3077]

Thank you for this amazing content. but one thing I couldn't figure it out is this: you created your Dialog Service and the corresponding interface in the "View" project and also your "View Model" is in the same project so you are able to access the class. but if I have my "View Model" in other project how can I access the Dialog Service from "View" project? If I want to use the Dialog Service class I have to add "view" project reference to my "View Model" project which is not ideal from MVVM point of view. if I want to define Dialog Service in "View model" project so I can have access to it then I can't create the instance of the "DialogWindow" Window from "View Model" project. How to overcome this dependencies ? or is allowed to have "DialogService" class that is defined in "View" specifically?

[@BrianLagunas]

I would put the interfaces in a shared project, or even separate project so they can be used anywhere.

[@mahdimohammadalipour3077]

@@BrianLagunas Thanks for your reply. so i mean it is allowed to define some classes in "View" project even they are tightly coupled to the view ? like Dialog Service class you derived from the interface that you've defined here? and It doesn't violet MVVM pattern. Right?

[@BrianLagunas]

@@mahdimohammadalipour3077 view classes belong to view classes. If you need access to view properties in a VM you use interfaces to abstract the view itself. So you do not break the MVVM pattern.

[@mahdimohammadalipour3077]

@@BrianLagunas yes. I got it now. thank you for your clarification sir 👍

[@piotrgoacki9070]

Thanks for the video it is really helpful. I wonder is a Dialog Service a part of View or ViewModel? it looks to me as it's neither, because if its part of VM then you call DialogWindow from VM which is violation of MVVM. So isn't it another layer in the MVVM between View and ViewModel? It also looks a s a way to extract code from code-behind to another file? I'm just curious and any insight would be great :)

[@BrianLagunas]

The DialogService is a service that can be used anywhere. It is not violating MVVM at all. The service abstracts always any implementation from the view and viewmodel

[@piotrgoacki9070]

@@BrianLagunas thanks for the reply, very much appreciated. What would you respond to a criticism of this approach which says that this is dependency hiding and you actually call a View window from View-Model just hidden under a service? And why having it handled in the code-behind of the View is bad? I am as many people a bit confused about Mvvm in general, as there are so many conflicting approaches. Many thanks and keep up the good work! 👍

[@BrianLagunas]

I’d say there is a misunderstanding of what’s actually happening. Your criticism does not accurately represent the architecture that is in place.

[@piotrgoacki9070]

@@BrianLagunas Hi Brian, it's not my criticism it's an opinion I saw on stack overflow. I just want to understand it better :)

[@BrianLagunas]

@@piotrgoacki9070 well then their opinion is not based on any facts 😁

[@JhonnyPrz]

Would it work in avalonia ui?

[@BrianLagunas]

Yes

[@mariofares4692]

What if I want to show the Dialog CenterOwner? Using this service means that the dialog does not have an owner. What to do?

[@BrianLagunas]

Set the owner in the service. 99% of the time it’s the active window.

[@mariofares4692]

@@BrianLagunas Really appreciate the reply, but I am no sure how to do that, how to pass the MainView to the dialog service, store it, etc.? What is the best way to do this?

[@BrianLagunas]

You don’t pass it. You get the active window using the .net api.

[@bgmexpert]

What would i do if my views resides is within another project in the same solution but can't reference that project?

[@BrianLagunas]

I don’t understand the question. Usually all my views exist in another project and even the main app doesn’t reference them. They are the injected at runtime with the use of modular architecture and dependency injection.

[@bgmexpert]

@@BrianLagunas ok Thank you

[@gus9822]

Hi . i love your content . I also have a question . if i close app i want to do some clean up in VM but Destroy is not trigger. How to make it work ? Can you make a short tech answer about that ? Also when i close app not even OnNavigatedFrom. is not triggered . Maybe will be a good subject for a short tech question . Thank you

[@BrianLagunas]

This is to be expected. Destroy and Navigation events do not occur when an app is shut down. What are you trying to clean up? Any unmanaged resources should implement IDisposable

[@gus9822]

@@BrianLagunas i solve the problem by using an event aggregator. In mainview i bind the Close event to a command and in view model i subscribe to the event and i start to do some clean up . Basically i stop a timer and i send a shutdown command to a device (3th party library that control some sensors sensors). Where do you think is better to do the polling task of data in VM or in a service and just pass the data with events ? if you have a course or something where i can learn more about this please let me know . Thank you and keep doing great work :)

[@BrianLagunas]

Glad you figured it out.

[@mahesh_rcb]

This is how IDailogService in prism works ??

[@ColdFaith]

You already asked the question i wanted to ask too :D.

[@BrianLagunas]

This is exactly how the Prism Dialog Service is built. See for yourself github.com/PrismLibrary/Prism/blob/master/src/Wpf/Prism.Wpf/Services/Dialogs/DialogService.cs

[@hussainhussaini2267]

I asked this almost a year ago! 😆

[@BrianLagunas]

Sorry it took so long to answer 😁

[@hussainhussaini2267]

@@BrianLagunas Thank you anyway for replying ❤️

[@taab84]

How To make "select all" in datagrid with mvvm?

[@BrianLagunas]

Create a command in which you loop through your entire collection and set the IsSelected property on all of them. Assuming that’s how you’re handling selection in the grid. If you have a collection of selected objects just create a new collection using all the objects instead.

[@Moosa_Says]

Having names like "ExecuteShowDialog" or "ShowDialog" inside VM isn't itself wrong? because essentially we are exposing "What we are doing on UI" to the View Model. It would be worth mentioning that you used this kinda naming for example only...or a video about what kinda naming is allowed in VMs and What's not, or what's a clear no-no and what's Yes-yes etc.. Anyway, Thanks for the video, it was really good!

[@BrianLagunas]

No, it's not wrong. You can use any name you want in a VM. A lot of people overcomplicate what MVVM is. In its simplest form, MVVM is nothing but abstracting the view from its state. That's it! MVVM is not commanding, it's not even aggregation, and its not navigation. You have to solve all those problems regardless of using MVVM. As long as you keep your VMs clean of view based objects/code, it stays testable and in compliance with the MVVM pattern. By using an interface, we are able to abstract away any view objects/logic and still invoke that code from a VM, and I always name things according to their function so the next dev reading the code knows exactly what it does.

[@Moosa_Says]

@@BrianLagunas Thank you for the explanation Brian.

[@solvedplus858]

I have a tech quesion, How can we print documents and pictures with print preview in MVVM I hope you can help me thanks in advance

[@BrianLagunas]

You’d take a similar approach. I would just create a service to handle it.

[@solvedplus858]

@@BrianLagunas ok thanks i will try as your advice

[@MultiLeechCZ]

Can you please share git repo for this ?

[@BrianLagunas]

Sorry, I don’t have a git repo for this code.

[@yevheniytymchishin8401]

All that goodness can be achieved by using Prism)

[@BrianLagunas]

You speak the truth!

[@yhjeong5317]

I trapped into your fingers in thumbnail. I couldn't avoid it.

[@BrianLagunas]

Ha! Well I better let you go so you can get back to writing code 😁

[@bekisiphotshili2566]

How can I clone this teacher and spread him to all IT institutions?

[@dasfahrer8187]

This is really neat, but sometimes it's okay to break the rules to get something simple done and move on. When separation of concerns becomes a religion, it's a concern.

[@BrianLagunas]

Agreed. Be pragmatic. The pattern police will not come and arrest you 🤣

[@TheDotnettex]

If I could find just ONE video on YouTUBE where the tutor DOESN'T say "Now, this isn't the way I would do this" or "You wouldn't want to do this in production", I will fall out of my chair. The whole reason an individual would be watching a video like this is to LEARN something new, or REFRESH what they've forgotten. The LAST thing I want to learn is HOW NOT TO DO IT. Who spooles through title after title of instructional videos, looking for the worst ways to do something? "Hi, my name is Marty and I'm gonna show you the best way to make NOT SO GREAT pizza!". And why would I want to learn something that WOULDN'T be fit for production? Like "Oh, yes.. my company regularly spends the money, time and resources on projects that they never intend to release!" If you don't have the time to do it RIGHT, then don't do it at all. If your incentive is murch sales, or to collect a check from Google... then please seek another income stream. GOOD, RELIABLE content is difficult to find on here, especially after Google decided to PAY people to create it, turning KZbin into a video hub of bad commercials! So now, after wasting my time.. I once again have to go back to the search bar, and try to locate SOMEONE who is willing to show people the RIGHT way to do it (you know.. something that CAN actually be used in a production application). Now if you'll excuse me, I have to watch this video "10 Fantasy Locations that Don't Exist and You'll Never Go To"....

[@Prof_Bum]

26min to show how to display a simple dialog. Winforms was ahead of his time.