[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Data Access Layer
   UI Generation
   [Collapse]Building Outlook-Inspired and Hybrid UI Applications
     Lesson 1 - Automatically Generate Outlook-Inspired and Hybrid User Interfaces From Entity Framework
     Lesson 2 - Show Splash Screen on the Start of the Application
     Lesson 3 - Customize Layout of the Collection Views
     Lesson 4 - Show Sparkline Charts in Grid Cells
     Lesson 5 - Use Cards Layout in Collection Views
     Lesson 6 - Use Master-detail Data Representation in Collection Views
     Lesson 7 - Using Conditional Formatting in Grid
     Lesson 8 - Add Advanced End-user Filtering Functionality to Applications
     Lesson 9 - Show Windows 8-style Toast Notifications
     Lesson 10 - Add Windows 7-style Jump List to the Application
     Lesson 11 - Add Custom Actions to Application's Taskbar Thumbnail
   [Expand]Building Office-Inspired Applications
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[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)

Lesson 5 - Use Cards Layout in Collection Views

This lesson describes how to change the data representation mode for Employees modules to cards. You will do this for both projects: DevExpress.OutlookInspiredApp and DevExpress.HybridApp.

Expanded Step 1 - Changing GridControl data representation to CardView

Along with the widely used table data representation, GridControl allows using cards for displaying data. To enable this feature, set the GridControl.View property to CardView. Open the EmployeeCollectionView in the DevExpress.OutlookInspiredApp project, select the GridControl, and convert its view to CardView using the GridControl Customization Panel.

By default, data fields are displayed one under another in cards. You can create your own card layout by setting the CardView.CardTemplate property.

The result is shown in the screenshot below.

Expanded Step 2 - Displaying a Collection of Tasks Assigned to the Employee

In the previous lesson, you displayed the detail collection using the SlideView control. In this step, you will place a control that shows tasks assigned to the selected employee to a separate UserControl.

Select the GridControl and cut it from the design surface using the Ctrl+X key combination or designer context menu. The Instant Layout Assistant will appear over the appropriate area in the designer and will suggest controls that can be used in that area. Clicking one of these controls generates its corresponding code.


You can enable or disable the Instant Layout Assistant via the DEVEXPRESS | WPF Controls v14.2 category in the Visual Studio menu.

Click the Docking item in the Instant Layout Assistant and choose the Simple Layout item.

The following configuration of DockingPanels will be generated.

Delete Panel2, select Panel1 and paste the GridControl (that was cut previously) into it using the Ctrl+V key combination or designer context menu.

Select Panel1 and set its BaseLayoutItem.ShowCaption and ShowBorder properties to false. Do the same for Panel3. Change its BaseLayoutItem.ItemWidth property to 0.5:

Create a user control that will show the detail collection of the assigned task for the selected employee.

Add a new UserControl to the Views/Employee folder and name it EmployeeTasksView. Create the following layout using Toolbox, Property Grid and standard designer functionality, or copy-paste the following XAML into the created file.

This user control does not have the DataContext property set in XAML, because in runtime it is a part of EmployeeCollectionView, and its DataContext is bound to the selected entity. Thus, EmployeePanelView does not need to have its own DataContext in runtime. But it is preferable to have DataContext with an appropriate type assigned to EmployeePanelView in design time. To accomplish this, we use a special property, called d:DataContext.

Set up data bindings. Select ImageEdit and bind its ImageEdit.Source propety to Employee.Picture:

Bind the Text property of two TextBlocks in the StackPanel to Employee.FullName and Employee.Title in the same manner. Then, bind the GridControl's DataControlBase.ItemsSource property to Employee.AssignedTasks.

Expanded Step 3 - Customizing the GridControl

The DueDate property is the most important one for an end-user, so let's mark it in bold. The GridControl component provides powerful Conditional Formatting capabilities, which you can use to accomplish this task.

Select the DueDate column and invoke its context menu, select Conditional Formatting | Hightlight Cell Rules | Custom Condition.

In the invoked Custom Condition editor, set the condition value to True, select the Bold Text format and click OK.

You can also use the TableView.RowDetailsTemplate property to display task descriptions underneath cells in each row. Add the following TableView.RowDetailsTemplate property definition into your EmployeeTasksView.

Build the project. Open the EmployeeCollectionView control in the designer and drop the EmployeeTasksView from the Toolbox to the left layout panel.

Select the dropped user control, open its smart tag and bind the DataContext property to SelectedEntity.

Run the application.

Expanded Step 4 - Using ListView to Display Employees

The MVVM approach allows us to use any controls, including standard controls, in the UI without changing the application logic. In the DevExpress.HybridApp project, you will use the ListView to display the Employees table.

Open the EmployeeCollectionView and run the designer.

Delete the GridControl and drop the standard ListView instead. Using the Smart Tag and Binding Editor, bind its ItemsSource and SelectedItem properties to Entities and SelectedEntity respectively.

To display Employee objects as cards, assign the ItemTemplate property:

To display employee cards horizontally, use WrapPanel as the ItemsPanel template:

Run the application:

Expanded Step 5 - Customizing the ListView Behavior

By default, the Scaffolding Wizard generates an out-of-the-box functionality for collection views that implies opening an editing form when an end-user double-clicks a grid row. Let's implement the same feature for the ListView.

Open the ListView's smart tag, switch to the MVVM Behaviors and Services tab and attach the EventToCommand behavior to the list view.

Using the smart tag, set the EventName property to MouseDoubleClick, bind the Command property to EditCommand and select the ItemsControlMouseEventArgsConverter class as the EventArgsConverter.

Now, a double click on an employee card opens a detail editing form.

It is also necessary to enable scrolling the ListView via the mouse wheel. ListView doesn't support this feature out-of-the-box. The easiest way to implement this feature manually is to subscribe to the PreviewMouseWheel event and perform scrolling:

However, this approach prevents reusing the feature without duplicating the code-behind. Let's create a custom behavior and move the code above into it:

Now, to enable the mouse wheel scrolling feature for a ListView, register the created behavior for this ListView:


The EmployeeCollectionView.xaml file contains the view:StaticFiltersPanel element which will be described in the Lesson 8 - Add Advanced End-user Filtering Functionality to Applications. To use this code, temporarily delete it from XAML.

Expanded Result

Expanded See Also

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