Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Conditionally Change the Control's Appearance

  • 2 minutes to read

This document describes how to change the appearance of the report control based on a condition.

#Use Appearance Properties

  1. Select the report control and click the f-button:

    control-appearance-f-button

  2. In the invoked Expression Editor enter the expression for the ForeColor property that displays prices greater than 50 in Red:

    Iif([UnitPrice] >= 50, 'Red','Black')
    

    control-appearance-expression-editor

  3. The result is shown in the following image:

    control-appearance-result

You can specify the expression in code:

tableCell4.ExpressionBindings.Add(
new DevExpress.XtraReports.UI.ExpressionBinding()
{
    EventName = "BeforePrint",
    PropertyName = "ForeColor",
    Expression = "Iif([UnitPrice] >= 50, \'Red\',\'Black\') "
}); 

#Use Styles

  1. Create a new table report bound to the Products table of the sample Northwind database.

  2. Open the Report Explorer window, and right-click the Styles category to create a new visual style:

    report-explorer-styles-new-style

  3. Right-click the newly created style and select Edit Styles.

    report-explorer-styles-edit

  4. In the invoked Styles Editor you can specify the style appearance settings. Set the ForeColor to Red.

    styles-editor-appearance-settings

  5. Clone the style to create another style.

    styles-editor-clone

  6. Change the ForeColor to Black in the new style and close the editor.

    styles-editor-appearance-alternating

  7. Open the Report Explorer window, and select the table2 report element to which you wish to assign the created styles.

    report-explorer-select-element

  8. Switch to the Properties window and clear the Style settings for the table2 element.

    style-condition-clear-setting

  9. Clear the Style settings for the table2 child elements - the tableCell3 and tableCell4 elements.

    style-condition-clear-child-styles

  10. Switch to the Expressions tab. Click the ellipsis button next to the StyleName property in the Appearance section.

    expressions-style-name

  11. In the invoked Expression Editor enter the expression that switches between styles and click Ok to close the editor.

    Iif([UnitPrice] <= 50, 'xrControlStyle2','xrControlStyle1')
    

    expressions-style-name-iif

  12. Preview the resulting report.

    conditional-styles