WPF A list of non-homogeneous views - c#

I have a WPF application that I want to present a list of non-homogeneous VIEWS. I want to have a button that I can write a handler for that would display a view. Then since it is a view the user could interact with it (enter values in a TextBox for example) using an underlying view model (MVVM). So let me explain further. The flow that I am looking to achieve is that a user selects which view to display. The view is displayed in a list. Then the user interacts with this instance of the view. When the user clicks on the button again a possibly different view is displayed and the user can now interact with two views. This continues as long as the 'add' button is clicked adding to the views in the list. This is further complicated because first, each of these views first are different. The particular view that should be displayed is dependent on a parameter that is passed to the command. Second it is complicated because each of these views also have dependencies that are passed in via IoC and on down to the associated view model. In other words there is not a parameterless constructor for the view models. So I cannot define a view model/view relationship like:
<Window.Resources>
<DataTemplate DataType="{x:Type views:SelectCustomerViewModel}"\>
<views:SelectCustomerView/>
</DataTemplate>
</Window.Resources>
I have searched and I see that one solution that comes close using the ItemTemplateSelector as outlined here. But as far as I can tell this only is a solution for a non-homogeneous display. If I revert to a list of views then it seems like I am breaking the MVVM model, as I would have to construct an appropriate view and assign the appropriate view model. How should I display/bring up a dynamic list of different views using the IoC from App.Xaml.cs?

An ItemTemplateSelector is a perfectly valid way of showing a different view (or portion of a view) for (possibly disparate) items that are shown in a list. Under the hood this is an implementation of a strategy pattern, where the view is chosen based on the data item.
However it seems that a tab view would also fit your criteria - as the command is triggered you instantiate a new tab for the required view. This view can be bound to the same viewmodel, so you could have changes from one tab being echoed on another tab. IIRC there are some tab view implementations that include something similar to a ItemTemplateSelector (because a tab view is a variation on a list control).
As for the IoC - don't be concerned about complexities there. Most IoC implementations will allow you to specify constructor parameter values or expressions as part of registering types.

Related

WPF create a button for each view, which will set it as the content of a ContentControl

I have a WPF, MVVM program whose MainWindow is separated into a ListBox sidebar and a main part with a ContentControl. I want to create a functionality that will populate the ListBox with a button for each view that I have in my project and set its command such that clicking it will set the content of the ContentControl to the associated view automatically, i.e. so that I don't have to manually enter code when adding a new view. Something like iterate through all view files or something like that.
EDIT:
Perhaps I'm AGAIN not clear enough.
What I have and can do - type like a monkey "new Button, yadda yadda" every time I add a new view to my project.
What I want - write a piece of black magic that goes something like "There are 6 views in this project, I'll just make 6 buttons each such that, when clicked, will navigate to the appropriate view, without the guy who wrote me having to write any additional line of code any time a new view is added".
How can I achieve that and is it such a good idea, to begin with?
For instructional purposes, I'll be calling your "view" class View.
Create some sort of collection object (List<View>, ObservableCollection<View>, etc.) to store all of the Views.
Assign this collection to a dependency property. I'll call it Views.
Declare a dependency property for the selected/active view. I'll call it SelectedView.
Bind ListBox.ItemsSource to Views.
Bind ListBox.SelectedItem to View.
Bind ContentControl.Content to View as well.
With the above setup, the ContentControl will display whatever View is selected in the ListBox.

Page Specific Navigation in WPF MVVM

How do I implement page specific navigation in WPF using MVVM? For example, if I have a "Settings" page and an "Accounts" page, each page has their own unique page specific navigation, but each navigation items are located in the same container in the app. The navigation container is docked to the left hand side of the app window, and will never change, the navigation items however change depending on the page the user is on. I have two approaches:
Create a navigation view and view model for each different navigation for each page
Create one navigation view and view model and dynamically add the necessary buttons accordingly based on whatever page the user is on
The second options seems better in my opinion, as it is more dynamic and only uses one view/view model, however I am not sure how to implement this. I can easily code up a view and view model for one navigation container, but making it dynamic is a little trickier. Any ideas?
Thanks!
I think you want to use DataTemplate and ContentControl, see Jeremy Alles Blog for a good example
So to answer your question, I would create a view and view model for each.
Use NavigationService and create the appropriate views and viewmodels.

Dynamically Adding Different Views Using MVP

First off let me say this is my first attempt into trying MVP. I am going for the Passive View approach as I want to completely decouple the Views from the Model.
I have read up on MVP by reading the following articles among others
Derek Greer
http://aspiringcraftsman.com/2007/08/25/interactive-application-architecture/
Todd Snyder
http://blogs.infragistics.com/blogs/todd_snyder/archive/2007/10/17/mvc-or-mvp-pattern-whats-the-difference.aspx
My application is going to have 4 Views that are custom controls in which each implement a different interface to interact with the Presenter. Now this is not a problem for 3 of the views as the controls are static and never change.
My problem comes along where on the 4th View I need to change the control/View that is displayed based on events triggered from View 1.
So for example lets say View 1 is a list of people who can be from either an employee or a customer. Now depending on who is selected you can modify different parameters depending on the type of person selected. The problem is that View 4 needs to dynamically change the editing control based on what is selected. Keep in mind not only the properties will be different but how they are edited as well. Also each editing control is going to fire different events for property changes.
So how does my Presenter know how to manage interaction with the Model, when depending on whether an employee or customer is selected there is a different editor that implements a different View interface?
I hope that was clear. Any help is greatly appreciated. I have searched all over and all examples show a concrete relationship between the View and Presenter whereas mine needs to be extremely flexible.
My goal here is to keep the editing controls on the 4th View so flexible that I could for example add editing controls/Views for aliens or dogs or whatever else I might add to View1 to be selected.
Thanks
You can create a top-level presenter that listens for selection events and changes the editing control by instantiating different MVP triads based on what is selected. Typically in MVP your presenters manage all the construction/dependencies.
I personally don't like having a 'Master Presenter' per se. I do build composite presenters: e.g. View can contain one of several views, so I build a Presenter for the master view, which sends commands (messages, events, whatever) to a specific child presenter (I don't expose any View outside it's owning Presenter).
Don't over-complicate things ...use a different View for each responsibility. Views are cheap.

Using Commands declared in "Parent" ViewModel (MVVM)

(Note: I chose to not use the Navigation Framework)
I have a WizardViewModel which is linked to WizardView.
The WizardViewModel declares and instantiates a command "Next".
It also contains a Property "ActiveSpell" of Type SpellViewModel.
The SpellViewModel contains several PageViewModels, each having a View counterpart.
The ActivePage Property (on SpellViewModel) tells the ui which view to take.
Now I have the following problem:
When I click a button to switch to the next page,
I need access to the "Next" command defined in the WizardViewModel,
but I only have access to a PageViewModel there.
I could just add a Parent property to each child ViewModel,
but I'm not sure if that is a good idea.
Or maybe there is another nicer/common way to do that.
You can use Event Aggregator, to adjust the interaction between ViewModels.
You don't need Parent property. Your view model structure is good, just look at the picture, to understand how you should bind your view model onto the view:
Next command should be implemented something like that:
public void NextExecute()
{
ActualSpell.MoveToNextPage();
}
UPDATE:
According to your comment, Arokh, I've updated the post.
I think, in this case you should implement ActivateCreatePersonSpell command in WizardViewModel.This command should:
save actual spell state
open CreatePerson spell
once person is created set saved spell with result of creation person
The last what you need to do is to bind ActivateCreatePersonSpell command to button on the page. I propose to use ViewModelLocator for these purposes.Look at this post for example.
I had to implement a wizard once and I liked and mimicked the way Josh Smith and Karl Shifflett set up their WizardViewModel and wizard page view models in this example project (source code available with the article):
http://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx
They kept the Next command as part of their WizardViewModel, but created a WizardPageViewModelBase that all of the wizard pages derive from. That allowed the WizardViewModel to control which page is the current page, and it allowed the WizardViewModel to query the current page view model to see if the Next command can execute, thus enabling or disabling the Next button on the wizard. (That is, the wizard view model knew about the page view models, but the page view models didn't need to know anything about the "parent" wizard view model.)
As for adding links to parent view models, it's an approach that works, and I've done it before when I started working with MVVM, but after time I found the approach to result in some difficult to maintain code as every view model becomes interdependent.

Where to Create / Get / Cache the ViewModels?

First off, I'm new to MVVM, so please help me out on this :)
Suppose I have multiple views in my app. In my case, I have an editor view, and a browser view.
Both of them have to work with a viewmodel of a "node" I'm editing.
So where does the viewmodel actually get created ?
Suppose the Editor is told to edit a certain node - It could create a new "NodeViewModel" and work with that. But at the same time, there's a NodeBrowserView, which allows people to shortcut-select a different node.
Basicly - I need the EditorView to work with the same ViewModel as the BrowserView, so I need a generic "GetViewModelfor(X)" method.
So how is this supposed to work ? :)
Cheers :)
Both your editor view and browser view should operate on some kind of NodeViewModel. You shouldn't need separate view models just for the different view scenario.
Now, can you edit not-yet-shown-to-user node? If no (as in, user decides what is edited), view models should be created at the very first time their content needs to be presented to user. In most cases this would in some browser/details views, so that user can select element and then chose to edit it.
Edit:
Regarding your comment. NodeViewModel should be provided for editor view.
The providing part can be done for example via constructor injection or by setting view's data context manually. For example, when user browses all nodes in the browser view, he can double click on the list item and editor view will pop-up:
// this will probably be done in response to event
private void ListItemDoubleClick(object sender, EventArgs e)
{
NodeViewModel currentItem = // extract current list item
EditorView editorView = new EditorView(currentItem);
editorView.Show();
}
Alternatively, if you want to avoid this kind of strong coupling between CompositeView and EditorView you can always use events, however it's not always necessary.
One more thing I was thinking of in terms of design would be adding extra view model, call it NodesListViewModel. How the program flow might look like:
At application startup, get your nodes (be it from DB, file, service, anything)
Create instance of NodeListViewModel which takes dependency on IList<Node> (list of node entities)
NodeListViewModel will build and expose collection of NodeViewModel elements
Create instance of your main program window, which uses composite view. It needs NodeListViewModel as its data context.
Whenever user decides he needs to edit item, it's all ready. Browser has a list of all NodeViewModels, it can easily pick up current and pass it to dedicated view.
In cases like this I prefer to use a single main view model and have a "current item" that the view connects to instead. This is a lot easier to do instead of passing / creating new view models around each time a user clicks a different node / grid row / etc. I really see no need to a separate view model either when the same operations can be achieved in the overall view model. It reduces complexity and reduces the change of creating objects (view models) and leaving them hanging around because a reference to them was not released until the application is closed.

Categories

Resources