使用ComponentOne 基于UI的规则管理器

收藏

本帖最后由 Richard.Ma 于 2020-10-26 18:20 编辑

条件格式设置使用户可以根据特定条件更改单个数据单元的外观。它有助于突出显示重要信息，识别趋势并简化数据解释。轻松创建和管理条件格式对于任何应用程序的用户体验都是至关重要的。

为了帮助设计和实现条件格式，最新版本的ComponentOne引入了一个新控件C1RulesManager。C1RulesManager是基于UI的组件，允许用户设计条件格式并将其应用于任何可识别数据的控件，例如FlexPivot，FlexGrid或DataGridView。该控件具有直观的API，使开发人员可以在设计时和运行时添加和管理格式规则的集合。

上图显示了运行时的C1RulesManager

C1RulesManager简介

新的UI控件受Excel启发。它提供了单个数据单元的条件格式。该控件提供了多个内置指示器，可帮助突出显示信息，识别现有趋势并比较数据。像Excel一样，规则管理器支持数据条，纯色和渐变比例颜色以及许多其他图标和指示符。

该图显示了C1RulesManager中可用的各种图标/指示器

使用新控件，可以将条件格式（例如单元格背景色，边框线样式和字体颜色）应用于其值满足特定条件的单元格。条件格式设置规则指定条件。

该控件使用户可以选择任何内置的常见条件。它还为用户提供创建自定义条件的选项。

规则管理器支持在运行时使用表达式编辑器构建自定义表达式。表达式编辑器是一个类似于组件的文本框，但提供了智能代码完成，语法和错误突出显示功能。它通过提供标准常量，预定义的运算符和函数来实现此目的。

此GIF显示用于以条件格式规则创建自定义表达式的表达式编辑器

使用基于UI的规则管理器，轻松创建和管理条件格式规则。C1RulesManager存储的5“ RuleCollection”集合中指定的所有条件格式设置规则。可通过C1RulesManager.Rules属性访问集合中的规则。

格式化规则按优先顺序列出。新的格式规则会自动添加到列表的底部，并且具有最低的优先级。在运行时使用“向上”和“向下”按钮在列表中更改所需格式设置规则的优先级。

此外，用户可以管理现有的格式设置规则。在运行时，通过单击“删除规则”按钮删除所有规则。通过取消选中相应的复选框来临时隐藏条件格式样式。重新选中该复选框并重新实施规则。

此图显示了C1RulesManager支持的用于管理规则的运行时操作

所有这些功能在C1RulesManager控件中均可用。以下用例将它们合并在一起。

C1RulesManager用例：世界经济展望[前十个国家]

《世界经济展望》是由国际货币基金组织（IMF）员工进行的一项调查。结果显示了基金组织职员经济学家对特定时期全球经济发展的分析。该报告是传播其国际监视活动的调查结果和研究的主要工具。

像世界银行这样的组织在全球范围内对各种全球指标进行了调查，并积累了一个数据库。该组织希望向观众展示这些数据，以便观众轻松消化。为了使信息易于解释，组织可能会突出显示基本部分并应用条件格式。

通过新的C1RulesManager控件很容易实现这种情况。若要学习如何复制此方案，本文的以下部分讨论如何将C1RulesManager与C1FlexGrid一起使用。

完整的实现分为以下几节

收集数据并绑定网格
将RulesManager与网格集成
在RulesManager中创建条件格式
应用条件格式

如何收集数据并绑定到FlexGrid

使用C1RulesManager有条件地突出显示数据。显示来自IMF的“世界经济展望”数据。为了限制数据，请仅考虑2019年国内生产总值（名义）在世界排名前10位的国家/地区。

使用数据的蓝图将此数据反映在网格中，然后将网格绑定到该数据。创建以下类：

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; }
}

复制代码

创建数据蓝图后，使用其DataSource属性绑定网格。

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

复制代码

该图显示了用数据填充的FlexGrid，没有任何条件格式

如何将C1RulesManager与FlexGrid集成

C1RulesManager可作为单独的组件使用。将其从VS Toolbox拖放到窗体上（或从NuGet添加），并将其附加到任何数据密集型控件上。

将其与任何可识别数据的控件集成在一起是一个一步的过程。要将C1RulesManager与FlexGrid集成，请调用C1RulesManager.SetC1RulesManager方法。

c1RulesManager1.SetC1RulesManager(c1FlexGrid1, c1RulesManager1);

复制代码

该图说明了与FlexGrid集成的C1RulesManager

在RulesManager中创建条件格式

在C1RulesManager中，根据条件添加格式规则。使v规则。

名称指定用户希望用来标识规则的名称
表达式指定确定是否根据规则格式化单元格范围的条件
样式定义将用于有条件地格式化单元格的项目样式

RulesManager支持多种类型的条件格式样式。

支持的格式样式：纯色单元格背景

在这种样式类型中，纯色填充单元格背景。单元格颜色由单元格值相对于网格列和单元格范围中指定的最小值和最大值的位置确定。

通过设置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' }));

支持的格式样式：图标和指示符

应用单元格格式作为图标或指示符。

定义GradientSettings.IconPoints属性以在单元格中显示图标。C1RulesManager中有多个图标可用。若要确定要传递的图标，请设置GradientSettings.IconList属性。

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' }));

支持的格式样式：单色直方图

根据单元格范围内最小值和最大值的相对值，在单元格中显示直方图。

定义GradientSettings.HistogramPoints。在这种情况下，直方图将以纯色呈现。

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' }));

复制代码

支持的格式样式：渐变色直方图

用渐变颜色填充在上述情况下渲染的直方图。

将GradientSettings.IsGradientHistogram属性设置为“ true”。

C1RulesManager还允许在运行时创建条件格式。通过代码应用的任何条件格式也可以通过UI设计。使用控件运行时用户界面创建上述条件格式规则。

此GIF显示使用C1RulesManager在运行时创建条件格式

如何应用条件格式

创建条件格式后，将其添加到C1RulesManager.Add方法的RulesCollection中以添加规则。

c1RulesManager1.Rules.Add(conditionalFormatRule);

复制代码

上图显示了使用C1RulesManager有条件格式化的多个网格列

生成如上图所示的输出。实现了带有C1FlexGrid的C1RulesManager。

		自动登录	找回密码
密码			立即注册

使用ComponentOne 基于UI的规则管理器

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人