Introducing UI-based Rules Manager in WinForms

Conditional formatting lets users alter the appearance of individual data cells based on specific conditions. It helps highlight important information, identifies trends, and makes data interpretation easier. Easy creation and management of conditional formats are critical to the user experience of any application.

To help design and implement conditional formats, the latest release of ComponentOne introduces a new control, C1RulesManager. C1RulesManager is a UI-based component that allows users to design and apply conditional formats to any data-aware controls such as FlexPivot, FlexGrid, or DataGridView. The control has an intuitive API that enables developers to add and manage the collection of formatting rules at design time and run-time.

An Introduction to C1RulesManager

The new UI control is Excel-inspired. It provides conditional formatting of individual data cells. The control offers several built-in indicators that help highlight information, identify existing trends, and compare data. The Rules Manager, like Excel, supports data bars, solid and gradient scale colors, and many other icons and indicators.

Using the new control, conditional formats such as cell background color, border line style, and font color can be applied to cells whose values meet certain conditions. Conditional formatting rules specify the conditions.

The control lets users choose any of the built-in, most common conditions. It also offers users the option to create custom conditions.

The rule manager supports building custom expressions at run time with an expression editor. The expression editor is a textbox like component but offers smart code completion, syntax, and error highlighting. It does this by providing standard constants, predefined operators, and functions.

Creating and managing conditional format rules is easy with the UI based rules manager. The C1RulesManager stores all conditional formatting rules specified in the 'RuleCollection' collection. Rules in the collection are accessible via the C1RulesManager.Rules property.

Formatting rules are listed in order of precedence. A new formatting rule is automatically added to the bottom of the list and has the lowest precedence. Change the precedence of a desired formatting rule in the list using the Up and Down buttons at run time.

Additionally, users can manage existing formatting rules. Remove any rule(s) at run time by clicking the Delete rule button. Temporarily hide the conditional format styles by unchecking its corresponding checkbox. Re-check the checkbox and reimplement the rule.

All of these functions are available in the C1RulesManager control. The following use case incorporates them.

C1RulesManager Use-Case: World Economic Outlook [Top 10 Countries]

The World Economy Outlook (WEO) is a survey conducted by the International Monetary Fund (IMF) staff. The results present IMF staff economists' analyses of global economic developments during a specific term. This report is the main instrument for disseminating the findings and research of their international surveillance activities.

An organization like the World Bank conducts world-wide surveys on various global indicators and has accumulated a repository of data. The organization wants to showcase this data to their audiences so that the viewers can easily digest. To make the information easily interpretable, the organization might highlight the essential sections and apply conditional formats.

Such a scenario is easy to achieve through the new C1RulesManager control. To learn how to replicate this scenario,the following portion of the article discusses how to implement using C1RulesManager with C1FlexGrid.

The complete implementation is divided into the following sections

1. Collect data and bind the grid
2. Integrate RulesManager with the grid
3. Create conditional formats in RulesManager
4. Apply conditional formats

How to Collect Data and Bind to FlexGrid

Use C1RulesManager to highlight data conditionally. Display data for 'World Economy Outlook' from the IMF. To limit the data, consider only the countries whose gross domestic product (GDP)(nominal) is among the top-10 in the world for 2019.

Reflect this data in a grid using a blueprint of the data then bind a grid to that data. Create the following class:

public class Country  
{  
        public string CountryCode { get; set; } 
        public string CountryName { get; set; } 
        public double ConstantGDP { get; set; } 
        public double CurrentGDP { get; set; } 
        public double GDPPerCapita { get; set; } 
        public double AverageInflation { get; set; } 
        public double Unemployment { get; set; } 
        public double GovNetLending { get; set; }  
        public double CurrentAccountBalance { get; set; }  
}

After creating the blueprint of the data, bind the grid using its DataSource property.

var database = DataLoader.Import(); 
c1FlexGrid1.DataSource = database; 

How to Integrate C1RulesManager with FlexGrid

C1RulesManager is available as an individual component. Drop it from VS Toolbox onto forms (or add it from NuGet) and attach it to any data-intensive control.

Integrating it with any data-aware control is a one-step process. To integrate C1RulesManager with FlexGrid, invoke the C1RulesManager.SetC1RulesManager method.

c1RulesManager1.SetC1RulesManager(c1FlexGrid1, c1RulesManager1);

Create Conditional Formats in RulesManager

In C1RulesManager, add formatting rules based on conditions. Define the rule in RulesManager using the Name, Expression, and Style properties of the Rule class.

• Name specifies the name with which the user wishes to identify the rule
• Expression specifies the condition that determines whether the cell range will be formatted according to the rule
• Style defines the item style that will be used for conditionally formatting the cells

There are multiple types of conditional formatting styles supported by RulesManager.

Supported Formatting Styles: Solid-colored Cell Background

In this style type, a solid color fills the cell background. The cell color is determined by the cell value's position relative to the specified minimum and maximum values in the grid column and cell range.

Show solid-color cell backgrounds by setting GradientSettings.BackgroundPoints.

var inflationRule = new C1.Win.RulesManager.Rule()  
{  
        Name = 'Inflation Analysis',  
        Expression = '= [AverageInflation] >= 0', 
        Style = new ItemStyle()  
        {  
                ForeColor = Color.White,  
                Gradient = new GradientSettings()  
                {  
                        BackgroundPoints = new GradientPoint[]  
                        {  
                                  new GradientPoint(GradientPointType.MinValue){ Color = Color.Green, Value=0}, 
                                  new GradientPoint(GradientPointType.Percent){ Color = Color.Yellow, Value=50f},
                                new GradientPoint(GradientPointType.MaxValue){ Color = Color.Red,}  
                        },  
                BorderColor = Color.Black  
                }  
        }  
};  
inflationRule.AppliesTo.Add(new FieldRange(new string[] { 'AverageInflation' }));   

Supported Formatting Styles: Icons and Indicators

Apply cell formats as icons or indicators.

Define the GradientSettings.IconPoints property to show an icon in a cell. There are multiple icons available in C1RulesManager. To determine which icon to deliver, set the GradientSettings.IconList property.

var constantPricedGDPRule = new C1.Win.RulesManager.Rule()  
{  
        Name = 'Constant Priced GDP Comparison', 
        Expression = '=[ConstantGDP] >-10', 
        Style = new ItemStyle()  
        {  
                ForeColor = Color.White,  
                Gradient = new GradientSettings()  
                {  
                        IconList = IconListKey.Triangle, 
                        IconPoints = new GradientPoint[]  
                        {  
                                new GradientPoint(GradientPointType.MinValue) { Color = Color.Red, Value = -10  
},  
                                new GradientPoint(GradientPointType.MaxValue) { Color = Color.Green, Value = 10  
}  
                        }  
                }  
        }  
};  
constantPricedGDPRule.AppliesTo.Add(new FieldRange(new string[] { 'ConstantGDP' }));  

Supported Formatting Styles: Solid-colored Histogram

Show a histogram in a cell based on the value relative of the minimum and maximum values in the cell-range.

Define GradientSettings.HistogramPoints. In this case, the histogram renders with a solid color.

var currentPricedGDPRule = new C1.Win.RulesManager.Rule()  
{  
    Name = 'Current Priced GDP Analysis', 
    Expression = '= [CurrentGDP] >= 0', 
    Style = new ItemStyle()  
    {  
          ForeColor = Color.White, 
        Gradient = new GradientSettings()  
        {  
            HistogramPoints = new GradientPoint[]  
            {  
                new GradientPoint(GradientPointType.MinValue) { Color = Color.Green, Value = 0 },  
                new GradientPoint(GradientPointType.NotSelected) { Color = Color.Transparent, Value = 5.39f }, 
                new GradientPoint(GradientPointType.MaxValue) { Color = Color.Red, }  
            },  
            HistogramColor = Color.LimeGreen  
        }  
    }  
};  
currentPricedGDPRule.AppliesTo.Add(new FieldRange(new string[] { 'CurrentGDP' }));  

Supported Formatting Styles: Gradient-colored Histogram

Fill the histogram rendered in the above case with gradient colors.

Set the GradientSettings.IsGradientHistogram property to "true."

C1RulesManager also allows for the creation of conditional formats at run time. Any conditional format applied through code can also be designed through UI. Create the above conditional format rule using control run time UI.

How to Apply Conditional Formats

Once the conditional formats are created, add them in the RulesCollection of C1RulesManager.Add method to add a rule.

c1RulesManager1.Rules.Add(conditionalFormatRule); 

An output like the above image is generated. C1RulesManager with C1FlexGrid is implemented.

Download Demo: C1RulesManager Demo.zip

We hope you like the control added to our latest ComponentOne update. We strive to deliver intuitive components and features that add value.

What creative ways are you using RulesManager in your applications?

Visit help: .NET | Demos: Samples