How to: Display a List View as a Chart (Windows Forms and ASP.NET Web Forms)

• Aug 14, 2025
• 5 minutes to read

The default List Editor that visualizes Views in XAF applications is GridListEditor (used in WinForms applications). This default List Editor visualizes List Views as grids. This topic demonstrates the capabilities of the Chart Module you can use to visualize a List View as a chart. The List View, visualized by ChartListEditor, is defined in the Application Model. Customizations of the Chart settings using the Chart Designer are also shown.

Note

If you want to display a List View as a chart in an XAF ASP.NET Core Blazor application, refer to the following topic: Chart Module.

Tip

You can see examples with Chart List Editors in the FeatureCenter demo shipped with XAF. This demo is located in the %PUBLIC%\Documents\DevExpress Demos 25.2\Components\XAF\FeatureCenter.NET.XPO folder, by default.

Follow the steps below to implement the sample application demonstrating the use of Chart List Editors.

Implement Sample Persistent Object

Consider the following Employee persistent class or similar Entity Framework Core class:

C# (EF Core)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl.EF;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
//...
[DefaultClassOptions,DefaultProperty(nameof(FullName)),ImageName("BO_Person")]
public class Employee : BaseObject {
    [HideInUI(HideInUI.ListViewColumn)]
    public virtual string FirstName { get; set; }
    [HideInUI(HideInUI.ListViewColumn)]
    public virtual string LastName { get; set; }
    [HideInUI(HideInUI.DetailViewEditor)]
    public string FullName {
        get { return String.Format("{0} {1}", FirstName, LastName); }
    }
    public virtual string Position { get; set; }
}

// Make sure that you use options.UseChangeTrackingProxies() in your DbContext settings.

C# (XPO)

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
using DevExpress.Xpo;
using System.ComponentModel;
//...
[DefaultClassOptions, DefaultProperty(nameof(FullName)), ImageName("BO_Person")]
public class Employee : BaseObject {
    public Employee(Session session) : base(session) {}
    private string firstName;
    private string lastName;
    private string position;
    [HideInUI(HideInUI.ListViewColumn)]
    public string FirstName {
        get { return firstName; }
        set { SetPropertyValue(nameof(FirstName), ref firstName, value); }
    }
    [HideInUI(HideInUI.ListViewColumn)]
    public string LastName {
        get { return lastName; }
        set { SetPropertyValue(nameof(LastName), ref lastName, value); }
    }
    [HideInUI(HideInUI.DetailViewEditor)]
    public string FullName {
        get { return String.Format("{0} {1}", FirstName, LastName); }
    }
    public string Position {
        get { return position; }
        set { SetPropertyValue(nameof(Position), ref position, value); }
    }
}

Note

Although Employee is an XPO persistent class, the technique demonstrated here can also be used with Entity Framework.

In this example, we will create the Employee chart, which can be used to compare the number of Employees with different Positions.

Create a New List View Node

Follow the steps below to create a List View node, which defines a List View to be visualized by a Chart List Editor.

• Invoke the Model Editor for the platform-agnostic module project.

• Navigate to the Views | Employee_ListView node generated for the Employee persistent object. Right-click this node and select Clone.

  

  A copy of the List View node will be created.

• Change the new node’s IModelView.Id property to “Employee_ListView_Chart”.

  

Create the Navigation Item for the Chart List View

The Employee_ListView_Chart List View created at the previous stage should be accessible by end users. Create the Employee Chart Navigation Item and set the IModelNavigationItem.View property to “Employee_ListView_Chart”.

The creation of Navigation Items is detailed in the Add an Item to the Navigation Control tutorial.

Note

Alternatively, you can define a View Variant pointing to the Employee_ListView_Chart List View. End users will be able to choose whether to display the Employee List View as a grid or as a chart. The chart List View can also be used as a Dashboard Item (see How to: Display Several Views Side-by-Side).

Add the Chart Module

Chart List Editors are shipped with the Chart Module. Add corresponding platform-specific modules to the MySolution.Win and MySolution.Web projects.

1. Add the required platform-specific NuGet packages from the following table:

   Package	Project
   DevExpress.ExpressApp.Chart.Win	WinForms-specific application project (MySolution.Win)

2. In the application constructor, add the platform-specific Charts Module to the Modules collection:

   Windows Forms

   MySolution.Win\Startup.cs

   using DevExpress.ExpressApp.Chart.Win;
   
   namespace MySolution.Win {
       public class ApplicationBuilder : IDesignTimeApplicationFactory {
           public static WinApplication BuildApplication(string connectionString) {
               var builder = WinApplication.CreateBuilder();
               builder.UseApplication<MySolutionWindowsFormsApplication>();
               builder.Modules
                   .AddCharts()
                   // ...
           }
           // ...
       }
       // ...
   }
   

Change the List View’s List Editor

After the Chart Module is added, the Chart List Editor can be specified using the List View node’s IModelListView.EditorType property.

• Invoke the Model Editor for the MySolution.Win\Model.xafml file. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property’s drop-down, select “DevExpress.ExpressApp.Chart.Win.ChartListEditor”.

  

Specify Chart Settings

The Chart Module extends List View nodes with the ChartSettings (IModelChartSettings) child node. To specify chart settings for the WinForms application, invoke the Model Editor for the WinForms application project and perform the following steps.

• Navigate to the Views | Employee_ListView_Chart | ChartSettings node. Click the ellipsis button to the right of the IModelChartSettings.Settings property value.

  

  XAF displays the Chart Designer form. The form initially displays the Options page that contains appearance, behavior, and border settings.

• Click the + button next to the Series (0) item in the series list on the left-hand side. Select the Bar view type in the popup menu.

  

• Set the new series Name property to Positions.

  

• Switch to the Properties tab. To define chart data, navigate to the Data properties section and find the Argument Data Member property. Open the property’s drop-down menu and double-click the Position item.

  

• In the Data group, expand the Qualitative Summary Options sub-group. Find the Summary Function property and click the ellipsis button on the right. In the invoked window, choose Count and click OK.

  

• Click OK to close the Chart Designer. XAF sets the chart settings in XML format to the Settings property in the Model Editor.

Note

Users can invoke the Chart Designer at runtime by right-clicking a chart and selecting Invoke Wizard. You can turn this feature off by setting the ChartSettings node’s ICustomizationEnabledProvider.CustomizationEnabled property to false. For more information about the Chart Designer capabilities, refer to the following topic: Chart Designer.

Run the Application

Run the WinForms application. Create several Employee objects with different positions to provide data for the chart.

Select the Employee Chart navigation item. The chart will be displayed.