国家  china

Introducing ExpressionEditor for WinForms, WPF, and UWP

 

从ComponentOne 2017年11月发行版开始,最终用户现在可以使用ExpressionEditor(一个用于输入,评估和传递表达式的WinForms,WPF和UWP的独立桌面控件)轻松编写表达式。

表达式是值的表示形式,广泛用于数据管理,数据可视化和报表定义,以检索,计算,显示,分组,排序,过滤参数和格式化数据。 过去,开发人员编写了所有的表达式,这些表达式在应用程序中大都是硬编码的。

如今,最终用户需要对数据进行更多的控制,根据业务需求进行可视化和分析。 虽然有经验的开发人员可能不会觉得书写表达式很困难,但最终用户在不使用可视编辑器的情况下编写它们并不容易。 ExpressionEditor改变了这一点,给开发者和最终用户一个轻松的表达式写作经验。

虽然最终用户将能够毫不费力地编写表达式,但开发人员还可以利用ExpressionEditor的优势,在更短的时间内编写复杂的表达式,从而从中受益。

ExpressionEditor提供了一个全面的IDE编辑体验,包括智能提示,语法高亮显示,输入无效表达式的错误信息等等。

In this blog, we'll primarily talk about:

  • ExpressionEditor的主要特性
  • ExpressionEditor的UI
  • 设置 ExpressionEditor
  • 如何使用ExpressionEditor

主要特性

独立的ExpressionEditor

表达式编辑器通常以带有控件的内置编辑器(如网格,图表和报表)提供,这些编辑器通常用于这些编辑器。 ComponentOne的ExpressionEditor是一个完整的独立编辑器,可以与任何数据绑定控件集成。

智能提示

ExpressionEditor减少了记忆函数的需要,并显示它们的定义。 当您开始在编辑器中输入内容时,与可输入字符相匹配的可用函数列表将显示在可选择的下拉列表中,从而加快了您手动执行的搜索速度。
例如,如果键入“r”并等待代码完成列出所有以“r”开头的方法,则Rand()方法将出现在列表顶部。 按下Tab键,并填入Rand。 你可以在“r”后输入“b”,按Tab键后自动添加RandBetween方法。

Smart Code Completion

 

高亮显示

使用语法突出显示,用户可以更容易地识别表达式中的不同元素。 以不同的颜色显示表达式元素使得表达式更易读,更容易理解。
在以下屏幕截图中,表达式元素是颜色编码的:
   函数名称是绿色的。
   田地是紫色的。
   数字是粉红色的。
   字符串是棕色的。

Syntax Highlighting

200多个内置函数和操作符

ComponentOne ExpressionEditor提供了200多个内置的简单和复杂的函数和操作符。
广义而言,这些功能和操作符分类如下:

  • Aggregate functions
  • DateTime functions
  • Logical functions
  • Math functions
  • Convert functions
  • Text functions
  • Operators

UI Components

ComponentOne的ExpressionEditor主要由两部分组成:
1、C1ExpressionEditor - 这是用户输入表达式的编辑区域。 智能代码完成和语法高亮等功能在该组件中可用。
2、C1ExpressionEditorPanel - 此面板显示内置函数和运算符的分类视图。

ExpressionEditor UI Components


 

设置ExpressionEditor

在本节中,我们将通过集成两个UI组件来完成开发人员需要采取的步骤来为最终用户设置ExpressionEditor。
按照以下步骤在WPF项目中创建一个表达式编辑器:
1.使用C1.WPF.ExpressionEditor.4 dll将Expression Editor组件添加到Visual Studio Toolbox中,如下所示。

Adding an expression editor component

 

2.添加对C1.WPF.ExpressionEditor.4和C1.WPF.4 dll的引用并构建项目。
3.打开MainWindow.xaml,并用下面的代码替换现有的XAML:

   1:  <Window x:Class="ExpressionEditorDemo.MainWindow"
   2:   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   5:   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   6:   xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
   7:   mc:Ignorable="d"
   8:   d:DesignHeight="400" d:DesignWidth="500">
   9:    <Grid>
  10:      <Border BorderBrush="Black" BorderThickness="0,0,01">
  11:        <Grid Background="White">
  12:          <Grid.RowDefinitions>
  13:            <RowDefinition Height="Auto"/>
  14:            <RowDefinition Height="Auto"/>
  15:            <RowDefinition Height="Auto"/>
  16:            <RowDefinition Height="Auto"/>
  17:        </Grid.RowDefinitions>
  18:  <c1:C1ExpressionEditor x:Name="ExpressionEditor" MinHeight="100" Width="{Binding
  19:  ActualWidth, ElementName=ExpressionPanel}"/>
  20:  <c1:C1ExpressionEditorPanel x:Name="ExpressionPanel" ExpressionEditor="{Binding
  21:  ElementName=ExpressionEditor}" Grid.Row="1"/>
  22:  <StackPanel Orientation="Horizontal" Grid.Row="2">
  23:        <TextBlock Text="Result:" FontWeight="Bold"/>
  24:        <TextBlock x:Name="Result" Text="" />
  25:  </StackPanel>
  26:  <TextBlock x:Name="Errors" Grid.Row="3" Foreground="Red" TextWrapping="Wrap"
  27:  HorizontalAlignment="Left" VerticalAlignment="Top" MinHeight="25" />
  28:             </Grid>
  29:          </Border>
  30:        </Grid>
  31:       </Window>

4.打开MainWindow.xaml.cs并为ExpressionChanged事件添加以下代码:

public MainWindow()
        {
        InitializeComponent();
      ExpressionEditor.ExpressionChanged += ExpressionEditor_ExpressionChanged;
        }

private void ExpressionEditor_ExpressionChanged(object sender, EventArgs e)
         {
           C1ExpressionEditor editor = sender as C1ExpressionEditor;

           if (!editor.IsValid)
           {
             Result.Text = "";
             Errors.Text = "";

          editor.GetErrors().ForEach(x => {Errors.Text += x.FullMessage + "\n";});
              }
              else
          {
                Result.Text = editor.Evaluate()?.ToString();
                Errors.Text = "";

           }
         }

此代码评估在ExpressionEditor中输入的表达式,并在结果文本框中显示有效表达式的结果。 它还显示错误文本框中的无效表达式的错误。
5.构建并运行应用程序。
6.在类别框中输入有效的表达式。

Using ExpressionEditor

在上面的章节中,我们看到了如何设置ExpressionEditor。 接下来,我们将看看如何使用ExpressionEditor和任何数据绑定控件。 对于本博客的范围,我们将简要介绍如何将ExpressionEditor与ComponentOne FlexGrid控件一起使用。
在网格中查看数据时,用户通常需要查看选择性数据。 FlexGrid允许用户通过提供开箱即用的过滤条来根据不同的标准过滤数据。 但是,有时用户可能需要使用运算符跨多个列完成多条件过滤。 在这些场景中,ExpressEditor是有帮助的,因为它使用户能够快速轻松地编写这些类型的过滤器表达式。

Using ExpressionEditor

在上面的屏幕截图中,表达式ReorderLevel <10允许最终用户定义一个过滤条件,以仅显示产品的重排序水平低于10的那些行。您可以编写任何表达式来筛选记录,就像我们在本例中所做的一样。
ExpressionEditor与FlexGrid控件的集成可以在设计时完成 - 通过将AllowEditingExpression属性设置为true或通过代码。
使用以下步骤通过代码将ExpressionEditor实现到FlexGrid:

1.要过滤记录,必须将编辑器的数据源设置为C1FlexGrid数据源。

ExpressionEditor.DataSource = flexGrid.CollectionView.CurrentItem;

2.现在,提供一个表达式来使用flexGrid.CollectionView.Filter过滤记录,如下所示:

ExpressionEditor.Expression = "[Price] < 1000"; flexGrid.CollectionView.Filter = new Predicate<object>(Contains); private bool Contains(object obj) { C1ExpressionEditor _editor = new C1ExpressionEditor(); _editor.Expression = ExpressionEditor.Expression; _editor.DataSource = obj as Product; var value = _editor.Evaluate(); var ret = true; if (value != null) Boolean.TryParse(value.ToString(), out ret); return ret; }

 

在下一篇博文中,我们将深入讨论如何使用ExpressionEditor和不同的数据绑定控件。

如果你有疑问,可以到GCDN获得技术支持:

http://gcdn.gcpowertools.com.cn/showforum-68.html

GCDNhttp://gcdn.gcpowertools.com.cn/

官方网站http://www.gcpowertools.com.cn/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Introducing-ExpressionEditor-for-WinForms-WPF-and-UWP.aspx

不允许评论