How to: Display a List View as how a Chart: The chart displays a list view

The default List Editors used to visualize Views in XAF applications are GridListEditor and ASPxGridListEditor (used in WinForms and ASP.NET applications, respectively). These default List Editors visualize List Views as grids. This topic demonstrates how to visualize a List View as a chart, using capabilities provided by the Chart Module. The List View, visualized by the ChartListEditor and ASPxChartListEditor List Editors will be defined in the Application Model. Customizations of the Chart settings using the Chart Designer will also be demonstrated.

A visualization application view XAF default list editor is GridListEditor and ASPxGridListEditor (and were used in WinForms ASP.NET application). The default list editor will list view visualized as a grid. This topic demonstrates how to use the function chart module provides a list view visualized as graphs. From the graph editor and ASPxChartListEditor visualizer editor list view will be defined in the application model. Chart Designer will also demonstrate the use of customized chart settings.

Tip Tip

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2840

Complete sample project can be found in the code sample database DevExpress, http://www.devexpress.com/example=E2840

The implementation of the sample application demonstrating the use of Chart List Editors is comprised of the following stages.

Implement Sample Persistent Object
Create a New List View Node
Create the Navigation Item for the Chart List View
Add the Chart Module
Change the List View's List Editor
Specify Chart Settings
Run the Application

Implement the example application presentation charts list editor include the following stages.

Implementation Example persistent objects
Create a new list view nodes
Create a navigation chart entry for the list view
Add Chart module
Change List Editor List view
Specifies the chart settings
Run the application

Tip Tip

You can see examples with Chart List Editors in the FeatureCenter and XCRM demos shipped with XAF. These demos are located in the %PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework folder, by default.

You can view a sample chart in the list editor function center and XCRM XAF accompanying presentation. The demo is located % the PUBLIC% \ Documents \ DevExpress the Demos 19.2 \ Components \ Framework eXpressApp Folder, by default.

Implement Sample Persistent Object

Implementation Example persistent objects

Let us consider the following Employee persistent class or same Entity Framework class.

Let us consider the following employees of the same class or persistent Entity Framework classes.

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;
    [VisibleInListView(false)]
    public string FirstName {
        get { return firstName; }
        set { SetPropertyValue(nameof(FirstName), ref firstName, value); }
    }
    [VisibleInListView(false)]
    public string LastName {
        get { return lastName; }
        set { SetPropertyValue(nameof(LastName), ref lastName, value); }
    }
    [VisibleInDetailView(false)]
    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 Note

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

Although employees are XPO persistent classes, but the method demonstrated here can also be used with the Entity Framework.

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

In this example, we will create the "employee" chart that can be used to compare the number of employees have different positions.

Create a New List View Node

Create a new list view nodes

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, which is auto-generated for the Employee persistent object. Right-click it and select Clone.

Create a list view nodes following steps, which define a node list from the graph editor visual list view.

Model Editor invoked platform-independent module project.
Navigate to view | Employee_ListView node, which is automatically generated for employees persistent objects. Right-click it and select "clone."

ChartsCloneNode

A copy of the List View node will be created.

A copy of the list view nodes will be created.

Change the new node's IModelView.Id property to "Employee_ListView_Chart".
The IModelView.Id properties of the new node is changed to "Employee_ListView_Chart".

Create the Navigation Item for the Chart List View

Create a navigation chart entry for the list view

The Employee_ListView_Chart List View created at the previous stage, should be accessible by end-users. So, create the Employee Chart Navigation Item, which has the IModelNavigationItem.View property set to "Employee_ListView_Chart".

Employee_ListView_Chart list view created on a stage, end-users should have access to the view. Therefore, the creation of an employee chart navigation item whose properties are set to "Employee_ListView_Chart".

ChartsNavigationItem

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

Create a navigation item description "to add items to the navigation control" tutorial in detail.

Note 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 Provide Several View Variants for End-Users tutorial illustrates how to accomplish this task. The chart List View can also be used as a Dashboard Item (see How to: Display Several Views Side-by-Side).

或者，您可以定义指向Employee_ListView_Chart列表视图的视图变体。最终用户将能够选择是将员工列表视图显示为网格还是图表。"为最终用户提供多个视图变体"教程说明了如何完成此任务。图表列表视图也可以用作仪表板项（请参阅如何：并排显示多个视图）。

Add the Chart Module

添加图表模块

Chart List Editors are provided by the Chart Module. As this module is represented by two platform-specific module projects, you should add them separately to your application's WinForms and ASP.NET modules.

图表列表编辑器由图表模块提供。由于此模块由两个特定于平台的模块项目表示，因此应将它们分别添加到应用程序的 WinForms 和ASP.NET模块中。

Invoke the Module Designer for the WinForms module project. Drag the ChartWindowsFormsModule item from the Toolbox to the Required Modules panel.
调用 WinForms 模块项目的模块设计器。将图表窗口窗体模块项目从"工具箱"拖动到"必需模块"面板。
Invoke the Module Designer for the ASP.NET module project. Drag the ChartAspNetModule item from the Toolbox to the Required Modules panel.
调用ASP.NET模块项目的模块设计器。将 ChartAspNet 模块项目从"工具箱"拖动到"必需模块"面板。

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. As there are two platform-specific Chart List Editors, you should change settings separately for the WinForms and ASP.NET module projects.

添加图表模块后，可以使用列表视图节点的 IModelListView.EditorType 属性指定图表列表编辑器。由于有两个特定于平台的图表列表编辑器，因此应分别更改 WinForms 和ASP.NET模块项目的设置。

Invoke the Model Editor for the WinForms module project. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property's drop-down, select "DevExpress.ExpressApp.Chart.Win.ChartListEditor".
调用 WinForms 模块项目的模型编辑器。导航到视图 |Employee_ListView_Chart节点。在编辑器类型属性的下拉列表中，选择"DevExpress.ExpressApp.Chart.Win.ChartListEditor"。。
Invoke the Model Editor for the ASP.NET module project. Navigate to the Views | Employee_ListView_Chart node. In the EditorType property's drop-down, select "DevExpress.ExpressApp.Chart.Web.ASPxChartListEditor".
调用ASP.NET模块项目的模型编辑器。导航到视图 |Employee_ListView_Chart节点。在编辑器类型属性的下拉列表中，选择"DevExpress.ExpressApp.Chart.Web.ASPxChartList编辑器"。

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 module project and perform the following steps.

图表模块使用图表设置（IModelChartSettings）子节点扩展列表视图节点。要为 WinForms 应用程序指定图表设置，请调用 WinForms 模块项目的模型编辑器，并执行以下步骤。

Navigate to the Views | Employee_ListView_Chart | ChartSettings node. Click the ellipsis button to the right of the IModelChartSettings.Settings property value.
导航到视图 |Employee_ListView_Chart |图表设置节点。单击 IModelChartSettings 右侧的省略号按钮。

ChartSettings

The Chart Designer form will be invoked. By default, main chart Options page with appearance, behavior and border settings is shown.

将调用图表设计器窗体。默认情况下，将显示具有外观、行为和边框设置的主图表选项页。

Click the Add Chart Element ( ) button in the top left corner, choose "Series..." element and the Bar view type in the invoked window.
单击左上角的"添加图表元素（AddChartElement）"按钮，在调用的窗口中选择"系列..."元素和条形视图类型。
Set the new series Name property to "Positions".
将新系列名称属性设置为"位置"。
Switch to the Data tab. To define chart data, drag the Position data member to the Argument cell.
切换到"数据"选项卡。要定义图表数据，请将"位置"数据成员拖动到参数单元格。
Switch to the Properties tab. In the Data 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. The chart settings in XML format will be set to the Settings property in the Model Editor.
单击"确定"以关闭图表设计器。XML 格式的图表设置将设置为模型编辑器中的"设置"属性。

Note 注意

End-users can invoke the Chart Designer at run-time 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. To learn about the Chart Designer capabilities in detail, refer to the Chart Designer help topic.

最终用户可以通过右键单击图表并选择"调用向导"来在运行时调用图表设计器。您可以通过将 ChartSettings 节点的 ICustomization 启用提供程序关闭此功能。要详细了解图表设计器功能，请参阅图表设计器帮助主题。

To specify chart settings for the ASP.NET application, invoke the Model Editor for the ASP.NET module project and perform the same steps. Note that there are two additional ChartSettings node's properties available for the ASP.NET application - IModelWebChartSettings.PreferredWidth and IModelWebChartSettings.PreferredHeight. The PreferredWidth property specifies the minimal possible width of a chart in pixels (chart control adjusts its width automatically to fit available space). The PreferredHeight property specifies the exact height.

To specify the chart settings for an ASP.NET application, please call the model editor ASP.NET module project and perform the same steps. Note that there are two additional attributes can be used to set the node graph ASP.NET application -. IModelWebChartSettings preferred width and IModelWebChart settings. Preferred height. "Preferred width" attribute specifies the minimum possible width of the chart (in pixels (chart control automatically adjusts its width to fit the available space). "Preferred height" attribute specifies the exact height.

Run the Application

Run the application

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

Run WinForms applications. Create multiple objects with different staff positions, to provide data for the chart.

ChartsRunWinApp1

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

Select the tab navigation key employees. Will display the chart.

ChartsRunWinApp2

Run the ASP.NET application and check that the Employee Chart is also available.

Run ASP.NET applications, and check that the staff chart is also available.

ChartsRunWebApp2