[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Collapse]eXpressApp Framework
 [Expand]Getting Started
 [Expand]Design-Time Features
 [Collapse]Task-Based Help
  [Expand]Business Model Design
  [Expand]Application Model
    How to: Access Objects Selected in the Current View
    How to: Access Master Detail View and Nested List View Environment
    How to: Create and Show a Detail View of the Selected Object in a Popup Window
    How to: Customize Tabs Generation in a Mobile Detail View
    How to: Detect a Lookup List View in Code
    How to: Display a Detail View Directly in Edit Mode in ASP.NET and Mobile Applications
    How to: Display a List View as a Chart
    How to: Display a List View as a Pivot Grid Table and Chart
    How to: Display Several Views Side-by-Side
    How to: Hide Collection Properties in an Edit Mode Detail View for an ASP.NET Application
    How to: Implement a Singleton Business Object and Show its Detail View
    How to: Implement a View Item
    How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)
    How to: Show a Custom Data-Bound Control in an XAF View (WinForms)
  [Expand]List Editors
  [Expand]Property Editors
  [Expand]Scheduler and Notifications
  [Expand]Maps Module
  [Expand]Miscellaneous UI Customizations
  Frequently Asked Questions (FAQ)
 [Expand]API Reference
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Show a Custom Data-Bound Control in an XAF View (WinForms)

This example demonstrates how you can add a custom data-bound (data-aware) control to a View and display this View from the navigation in a WinForms XAF application. For demo purposes, in this example you will add the GridControl control with the CardView to the EFDemo application (installed to %PUBLIC%\Documents\DevExpress Demos 19.1\Components\eXpressApp Framework\EFDemoCodeFirst by default). However, you can use the same approach with any other custom control in your own XAF application.


A similar example for ASP.NET is available in the How to: Show a Custom Data-Bound Control in an XAF View (ASP.NET)

Expanded Create a User Control

In the WinForms module project, create a User Control. Right-click the project and choose Add | User Control...

Add the required control, e.g., GridControl from the Toolbox to the designer.

Customize the control as required; e.g., convert the GridControl.MainView to CardView.


You can also add the CollectionDataSource component from the DX.19.1: XAF Data Sources for Reports toolbox group and then bind the control to this component. Use the DataSourceBase.ObjectTypeName property to specify the required business object type. This will allow you to see the data columns in the designer and customize them as required. Actual data binding will be performed further in code.

Expanded Bind the Control to Data Using Object Space

Close the designer, right-click the UserControl1.cs (UserControl1.vb) file and choose View Code to edit the User Control code. Implement the IComplexControl interface. In the IComplexControl.Setup method, you can access the Object Space using the objectSpace parameter, use the Object Space API to read the required data and then initialize the control's data source. In the IComplexControl.Refresh method (that is executed when a user clicks the Refresh Action), you can recreate the control's data source. The code below demonstrates the collection of DemoTask objects assigned to the GridControl.DataSource property.


You can also use the application parameter to access certain Application Model settings using the XafApplication.Model property and customize the control accordingly.

Expanded Add a ControlViewItem View Item to a View

In the WinForms module project, double-click the Model.DesignedDiffs.xafml file to start the Model Editor. Right-click the Views node and choose Add | DashboardView.

Set the Id property to TaskCardView.

Right-click the Views | TaskCardView | Items node and choose Add... | ControlDetailItem.

Set the Id property to TaskCardView, and the IModelControlDetailItem.ControlTypeName property - to the type of the custom User Control you created (e.g., EFDemo.Module.Win.UserControl1).

Focus the Layout node. Right click the designer surface to the right and choose Customize Layout. Then, right-click the TaskCardView layout item and choose Hide Text.


You can add the ControlViewItem View Item to any existing Detail View or Dashboard View instead of creating a new Dashboard View.

Expanded Create a Navigation Item that Shows the View with the Custom Control

Navigate to the NavigationItems | Items | Default | Items node. Right-click the Items node and select Add… | NavigationItem from the invoked context menu.

For the newly added node, in the IModelNavigationItem.View dropdown list, select the View you created earlier (TaskCardView).

Run the WinForms application and click Task Card View in the navigation. The Card View bound to the DemoTask collection will be displayed (see the image in the beginning of this topic).

Is this topic helpful?​​​​​​​