expression editor for uwp - expression editor for uwp is a control that enables creating and editing

Download Expression Editor for UWP - Expression Editor for UWP is a control that enables creating and editing

Post on 06-Jun-2020




0 download

Embed Size (px)


  • ComponentOne

    Expression Editor for UWP

  • GrapeCity US

    GrapeCity 201 South Highland Avenue, Suite 301 Pittsburgh, PA 15206 Tel: 1.800.858.2739 | 412.681.4343 Fax: 412.681.4384 Website: E-mail:


    The ComponentOne product name is a trademark and ComponentOne is a registered trademark of GrapeCity, Inc. All other trademarks used herein are the properties of their respective owners.


    ComponentOne warrants that the media on which the software is delivered is free from defects in material and workmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective media to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for the defective media by sending it and a check for $25 (to cover postage and handling) to ComponentOne.

    Except for the express warranty of the original media on which the software is delivered is set forth here, ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was written. ComponentOne is not responsible for any errors or omissions. ComponentOne’s liability is limited to the amount you paid for the product. ComponentOne is not liable for any special, consequential, or other damages for any reason.

    Copying and Distribution

    While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in seeing that it is used by licensed users only.

  • Table of Contents Expression Editor for UWP Edition 2

    Help with UWP Edition 2

    Key Features 3

    Object Model Summary 4

    Expression Editor Elements 5

    Quick Start 6-8

    Create Expressions 9

    Built-in Functions, Operators, and Constants 10-16

    Features 17

    End-User Capabilities 17-19

    Appearance and Styling 19-21

    Working with Expression Editor 22

    Integration with FlexGrid 22-23

    Column Calculation in FlexGrid 23-24

    Integration with FlexChart 24-25

    Filtering in FlexChart 25-26

    Samples 27

    Expression Editor for UWP 1

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • Expression Editor for UWP Edition Expression Editor for UWP is a control that enables creating and editing expressions at run-time, which can then be used to perform calculations and shaping data. Powered with Visual Studio-like IDE, Expression Editor offers smart code completion, syntax highlighting, and error reporting functionalities. It provides standard operators, constants, and functions to help perform aggregate, logical, mathematical, and conversion operations on data. This intuitive control can be easily integrated with other data management and visualization controls such as grids and charts, to aid analysis.

    The control is composed of C1ExpressionEditor and C1ExpressionEditorPanel components. Both these components can also be used as stand-alone controls in integration with other supported controls. For example, C1ExpressionEditor component can be used as Excel-like formula bar in integration with FlexGrid to enter expressions.

    The following topics help you get accustomed with the Expression Editor control, and explore its advanced capabilities.

    Help with UWP Edition For information about installing ComponentOne Studio UWP Edition, licensing, creating project with the Expression Editor control, getting technical help, and namespaces, visit Getting Started with UWP Edition.

    Expression Editor for UWP 2

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • Key Features Expression Editor for UWP offers numerous advanced features that help end users create and edit complex expressions. These are as follows:

    Smart Code Completion Expression Editor provides recommendation of possible methods in a list box based on what you typed so far. This helps in completing expressions quickly and reduces the chances of typing errors. Syntax Highlighting Expression Editor uses different colors to write functions, fields, and operators. This helps in differentiating these items and enhancing the readability of expressions, especially when the expressions span across multiple lines. Pre-defined Operators and Functions  Expression Editor provides a wide variety of operators and functions to perform aggregate, logical, date time, math, convert and text operations for the ease of users while working with expressions. Error Reporting Expression Editor validates the entered expression for error detection, immediately after user has finished entering the expression. If the expression syntax is incorrect, then error message is shown within the Editor.

    Expression Editor for UWP 3

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • Object Model Summary Expression Editor comes with a rich object model, providing various classes, objects, collections, and associated methods and properties for creating powerful applications with Expression Editor, to help perform advanced operations using expressions. The following table lists some of these objects and their major properties.


    Properties: DataSource, Expression, ShowErrorBox, SyntaxHighlighting, UnderlineErrors.

    Methods: Evaluate, SetCustomEngine.


    Properties: ButtonBackground, ButtonForeground, ExpressionEditor, IsMouseOver, MouseOverBrush.

    ISupportExpressions Interface

    Properties: ExpressionEditors, ItemsSource.

    Expression Editor for UWP 4

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • Expression Editor Elements Expression Editor comprises two components.

    C1ExpressionEditor: Contains an expression text box where you can type expressions. C1ExpressionEditorPanel: Displays a quick access toolbar containing Arithmetic and Logical operator buttons, and a categorized view of built-in functions, operators, and constants.

    The following image illustrates constituting components of Expression Editor control and their respective elements.

    C1ExpressionEditor Expression TextBox: A text box that enables user to create and edit expressions.

    C1ExpressionEditorPanel Operator Buttons: Buttons that represent shortcuts for operators.

    Category Selection: A tree view which contains available functions, operators, fields and constants.

    Items: A list box that lists the items selected from the Category Selection section.

    Description Panel: A panel that displays the description of the item selected from the Category Selection section.

    Expression Editor for UWP 5

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • Quick Start This quick start 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 steps to create an application with Expression Editor control are as follows:

    Step 1: Add Expression Editor components to application Step 2: Bind the components Step 3: Add Result and Error panels Step 4: Subscribe to and handle ExpressionChanged event Step 5: Bind Expression Editor to an object Step 6: Build and Run the Project

    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.

    Back to Top

    Step 1: Add Expression Editor components to application

    1. Create a Universal Windows application, and open MainPage.xaml. 2. Add C1ExpressionEditor and C1ExpressionEditorPanel components to your page. The Xaml code appears as

    follows. Xaml

  • HorizontalAlignment="Left" Height="300" Width="599" />

    Back to Top

    Step 2: Bind the components

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


    Back to Top

    Step 3: 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


    Back to Top

    Step 4: Subscribe to and handle the ExpressionChanged event

    1. Subscribe to the ExpressionChanged event of C1ExpressionEditor. C#

    ExpressionEditor.ExpressionChanged += ExpressionEditor_ExpressionChanged; 2. Handle the ExpressionChanged event, to show result of the entered expressions, as follows.

    C# private void ExpressionEditor_ExpressionChanged(object sender, EventArgs e) { C1ExpressionEditor edit = sender as C1ExpressionEditor;

    if (!edit.IsValid)

    Expression Editor for UWP 7

    Copyright © 2017 GrapeCity, Inc. All rights reserved.

  • { Result.Text =