Quick Start

This topic guides you through a step-by-step process of creating Expression Editor control, and binding it to an object to demonstrate creating expressions and performing operations on its fields.

The following image exhibits the Expression Editor control which is bound to an instance of a class that represents sales and expenses for different countries.

Add Expression Editor Components to Application

1. Create a WPF application, and open MainWindow.xaml.

2. Add C1ExpressionEditor and C1ExpressionEditorPanel components to your page. The Xaml code appears as follows.

   <c1:C1ExpressionEditor x:Name="ExpressionEditor">
       <c1:C1ExpressionEditor.Engine>
           <c1:C1ExpressionEngine/>
       </c1:C1ExpressionEditor.Engine>
   </c1:C1ExpressionEditor>
   <c1:C1ExpressionEditorPanel x:Name="ExpressionPanel">

Bind the Components

Bind the C1ExpressionEditor and C1ExpressionEditorPanel components using ExpressionEditor property exposed by C1ExpressionEditorPanel class, as shown in the following code snippet.

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

Add Result and Error panels

1. To create result panel, add a StackPanel with two TextBlocks within it after the C1ExpressionEditorPanel block.

2. To create error panel, add a TextBlock after the StackPanel.

The following code snippet shows markup for result and error panels.

<StackPanel Background="AliceBlue" Orientation="Horizontal" Height="40" >
    <TextBlock Text="Result : " FontWeight="Bold" Padding="12"/>
    <TextBlock x:Name="Result" Text="" Padding="12"/>
    <TextBlock x:Name="Errors" Foreground="Red" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MinHeight="25" />
</StackPanel>

Subscribe to and handle the ExpressionChanged event

1. Subscribe to the ExpressionChanged event of C1ExpressionEditor.

   <c1:C1ExpressionEngine CurrentIndex="0" ExpressionChanged="ExpressionEditor_ExpressionChanged"/>

2. Handle the ExpressionChanged event, to show result of the entered expressions, as follows.

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

Bind Expression Editor to an object

Expression Editor can be bound to instance of a class that represents data to perform operations on. This is possible by DataSource property (under Engine property) exposed by the C1ExpressionEditor class.

The following code snippet demonstrates how an object of expression editor binds to object of a class.

ExpressionEditor.DataSource = new DataItem("France",11,5);

Step 6: Build and Run the Project

1. Click Build | Build Solution to build the project.

2. Press F5 to run the project.

You have successfully created a WPF application showing Expression Editor control bound to an object of class depicting sales and expenses figures for countries.

Enter a valid expression, for example calculate the sum of Sales and Expenses for a retail store in a country. The sales and expenses data for the country have been provided through object.