What should be done in each MVVM triad?
OK, let's say I am creating a program that will display users' contacts in a ListBox on the left side of the screen. When a user clicks on a contact, a bunch of messages or whatever appears in the main part of the window.
Now my question is, how should MVVM triads look like? I have two models: contact and message. The Contact model contains a list of message models.
Each ViewModel will contain one corresponding model, right?
What about views? I have a "MainView" this is the main window that will have things like menus, toolbars, etc. Am I putting ListBox into MainView? My confusion is what to put in there; for example, what should a ContactView contain? Only one contact case? So DataTemplate, ControlTemplate, context menus, styles, etc. For that single contact, then just have a ListBox of them in the MainView ...?
Thanks.
a source to share
The heart of the MVVM pattern is the Model, which is the structure of your data. So you have a Contact Model and a Messaging Model that are connected and well established. Now you want to create your interface. The user interface contains one window (MainView). Thus, you will need one ViewModel. So what is a ViewModel?
Let's say you only want to display one contact in your MainView, not a collection. Now your MainViewModel can simply refer to your Contact properties that should appear in the view.
Contact c = /*Retrieve a contact from db*/;
ContactName = c.Name; //Create these two properties
ContactPhone = c.Phone; //Assuming only these two properties are required by your view
Now you can bind these properties to your MainView like this
<Textbox Text={Binding ContactName} /> <!-- Assuming the DataContext is assigned -->
<Textbox Text={Binding ContactPhone} />
But we have to display the collection in our MainView. Therefore, we define an individual list as a new view. We also need a list of ContactName and ContactPhone. So we move these two properties into a class and list it. This class is called ViewModel.
(The Messages property needs to be added here as well)
Hence, individual views have their own view model. We will now integrate these views into our MainView.
Now what should the MainViewModel contain?
- ContactViewModels List - ContactList
- Selected ContactViewModel - SelectedContact
- MessageView Command List - SelectedContactMessageList
How are they connected?
- ContactList - tied to a ListView contact list
- SelectedContactMessageList - bound to the ListView's message list
- SelectedContact - bound to the ListView's SelectedItem contact. The customizer should change the SelectedContactMessageList according to a selection like this
SelectedContactMessageList.Clear();
foreach (Message message in SelectedContact.Messages)
{
SelectedContactMessageList.Add(new MessageViewModel(message))
}// converting the resulting models from SelectedContact.Messages to viewmodels
What is it. This is how I understood MVVM.
And about the point
Each ViewModel will contain one corresponding model, right?
No! Instead, each view is mapped to one ViewModel
Create a ViewModel for each view in your application and keep only the properties your view requires in your ViewModel.
a source to share
I think there are no clear definitions with ViewModels yet, but this is how I see it ...
View models should not have "child" view modes, they are not data relationships and hierarchies. The viewmodel is a single view and contains the model / data for that view. In Contrast a View consists of custom controls and each of these controls can have its own Viewmodel, the DataContext remains the same as the parent view.
In other words, the hierarchy is visual, not data driven.
a source to share
Each ViewModel will contain one corresponding model, right?
No, if you see what contains a contact list and an active contact that has a list of messages you are viewing, the model can contain a collection of contact model objects and an active contact view model. The later one can contain a set of message model objects for this contact.
In your opinion, you can bind the list box to MainViewModel.Contacts
and the selected item in the list so that MainViewModel.SelectedContact
. The message list can then be linked to MainViewModel.SelectedContact.Messages
.
a source to share