The parameter provided for 'container' is invalid.

Data-Driven Styling in MDriven Models

This tutorial shows how to use styles within MDriven models to apply data-driven styling without manual CSS. By using style references and expressions, you can dynamically change your application's appearance based on data values.

Introduction to Styles in Model

In MDriven, you can define styles directly in the model to control your application's look. This approach removes the need for external CSS files and allows for a more integrated styling process. Styles can visually communicate data, such as changing colors based on conditions.

Creating ViewModels and Applying Style References

To use styles in your model, create a ViewModel and apply style references to its components:

1. Open your MDriven Designer and create a new ViewModel.
2. Add the necessary attributes and actions to your ViewModel.
3. For each component you want to style, use the StyleRef property to specify the style. For example:
   • Set the StyleRef to "green" for one component and "blue" for another.

Defining Styles and Colors Within the Model

Define styles directly in your model, specifying colors and other properties:

1. Create a new style in your model, such as "green" or "blue".
2. Define the properties for each style, including colors and visual attributes.
3. Example:

var greenStyle = new Style { Name = "green", Fill = "#00FF00" };
var blueStyle = new Style { Name = "blue", Fill = "#0000FF" };

Using Expressions to Dynamically Apply Styles

MDriven allows you to use expressions to apply styles dynamically based on data values. This lets you change styles in response to data changes:

1. Use expressions in the StyleRef property to dynamically select styles. For example:
   • self.attribute1 > 10 ? "green" : "blue"
2. This expression applies the "green" style if attribute1 is greater than 10, otherwise it applies "blue".

Importance of Styling for Data Communication

Styling is crucial for data communication. By using styles to highlight important information, you can guide users' attention and improve application usability. For instance, using colors to indicate status (e.g., red for errors, green for success) can make your application more intuitive.

For more advanced theming options, see MDriven Turnkey theming and Theme as data.

Integrating styles directly into your MDriven model allows for a dynamic styling process that enhances both functionality and appearance.

Source

Based on the MDriven video MDriven | Styling theme and styles without CSS.