View source for Training:Taking It Further Still

If the cost of creating and maintaining a ViewModel were high, fewer ViewModels would be created. Our mission is to reduce the cost of creating and maintaining them.

WPF is a declarative way to describe the UI. This means that the same basic look-less components like TextBlock, TextBox, CheckBox, Combobox, and Image, etc will be used again and again and they will be given a look by an external style or template.

What if we use this fact to provide some basic rendering/placing hints for the ViewModel columns? We could then use those clues to spill out the correct look-less control in the intended relative position; we would not need to mess about with XAML every 5 minutes. This is what the ViewModel-Editor looks like without rendering hints:

[[File:View Model Further still.png|frameless|448x448px|link=https://wiki.mdriven.net/index.php/File:View_Model_Further_still.png]]

And this is the way it looks like when I have checked the “Use Placing Hints” checkbox:

[[File:VM UI.png|frameless|453x453px|link=https://wiki.mdriven.net/index.php/File:VM_UI.png]]

Given the extra fields for “Presentation”, “Column”, ”Row”, ”Span” etc, I can work the ViewModel – review to look like this:

[[File:MV UI 2.png|frameless|450x450px|link=https://wiki.mdriven.net/index.php/File:MV_UI_2.png]]

Now, I really need to stress this so that I do not get misunderstood: We are not designing the presentation here at all. We are describing what data is available, which values are valid, possible selection lists of data, and, if the UI designer wishes to take notice of it, *''hints''* as to how to arrange the controls in relation to each other - which happens to give the option of generating the user-interface automatically by whatever front end is currently in fashion. This is all the natural information we have in mind while designing the ViewModel.

Having a ViewModel with placing hints, you can add a ViewModelWPFUserControl to your form with just one row:
 <ecoVM:ViewModelWPFUserControl Grid.Row=”2″ x:Name=”VMU1″  EcoSpaceType=”{x:Type ecospace:WPFBindingEcoSpace}”    ViewModelName=”GameSetup” >
And the result is:

[[File:VM UI The game.png|frameless|392x392px|link=https://wiki.mdriven.net/index.php/File:VM_UI_The_game.png]]

Remember that these auto layout controls also adhere to external set styles.

Having the ability to get simple UI automatically derived from the ViewModel, placing hints lowers the effort to produce and maintain. Experience has shown that a lot of the administrative parts of your application are left automated so that more time can be spent on the signature screens that are most important for your users.

'''Note:''' the <code>#Span.Savebar</code> is a tagged value feature that can be helpful on your ViewModel.
====See also:====
*[[Seeker view]]
*[[UIOverride]]
*[[Development info in runtime]]
*[[Edit in Grid]]
*[[ViewModel access and security]]
*[[Custom controls in ViewModel aided Views|Custom controls in ViewModel-aided Views]]
[[Category:View Model]]
[[Category:Beginner]]
[[Category:The MDriven Book]]