How to open a Dialog Window using MVVM - c#

Can someone please help me work out how to open a Dialog Window,
the simplest scenario I can think of is:
We have a main window with a button and a Label,
when the user presses that button,
a dialog window with a text box and 2 buttons appear,
one button says submit,
when the user presses submit it closes the window,
it changes the color of the mainwindows background to red,
and takes the input placed in the textbox and changes a label on the main window to that content(I am bot so much worried about this part I get how to do this part),
while the other button just cancels the operation,
Assume that the Datacontext of the MainWindow and DialogWindow is MainWindowViewModel and UserInputViewModel respectivily.
Now on this link Cameron talks about using a service, ie IDialogService and DialogService
now could someone please explain to me how to implement those methods in the scenario above? Or if there is another way to do this then please let me know?
Please don't link me to any to any pages because I've probably read them all and I can't seem to get a clear understanding of what is meant to be happening?
~Slowly loosing his sanity because MVVM makes things so much harder :(

Not really an answer, but I think I'll add my POV anyway. How to use dialogs in an MVVM way, is something no one has really managed to do in an elegant fashion yet. There's basically 3 camps:
(1) The people who use an dialogservice like you described,
(2) The people who thinks that MVVM is good, but not something you should spent countless of hours trying to get right, so they use the codebehind, and
(3) people like me, who thinks that more often than not, the dialog and the parentview are so tied together that they should share viewmodels (as-in, the dialog is just one way of showing the data from your viewmodel).

The learning curve for MVVM can be slightly steeper when attempting to do something a little more advanced than simple data binding. Have you checked out the MVVM Light toolkit? It includes a Messenger class that facilitates sending messages around the place. A listener registers for messages they want, and a sender just publishes them. In this manner, neither the listener or sender know about each other, but can communicate. Meaning the View can register for a message, and the ViewModel can send one.
This question talks about doing something very similar to what you want to do. I recommend the MVVM Light toolkit by the way!
I'm not sure about how you use the results of a dialog to send them through to the ViewModel. I'm assuming the harder part for you is communicating from the VM to the View.

Related

Open EditAppointmentDialog MVVM

I currently have a viewmodel such that it has a grid full of appointments. I would like to double click and open up my CalendarView with the editappointmentdialog opened for the record that was selected. May I ask how would I do that in an MVVM style?
I searched the internet and found this RadScheduleViewCommands.EditAppointment.Execute(appointment, this.scheduleView); but I don't have access to the scheduleView object from the MVVM. May I ask how abouts I should do this?
I think I can achieve this if I relay it back to the view, but I'm trying to look for another approach.
The issue you have is that you can't open a view from a view model as it'll break the MVVM design pattern.
There are a couple of ways you can open a view from the view model without too much hassle:
Implement a Messenger service to publish an event to the view, like MVVMLight does.
Straight up add a Click event handler on your button and open the view in the code behind (It's still view code after all).
However my preferred method is to use an ICommand, or RelayCommand. I have written a repository on GitHub which demonstrates how to achieve this.

Popup child window with ok and cancel buttons

I've created a simple dialog here with a list of people. All I want to do is a few simple things which are rather trivial in winforms. However I'm struggling to grasp how to do this in wpf with an mvvm approach. Could someone help me out please.
When the user hits the Add New Person button, I want a dialog to appear where a user can type in their Name and either hit OK or Cancel. If the user hits OK, it appends the person to the list. (keep in mind i'll add more edting fields for the users to input, for example last name...)
When the users has a single item in the list selected, i want them to give them the ability to click an 'edit' button showing a dialog similar to the one in the previous step, pre populated with the selected items data, so a user can edit the properties. Then depending on if they hit OK or Cancel the changes are committed.
Dropbox solution: https://www.dropbox.com/s/8sjpabfod08yil5/AddDeleteItems_basic.zip?dl=
To create and display dialogs using MVVM, you'll want to implement a dialog service pattern to handle such requests. This service would be called from within your view model.
There is a really informative Code Project article about this very topic (Showing Dialogs When Using The MVVM Pattern. My advice would be to read that article and then look through the source files accompanying the article. This should provide you with a very good starting point to achieve your use cases (custom dialogs) and can also be used for displaying standard dialogs too (e.g. open file, save file, browse folder etc).
The service pattern isn't the only way to implement this, in the following article I show how to do it using the same data-driven mechanism used for regular windows:
http://www.codeproject.com/Articles/820324/Implementing-Dialog-Boxes-in-MVVM
I suggest this tutorial for you to get started. However, for the dialog Xceed library has some cool custom controls that may help you.

The "pretty" way to make a modal dialog in WPF with Prism and MVVM Pattern

yesterday i used google to find a few ways to make an awesome reusable modal dialog in WPF with PRISM 4.1 and the MVVM pattern. I found some examples but i must say non of those were as "pretty" as i liked them to be.
This one: WPF Modal Dialog (no mvvm -> no use)
This is pretty nice: Showing Dialogs when using the MVVM Pattern (but still it's using a selfmade ServiceLocator which i don't need as i am using the IUnity Container. I could use the logic and rewrite it to Unity but that's not the "pretty" way in my honest opinion.
Well after a while searching the web for informations some blog (can't find the source right now) told me that the PRISM Framework got something called "interaction requests". So i checked out the prism documentation and found a small part under the topic "advanced mvvm scenarios" but the information given in the documentation aren't enough.
I'd like to know if somebody have any good example or any good blogpost about how to realize an awesome modal dialog in prism wpf with mvvm.
EDIT:
Regarding the question in the comments:
What makes a modal dialog awesome?
Indeed a good question.
It must be modal (while the dialog is open the rest of the UI
should be freezed)
The dialog view can have it's own viewmodel or
at least i would like to give an instance of an object to the dialog
view and return an object back to the parent view
The view should be an own "xaml" file
the dialogresult feature from .NET or at
least a way to get a response what the user clicked in the dialog
PRISM 5.0 came up with quick solution to show modal dialogs. Using PopupWindowAction.
<prism:InteractionRequestTrigger SourceObject="{Binding CustomPopupViewRequest, Mode=OneWay}">
<prism:PopupWindowAction>
<prism:PopupWindowAction.WindowContent>
<views:CustomPopupView />
</prism:PopupWindowAction.WindowContent>
</prism:PopupWindowAction>
</prism:InteractionRequestTrigger>
Interaction requests require a little more up-front work, but they are definitely the right way to go from the MVVM purist perspective...
I saw an example of how to do this with Prism in Karl Shifflett's MVVM In The Box training extension.
As I remember, the example was pretty rough around the edges, but it should set you in the right direction.
The problem with this kind of in-view "Dialog" is it doesn't allow the dialog to go outside the bounds of the parent window. On the plus side, you can do a lot of fancy layout and animation stuff.
check my post from here
its simple, its mvvm, its a service and "all you have to do" in your viewmodel is:
var result = this.uiDialogService.ShowDialog("Dialogwindow title goes here", dialogwindowVM);
Caveat: I have not used PRISM and my answer assumes the use of just WPF and MVVM. I don't see this as a major problem as your list of requirements can be met without PRISM (which can be added on top of the basic solution at a later date anyway).
I have a project on Github which provides a custom FrameworkElement called ModalContentPresenter that allows modal content to be displayed. The element basically consists of two panes, one layered on top of the other. The back pane hosts your main content and the front pane hosts your modal content. The element has a dependency property which controls if the modal content is shown.
The element only provides the basic 'modal' functionality and is capable of hosting arbitrary content (like most WPF controls). If, for example, the modal content you are displaying is to look and behave like a window (have a title, close button, mouse drag etc.) then you will still need to do some work.
Here is how the ModalContentPresenter can address your requirements:
It must be modal (while the dialog is open the rest of the UI should be freezed)
The ModalcontentPresenter can be placed at any level within your visual hierarchy and anything behind the modal content (when displayed) will be inaccessible. The controls will still be enabled and will still react to any changes in the viewModel they are bound to but the user will be unable to navigate and interact with the controls using the mouse and keyboard.
The dialog view can have it's own viewmodel or at least I would like to give an instance of an object to the dialog view and return an object back to the parent view.
This Stackoverflow answer shows how I would recommend you achieve this.
The view should be an own "xaml" file
Both the primary and modal content can be defined using inline xaml or separate xaml files (such as a UserControl).
the dialogresult feature from .NET or at least a way to get a response what the user clicked in the dialog
The linked answer above shows how to get an 'answer' from your modal content. The basic premise is that your viewModels communicate normally (either directly or via other means such as an event bus). The only difference is that you just happen to be displaying your content in a way which means the user can only interact with the 'modal' data.

Is it bad practice to instantiate a Form from a UserControl?

I am building an application using the .NET CF Framework and I had a situation where I wanted to present the user with a custom Dialog Box.
My solution was to create a simple Form with radio buttons for choices and a button. When clicked the button saves the selected radio button value to a public property and closes the Form.
The UserControl, after calling ShowDialog on the Form, inspects the public property to learn what option the user picked.
This worked perfectly. I'm just wondering if this is bad practice and if i'm going to get myself in trouble, somehow by doing this. It seems odd that a UserControl should be creating a Form.
Is there a better way to go about creating a custom Dialog Box from within a UserControl?
Absolutely nothing wrong with that. It is essentially the same as calling MessageBox.Show() from a UserControl.
And yes, accessing the result as a public property is the way to do it.
I'm guessing that this will be a dialog? You should consider using the DialogResult if you have multiple 'exit' options - OK, Cancel, etc.
Short answer: No, it shouldn't give you any problems.
Long answer: As your application grows, doing things like opening a Form directly from a UserControl might give you some spaghetti-like code. If you write an application larger than a few thousands lines of code, your Form and UserControl code behind files should typically be quite empty. They should not contain any business logic, and preferably not any UI logic either. Look at patterns such as Passive View how to achieve this.

Bubbling Events from UserControl using MVVM in WPF..?

First of all, I want to let everyone know that I'm very new to the MVVM concept, and have looked pretty extensively for some explanation of what I want to do, but to no avail.
In the program I'm working on, I have a UserControl with a few buttons on it, which need to control the navigation of the main window. I have 3 different "pages" I want to be able to switch between in my main window. Instead of pages, I decided (for whatever reason, correct me if this is not the best approach) to use a UserControl for each page, and switch the visibility to the correct one. I need the data to persist while switching, so I don't believe that creating new instances of the Usercontrols will work.
My question is: How can I bubble the events from my "NavBarView" to the main window in a way that will allow me to switch the visibility, but in a MVVM way? I know I may be completely going about this the wrong way, and I'm happy to take any suggestions on a better way of achieving this navigation.
I have to use WPF, so WinForms is not an option. Too much transparency and custom controls for WinForms.
I would make the "NavBar" part of the main window if possible and use that to control the sub controls in the forms. I would be careful nesting User Controls. If you can avoid it I would (key indication is are you going to reuse it somewhere else). I took over a project a while back that had a main window with 3 separate highly coupled user controls that had to all work together and it was a nightmare. The only way I could get it to work somewhat safely was to have them all set their data context to the same view model. If I had to do it from scratch - would have taken a completely different approach with a single view.

Categories