You can use optional placing hints in a ViewModel to generate a basic WPF form layout, while keeping the ViewModel focused on available data, valid values, and user interaction.
Use placing hints for generated administrative screens
A declarative ViewModel describes the data that a view exposes, the values a user may enter, and available selections. A ViewModel can also contain placing hints: optional clues that tell a UI renderer how controls relate to one another.
For example, a ViewModel for a game setup can expose a name, a date, and a selected player. Placing hints can indicate that the name belongs in row 1, the date in row 2, and the player selection spans two columns. A WPF renderer can use those hints to create a usable form without requiring you to edit XAML for every field change.
This approach is suited to administrative and data-entry screens where a generated layout is sufficient. Keep dedicated design work for signature screens that need a purpose-built user experience.
For the underlying ViewModel approach, see Training:The declarative ViewModel.
What placing hints do—and do not do
Placing hints are not a complete presentation design. They do not replace styles, templates, or custom controls. They provide layout metadata that a frontend may choose to use.
| ViewModel information | Purpose | Example |
|---|---|---|
| Data made available by the ViewModel | Defines what the view can display or edit. | A Name value and a StartDate value.
|
| Valid values and selection data | Defines permitted input and choices. | A user selects one value from an available list. |
| Placing hints | Suggests the relative position and size of generated controls. | Put Name in row 1; let a selection field span two columns.
|
| External styles and templates | Define how the controls look. | Apply an application style to text boxes, check boxes, and combo boxes. |
A renderer can still use the same look-less WPF controls—such as text blocks, text boxes, check boxes, combo boxes, and images—and apply their visual appearance through external styles or templates.
Add placing hints to a ViewModel
- Open the ViewModel in the ViewModel Editor.
- Select the Use Placing Hints checkbox.
- For each relevant ViewModel column, enter the placement information exposed by the editor, including Presentation, Column, Row, and Span.
- Arrange related fields by giving them compatible row and column values. For example, place a title field in row 1 and place two related fields in row 2 in separate columns.
- Preview and review the ViewModel layout. Adjust the hints when the generated arrangement does not reflect the intended relationship between fields.
Use hints to communicate structure, not pixel-level design. For example, a field that logically belongs beside another field can share its row; a wider field can use a span. Do not use the hints as a substitute for a UI style or a custom interaction design.
Render the ViewModel in WPF
When a ViewModel has placing hints, add a ViewModelWPFUserControl to a WPF form and identify the ViewModel to render. The following example renders the GameSetup ViewModel in grid row 2:
<ecoVM:ViewModelWPFUserControl
Grid.Row="2"
x:Name="VMU1"
EcoSpaceType="{x:Type ecospace:WPFBindingEcoSpace}"
ViewModelName="GameSetup">
</ecoVM:ViewModelWPFUserControl>
The control uses the ViewModel's placing hints to produce the relative layout. External styles still apply to the generated controls, so you can maintain a consistent application appearance without defining each individual field in XAML.
Customize controls when the default layout is not enough
The generated WPF layout does not include a date-time picker by default because that control is in the WPF Toolkit. If your ViewModel needs a component that is not supplied by the default layout engine, implement ViewModelWPFUserControl.OnColumnUIOverride to provide your own component for the relevant column.
For example, use a column UI override when a date-time value must be edited with a date-time picker rather than the default generated control. Keep the data and validity rules in the ViewModel; use the override to change the WPF component that renders that data.
Maintain generated views effectively
Use this sequence when evolving a generated screen:
- Change the ViewModel when the screen needs different data, values, choices, or actions.
- Update placing hints when the relative arrangement of generated fields should change.
- Update external styles when the common appearance of controls should change.
- Add a column UI override only when a particular column needs a specialized WPF component.
- Create a dedicated view when the screen requires an interaction or presentation that generated layout cannot express clearly.
This separation reduces repeated XAML maintenance for routine screens while preserving the option to create custom views where they matter most.
Related ViewModel features
The #Span.Savebar tagged-value feature can also be useful on a ViewModel. Review the relevant ViewModel documentation before using tagged values so that the tag is applied consistently with the view's layout and behavior.
Training:Bootcamp:Chapter 5 continues with ViewModel actions and ViewModel-placed buttons. For an example of using ViewModels to iterate on an application workflow, see Training:Prototyping.