You can build rich Windows desktop user interfaces with MDriven Turnkey's WPF client by binding a WPF control, such as a Gantt chart, to data exposed by a ViewModel; this page is for developers who want to add or adapt that kind of WPF view.

Use WPF controls with Turnkey

MDriven Turnkey can use WPF for desktop applications. A custom WPF control can bind to the collections and properties that your ViewModel exposes. The control's binding requirements determine the names and types of data that the ViewModel must provide.

For example, a Gantt control can bind to a collection named TreeNodes. Each item in that collection represents a row in the Gantt tree and can expose child rows and scheduled time items. When you use the expected names in the ViewModel, ordinary WPF data binding connects the control to the model-driven data.

The WPF Mahap and Gantt walkthrough demonstrates this approach: a tree row and its time items are rendered from ViewModel data, and changes made through the application are reflected in the Gantt view.

Prepare the ViewModel data

Create the model classes and associations that represent the rows and scheduled items, then expose them through a ViewModel. See Documentation:Creating CustomControl that Shows Data in a Gantt Chart for the complete Gantt-control data contract and implementation guidance.

A Gantt wrapper described in that guidance expects the following structure:

ViewModel data	Required content	Example
TreeNodes	A list column containing the root rows.	A collection of projects or work items.
Each tree node	Column1 and Column2 for the tree grid.	Column1 = "Project A"; Column2 = "In progress".
Each tree node	An association named TimeItems.	The tasks scheduled for Project A.
Each time item	Start and Stop as DateTime values, Text as a string, and Color as an integer.	Start = 2026-07-21; Stop = 2026-07-29; Text = "Implementation".
Each tree node, when hierarchy is needed	An association named TreeNodes for child rows. Child rows use the same row and time-item structure.	A project row containing phase rows.

The property and association names are part of the control contract. For example, naming the root collection Rows instead of TreeNodes does not satisfy a wrapper that binds to TreeNodes.

Build a Gantt-backed WPF view

1. Define a class for a tree row and a class for a time item in your model.
2. Add the row display values Column1 and Column2 to the tree-row class.
3. Add Start, Stop, Text, and Color to the time-item class.
4. Add the TimeItems association from a tree row to its time items.
5. If rows can contain rows, add the self-association TreeNodes for child tree rows.
6. In the ViewModel, expose the root row collection as TreeNodes and navigate each row's child rows and time items through the matching names.
7. Bind the WPF Gantt wrapper's tree and timeline templates to those properties.
8. Run the WPF client and create or edit time items to verify that their dates and text appear in the expected row.

For a concrete result, create a root row named "Project A", a child row named "Build", and a time item with text "Implementation". Give the item a start and stop DateTime. The tree should show the project and child row, while the timeline should show the implementation interval on the Build row.

Support editing and moving items

The Gantt control described in Documentation:Creating CustomControl that Shows Data in a Gantt Chart supports selecting items, editing tree text, resizing time items, switching rows, and moving items between rows. To allow a time item to move to another row, add the following to the time-item class:

• An Action column named MoveToNewRow.
• A ViewModel variable named vNewRow, typed as the class that represents the destination tree row.

Implement the action's execute expression so that the selected destination row receives the time item:

vNewRow.SomeTimeItem.add(self)

Replace SomeTimeItem with the association end that holds the row's time items. For example, when a user moves "Implementation" from Build to Test, vNewRow identifies Test and the action adds the selected time item to Test's time-item collection.

Verify two-way updates

Test both directions of the integration:

1. Change a time item's text, start time, or stop time in the application UI.
2. Confirm that the corresponding Gantt bar and row text update.
3. Drag or resize an item in the Gantt control when that behavior is configured.
4. Confirm that the underlying item has the changed row or time values.
5. Delete a child row or time item and confirm that it disappears from the tree and timeline.

The walkthrough shows this behavior with a time item whose dates are edited in the application and then displayed in the Gantt chart, as well as an item dragged in the chart and updated in the application.

Styling and custom controls

The Gantt example uses a separate assembly containing the Gantt-chart control and its XAML templates. This keeps the control implementation separate from the model and ViewModel data. The WPF approach also lets you apply your own XAML styling to the application and its controls.

Use a custom control when the standard generated UI does not provide the visualization or interaction you need. Keep the model responsible for business data and relationships, and keep the ViewModel responsible for exposing the data shape that the WPF control binds to.

Mahapp

The original page refers to a "Mahapp library." The supplied material does not define its exact name, installation method, or role in the WPF client. Confirm the library details before adding setup instructions or dependencies to this page.

See also

• Documentation:Windows WPF client
• Documentation:ViewModel Editor
• Documentation:Creating CustomControl that Shows Data in a Gantt Chart
• Documentation:OCLOperators regExpSplit