You can use this hub to choose the right MDriven UI and styling approach for your Turnkey web application or WPF desktop application.

MDriven styling has two distinct purposes:

• Theming controls the shared visual language of an application, such as fonts, colours, backgrounds, spacing, and component sizing.
• Data-driven styling communicates the meaning of data in a specific screen. For example, a balance below zero can be shown with a red style while a non-negative balance has no special style.

Start with the platform you are building for, then use the task guides below.

Choose a styling approach

If you want to...	Use	Example
Change the common look of a Turnkey application	MDriven Turnkey theming and Styling and Theming Your Application	Set shared values for font, colour, row height, or navigation-bar height so that every screen uses the same theme.
Apply a visual treatment based on a value or rule	Styles in the model with a OCL expression on a ViewModel column	Return a red style when self.SumIntegerYear < 0.
Change the presentation or layout of a Turnkey component	Turnkey Styling	Put a modifier class in a ViewModel Editor column's Style ref field, or use the Switch TaggedValue to present a Boolean as a switch.
Format, position, enable, or hide a button dynamically	Formatting and Styling Buttons	Use hidden formatting columns such as Save_Label and Save_ReadOnly to supply button properties.
Add or override web CSS for a Bootstrap, Angular, or MVC application	Styling and CSS for Bootstrap, Angular and MVC	Apply application-specific CSS where the standard theme variables or component modifiers do not meet the requirement.
Style a WPF application or a particular ViewModel control	Styling WPF Applications and ViewModels	Create a XAML ResourceDictionary and define styles such as Style1.TextBox for a column whose StyleRef is Style1.

Style a Turnkey web application

MDriven Turnkey uses a style system based on BEM: Block, Element, Modifier. This convention structures CSS rules around a component, its parts, and variations of that component. Turnkey uses CSS Grid for application layout unless you use placing containers; with placing containers, CSS flexbox is the core layout mechanism.

Turnkey supplies standard presentations for controls including static text, images, text fields, checkboxes, selects, date pickers, data tables, buttons, file uploads, links, textareas, number fields, and float fields. Use the documented component modifiers before adding custom CSS.

Apply a component modifier

Use a modifier when one ViewModel column needs a different presentation without changing the application-wide theme.

1. Open the ViewModel in MDriven Designer.
2. Select the ViewModel column that should receive the presentation.
3. Enter the required modifier class in the column's Style ref field.
4. Run the ViewModel and verify the component presentation.

For example, you can use the documented typography modifiers to make a static-text value display as a heading, or use contextual colours to distinguish status text. The available modifiers and their exact class names are documented in Turnkey Styling.

Present a Boolean as a switch

A Boolean attribute is presented as a checkbox by default. To present that attribute as a switch instead:

1. Select the Boolean ViewModel column.
2. Add the TaggedValue Switch to the ViewModel column.
3. Run the ViewModel and confirm that the Boolean is displayed as a switch.

Build a consistent theme

For shared visual changes, use the predefined CSS custom properties in the MDriven Turnkey style system. These values can be maintained in the model, allowing the theme to be applied throughout the application rather than repeated screen by screen.

For example, reducing a row-height value makes a dense data-oriented UI; changing a font or colour value changes the corresponding shared presentation across the application. Review MDriven Turnkey theming for the theme mechanism and MDrivenDesignerStylingVariables for the styling-variable metadata used by MDriven Designer.

Do not use theme settings to express record-specific meaning. A theme affects the application broadly; a negative balance or warning state belongs in a data-driven style rule.

Apply styles from data

A data-driven style is a style selected by an expression on a ViewModel column. Define the styles in the model and return the applicable style from the column's styling expression.

For example, if ThingsAreSuperGreat is true, the following expression selects a green style; otherwise it selects a red style:

self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)

Use selfVM.Styles to reference styles maintained in the model. This is preferable to typing a style name as a string because renaming the model style does not leave an unmaintained string reference in the expression.

A common conditional-formatting example is a negative number:

self.SumIntegerYear < 0->casetruefalse(selfVM.Styles.RedStyle,'')

In this example, a value below zero receives RedStyle; a zero or positive value receives no additional style. Create and maintain the style itself in the model, then use its model reference in the expression. For the full workflow and theming comparison, see Styling and Theming Your Application.

String formats, such as date/time, timespan, and decimal-place formatting, are controlled with TaggedValues rather than style expressions. Keep formatting requirements separate from a rule that selects colours or other visual styles.

Format buttons dynamically

Buttons execute expressions in UI ViewModels and ServerSide ViewModels. You can control a button's label, name, visibility, style, and enabled state with dedicated formatting columns.

1. Create a generic column whose name is <Button name>_<Keyword>.
2. Set that column's Not Visible property so it acts as a formatting column rather than appearing in the UI.
3. Set the column expression or value for the relevant keyword.
4. Give buttons unique properties when more than one button would otherwise have the same name and styling.

For example, a button named Approve can be controlled with hidden columns named Approve_Label, Approve_Visible, and Approve_ReadOnly. Set Approve_ReadOnly to true when the button must be disabled.

The supported keywords and the rendering limitation for buttons with identical name and styling are documented in Formatting and Styling Buttons.

Style WPF applications

For WPF, define styles in XAML ResourceDictionaries. Place your dictionaries in the ECO Config folder so they are available from the style menu; when you select a style in WECPOF runtime, the corresponding dictionary is loaded and merged with the application.

You can define application-level resources such as window background brushes, window-header styles, menu styles, and menu-item styles. You can also target a single ViewModel column:

1. Set the column's StyleRef to a style name, for example Style1.
2. Define XAML styles with the naming convention STYLENAME.COMPONENTTYPE.
3. Define separate component styles when the column generates more than one control.

For example, a column with StyleRef Style1 can use Style1.TextBlock for its display text and Style1.TextBox for its editor. This lets you style a grid column header, cells, and editing controls at the required level of detail. See Styling WPF Applications and ViewModels for the resource keys and XAML examples.

When to use custom CSS

Use documented Turnkey variables and modifier classes first. Use custom CSS when you need a web-specific rule that those mechanisms do not provide. The implementation path differs between Bootstrap, Angular, and MVC applications; follow Styling and CSS for Bootstrap, Angular and MVC for that platform-specific guidance.

MDriven Stylesheet describes the stylesheet-related documentation and is a useful starting point when you need to understand the generated or supplied styles.

Verify your styling

Before treating a UI change as complete, verify these points:

• A theme change applies consistently across the screens that should share it.
• A data-driven expression returns the intended style for both sides of the condition. For example, test negative, zero, and positive values.
• Formatting columns are marked Not Visible so they do not appear as user-facing fields.
• Buttons that must all render do not share the same name and styling properties.
• A WPF StyleRef has matching XAML resource keys for each control type you intend to style.

See also

• Documentation:Turnkey Styling
• Documentation:MDriven Turnkey theming
• HowTos:Styling and Theming Your Application
• Documentation:Formatting and Styling Buttons
• Documentation:Styling WPF Applications and ViewModels

Accessibility review for styling changes

Use this review when changing Turnkey styling, CSS, themes, or custom HTML. The supplied UI and styling documentation describes styling and layout mechanisms, but does not document MDriven-specific WCAG conformance, ARIA output, keyboard behavior, or assistive-technology support. Verify those behaviors in the rendered application before release.

Review styled controls

MDriven Turnkey provides standard UI elements including text fields, checkboxes, selects, date pickers, data tables, buttons, file uploads, links, textareas, number fields, and float fields. When changing their presentation, test the resulting rendered control rather than relying only on its visual appearance.

Use the ViewModel column Style ref field for documented component styling. In the Bootstrap, Angular, and MVC styling documentation, a value in Style ref is added as a class on the control tag; for a specific control or group of controls, its content is added to an ng-class tag. Add the corresponding CSS rule and review the rendered HTML after the change.

When custom HTML is used, review the rendered markup and interaction behavior. Confirm that an interactive-looking custom component can be identified and operated by the intended users, including keyboard users, and that any state or validation information remains available.

Test keyboard interaction

Test each changed ViewModel without a mouse. Include the control types present on the page and any custom components or templates.

1. Move through interactive controls using the keyboard.
2. Operate each available action.
3. Check the result of each action, including changed values and validation feedback.
4. Repeat the test after adding a Style ref value, modifier class, or custom CSS.

A Boolean ViewModel column can be presented as a switch by setting the Switch TaggedValue. If this presentation is used, test the rendered switch with the keyboard as well as with a pointer.

Do not make meaning depend only on styling

The styling documentation supports data-driven row, column, and cell styling through Style, CssClass, <Column name>_Style, and <Column name>_CssClass ViewModel attributes. When these mechanisms distinguish warnings, values, or statuses, retain information in the displayed text or value so that the meaning can be checked independently of the applied CSS.

For example, a value styled with a warning or information class should still display text or a value that explains its status.

Review validation presentation

The documented Turnkey layout includes #validationMessageWrapper and #validationMessages for validation messages. If CSS changes these areas, verify that validation feedback remains available in the rendered UI and that a user can identify the affected field and the required correction.

Do not assume that changing the visual styling of a field or validation message preserves its behavior for assistive technologies; this behavior is not documented in the supplied passages.

Check custom HTML and assistive technology

For representative ViewModels, test the rendered page with the browser and assistive technology used by the application audience. Include data entry, validation errors, tables, navigation, and actions where applicable.

Verify the rendered output for the accessibility requirements adopted by the application, including accessible names, keyboard operation, focus behavior, state changes, and error feedback. Document the test environment and any template-specific implementation decisions.

See also

• Turnkey Styling
• Layout and CSS
• Styling and CSS for Bootstrap, Angular and MVC