Documentation:StylesInModel

StylesInModel

This page was created by Hans.karlsen on 2020-03-23. Last edited by Wikiadmin on 2026-07-29.

StylesInModel lets you define named UI styles in your model and apply them from a ViewModel so that the UI can communicate information from data; it is for modelers who need consistent, reusable styling in MDriven applications.

What StylesInModel does

A style is a named set of visual properties maintained in the model. You can reference that name from a ViewModel styling expression rather than repeating visual decisions throughout the UI.

Use StylesInModel when a visual treatment represents application meaning. For example, a status label can use a green style when an item is in a good state and a red style when it needs attention.

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

In this example, the expression selects one of two model-defined styles according to ThingsAreSuperGreat. The result is a style object, not a text value.

Choose the right styling mechanism

Need	Use	Example
Apply a named style to a ViewModel element, optionally based on data	StylesInModel and a Style Expression	A warning value selects `selfVM.Styles.TheRedStyle`.
Change the overall MDriven Turnkey appearance, such as colors, fonts, or sizes	Styling and Theming Your Application	Set the CSS variables used by the Turnkey StyleSystem.
Store Turnkey CSS and switch theme sets while the application runs	Theme as data	A selected theme supplies CSS through `SysSingleton.oclsingleton.PickedThemeData`.
Style a specific grid/table column from another column's value	Table Grid Column Style	Add `Attribute1_Style` beside `Attribute1` to convey the style name.
Define WPF control styles in XAML	Styling WPF Applications and ViewModels	Define the relevant WPF styles in a ResourceDictionary.

These mechanisms can work together. For example, a Turnkey theme establishes the application-wide colors, while a StylesInModel expression makes one status field red.

Define and use a named style

Create the style in the StylesInModel style editor, give it a stable descriptive name, and reference that name in the ViewModel. The Styles operator exposes the styles available to the current ViewModel through selfVM.Styles.

Create a named style in StylesInModel. For example, name a style Search or TheRedStyle.
Open the ViewModel Editor.
Select the Row, Column, Control, or placing container that should receive the style.
Set its Style Expression to the required style reference.
Save the model and run the application to verify the resulting appearance.

For a style named Search, use:

selfVM.Styles.Search

selfVM is the current ViewModel instance. Styles accesses the styles defined in StylesInModel, and Search is the named style to apply.

Use conditions to select a style

A Style Expression can choose between styles based on model data. Keep the condition focused on the business state and keep the visual definition in the named styles.

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

This keeps the ViewModel declarative: the data decides which style applies, and StylesInModel defines what each style looks like.

Use fonts in model-defined styles

StylesInModel can use TrueType fonts that you add to AssetsTk/Fonts. See Fonts for the required font-file location and preparation steps.

For example, place a downloaded .ttf file in AssetsTk/Fonts, then select that font when defining the relevant model style.

Apply StylesInModel in a WPF application

For a WPF application, generate a WPF ResourceDictionary from StylesInModel and merge it into the WECPOF resources. Do this when the WECPOF application object is available and before the affected UI is displayed.

var stylesinmodelRD = StylesInModelWPF.GenerateResourceDictionaryFromStylesInModel(
    ViewModelDefinitionsInApplication.GetActionsRuntime(_es.GetType()),
    wecpof);

if (stylesinmodelRD != null)
{
    wecpof.Resources.MergedDictionaries.Add(stylesinmodelRD);
}

The generated dictionary is added only when generation returns a dictionary. Merging it into wecpof.Resources.MergedDictionaries makes its resources available to the WPF application.

StylesInModel integration does not replace normal WPF styling. For WPF ResourceDictionary conventions, including styles for ViewModel columns and component-specific style names, see Styling WPF Applications and ViewModels.

Related rendering scenarios

If a ViewModel column contains HTML that the browser must render, configure that scenario as described in Render data as html. That page also shows how HTML output can include a style class. Do not use rendered HTML as a substitute for a Style Expression when the requirement is to select a model-defined style from data.

Contents