Build Dynamic Data Logic with ExpressionEditor for WinForms and WPF

Applications that handle complex data often rely on data expressions to filter records, compute values, group results, or dynamically format information. Traditionally, developers have to hard-code these expressions directly into their application logic. However, modern data-driven applications increasingly allow end users to define their own expressions and filters.

This is where ComponentOne ExpressionEditor for .NET comes in.

C1ExpressionEditor is an expression builder control for WinForms and WPF that enables developers to embed a powerful expression editing experience directly inside their applications. With features similar to an IDE, including IntelliSense, syntax highlighting, and validation, writing expressions is easier for both developers and end users.

In this article, we'll cover:

• Why Use an Expression Editor
• Key Features that Improve Productivity
• ExpressionEditor UI components
• How to integrate it into a .NET application
• A practical example using FlexGrid

Ready to get started? Download ComponentOne Today!

Why Use an Expression Editor

An expression editor allows users to create formulas or logical expressions to manipulate data. They are widely used across data grids, dashboards, reporting tools, and analytical applications. Expressions are commonly used to filter datasets, define conditional formatting, group and sort data, generate dynamic reports, and more.

However, writing expressions manually can be difficult for non-developers. An expression editor provides a visual, assisted environment that simplifies expression creation and helps prevent syntax errors.

Key Features that Improve Productivity

The ComponentOne ExpressionEditor delivers a developer-friendly and user-friendly editing environment with several advanced capabilities.

Stand-Alone Expression Builder

Many controls provide built-in expression editors limited to that component. C1ExpressionEditor, however, is a stand-alone control that can integrate with any data-bound component, such as grids, charts, or reporting tools.

This flexibility allows developers to reuse the editor across multiple features in their application.

Smart Code Completion (IntelliSense)

ExpressionEditor provides Visual Studio-style IntelliSense that suggests functions and syntax as users type. Benefits include faster expression creation, discoverable functions, and reduced syntax errors.

For example, typing 'A' automatically suggests functions such as Abs, AddDays, etc.:

Syntax Highlighting

Expressions can quickly become difficult to read. C1ExpressionEditor improves readability with syntax highlighting that visually distinguishes elements such as functions, fields, numbers, and strings. This makes it easier for users to understand complex expressions at a glance.

200+ Built-In Functions and Operators

C1ExpressionEditor includes over 200 built-in functions and operators covering common data operations. These include:

• Aggregate functions
• Date and time functions
• Logical operators
• Mathematical calculations
• Conversion functions
• Text processing functions

This wide range enables developers and end users to build both simple and advanced expressions.

ExpressionEditor UI Components

The ComponentOne ExpressionEditor consists of two primary UI components: C1ExpressionEditor and C1ExpressionEditorPanel. 

• C1ExpressionEditor - This is the main editing area where users write expressions. Key capabilities include IntelliSense, syntax highlighting, validation feedback, and expression evaluation.
• C1ExpressionEditorPanel - This panel displays a categorized list of functions and operators, helping users quickly discover available expressions. It acts as a reference panel and accelerates expression building.

Internally, the C1ExpressionEditor also uses the C1.CalcEngine to handle calculations. This dependency is automatically included.

How to Add ExpressionEditor to a WPF or WinForms Application

Integrating ExpressionEditor into a .NET application is straightforward.

Step 1: Add C1ExpressionEditor to the Toolbox

Add the following package to your project from NuGet.org:

• WPF: C1.WPF.ExpressionEditor*
• WinForms: C1.Win.ExpressionEditor

*If you are targeting WPF .NET Framework, use the C1.Xaml.WPF.ExpressionEditor library instead.

Step 2: Add Expression Editor Controls to the Form

Locate, drag, and drop the C1ExpressionEditor control from the toolbox to your Form or Window.

Also, drag and drop the C1ExpressionEditorPanel control to the Form or Window. Place it where you would like the toolbar to be located relative to the editor.

Step 3: Bind the Two Components

To bind the two controls, set the C1ExpressionEditorPanel's ExpressionEditor property to the instance of the C1ExpressionEditor in WinForms. In WPF, you can set the Editor property in XAML, such as:

<c1:C1ExpressionEditor x:Name="ExpressionEditor">
    <c1:C1ExpressionEditor.Engine>
        <c1:C1ExpressionEngine/>
    </c1:C1ExpressionEditor.Engine>
</c1:C1ExpressionEditor>
<c1:C1ExpressionEditorPanel x:Name="ExpressionPanel" 
                            Editor="{Binding ElementName=ExpressionEditor}">
</c1:C1ExpressionEditorPanel>

Step 4: Display Results and Errors

A common capability you will want to add is the ability to display errors and expression results. You can easily add UI elements to display expression results and validation errors.

Add a Label or TextBlock named "lblResults" to your Form, and listen to the ExpressionChanged event on C1ExpressionEditor. Then, in the ExpressionChanged event, you can display results like this:

private void ExpressionEditor_ExpressionChanged(object sender, EventArgs e)
 {
     if (!ExpressionEditor.Engine.IsValid)
     {
         lblResults.Text = "";
         foreach (var item in ExpressionEditor.Engine.GetErrors())
         {
             // add error information if applicable
             lblResults.Text += item.FullMessage + "\n";
         }
     }
     else
     {
         lblResults.Text = ExpressionEditor.Engine.Evaluate()?.ToString();
     }
 }

Step 5: Add Expression Editing to a DataGrid

C1ExpressionEditor becomes especially powerful when integrated with datagrid controls such as FlexGrid. For example, users can create expressions to filter rows, perform calculations, apply conditional logic, or dynamically group and sort data.

Expression Editor Use Case: Calculated Columns

A common use case is using the .NET Expression Editor to let users edit a calculated column's expression at runtime.

In WinForms, this feature is built in completely. All you need to do is set the AllowExpressionEditing property on the FlexGrid column.

// Allow editing expression in run-time (expression icon in column header)
expressionColumn.AllowExpressionEditing = true;
expressionColumn.Style.ForeColor = Color.FromArgb(102, 51, 0);

// Set expression
expressionColumn.Expression = "[UnitPrice] * [UnitsInStock]";

You can check out the complete C# WinForms code in the ExpressionEditorExplorer sample.

In WPF, the feature is also easier with FlexGrid than with other data controls. The key to making this work is connecting the FlexGrid's specialized GridExpressionColumn's Engine property to a shared C1ExpressionEngine object.

<Window.Resources>
    <c1:C1ExpressionEngine x:Key="currentEngine" Expression="[Age] + Len([FirstName]) + Len([LastName])"/>
</Window.Resources>
<Grid>
    <c1:C1ExpressionEditor x:Name="expressionEditor" MaxHeight="200" ShowErrorBox="True" Engine="{StaticResource currentEngine}" />
    <c1:C1ExpressionEditorPanel MaxHeight="300" Margin="0 5 0 0" Editor="{Binding ElementName=expressionEditor}"/>
    <c1:FlexGrid x:Name="grid" Margin="10" AutoGenerateColumns="False" Grid.Column="1" MinColumnWidth="100" MinRowHeight="50">
      <c1:FlexGrid.Columns>
        
        <c1:GridExpressionColumn Binding="OrderTotal" EvaluationMode="CellEvaluation" Header="Calculated Exp." Engine="{StaticResource currentEngine}" 
                                 Background="#10006400" Foreground="DarkGreen" HeaderBackground="#C8006400" HeaderForeground="White"/>
        
        </c1:FlexGrid.Columns>
    </c1:FlexGrid>
</Grid>

You can check out the complete C# WPF code in the ExpressionEditorExplorer sample.

Expression Editor Use Case: Filtering

While viewing data in a grid, users often need to view selective data. FlexGrid lets users filter data by different criteria through an out-of-the-box filter bar. However, at times, a user might need to accomplish multi-condition filtering across several columns using operators. In those scenarios, ExpressionEditor is helpful because it enables users to easily write these kinds of filter expressions quickly.

In the screenshot above, the expression ReorderLevel<10 lets end users define a filter criterion to display only rows where a product's reorder level is below 10. You can write any expression to filter records just as we did in this example.

Implement ExpressionEditor to FlexGrid through code using these steps:

1. To filter records, you must set the editor's data source to the C1FlexGrid data source.
   
   

   ExpressionEditor.DataSource = flexGrid.CollectionView.CurrentItem;

   
   
2. Now, provide an expression to filter records using FlexGrid.CollectionView.Filter as shown below:
   
   

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

Conclusion: Get Started with a .NET Expression Editor

Embedding an expression editor inside your application enables powerful user-driven workflows. Benefits include:

• Giving end users control over calculations
• Reducing hard-coded logic
• Supporting advanced filtering and analytics
• Building low-code capabilities into applications

With IntelliSense, validation, and hundreds of built-in functions, ExpressionEditor makes expression-based logic accessible to developers and non-technical users alike.

You can integrate C1ExpressionEditor into your WinForms and WPF applications to enable dynamic data logic and customizable user experiences. A legacy UWP version is also available.

Ready to check it out? Download ComponentOne Today!