[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
   [Expand]Building Outlook-Inspired and Hybrid UI Applications
   [Collapse]Building Office-Inspired Applications
     Lesson 1 - Scaffolding
     Lesson 2 - Creating a Table View
     Lesson 3 - Creating a Card View
     Lesson 4 - Creating a Main View
  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 3 - Creating a Card View

Expanded Step 1 - Creating a new View and adding a RibbonControl

The ContactCollectionCardView is created in the same way that you created the ContactCollectionTableView in the previous lesson. Right-click the project in the Solution Explorer and select Add DevExpress Item | New Item, to invoke the DevExpress Template Gallery. Select the View (Blank User Control) template, and specify the name as ContactCollectionCardView.

Assign the ViewModel.

Add a RibbonControl (as you did in ContactCollectionTableView) and define the following BarButtonItems within it: Refresh, Find and Delete.

Expanded Step 2 - Adding a GridControl with Cards

Add a GridControl with a CardView to the form using the Instant Layout Assistant, bind the ItemsSource and SelectedItem properties, generate columns, and set the AutoGenerateColumns property to None.

Remove the unnecessary columns and change the column order by drag-and-drop.

Next, customize the Photo column and set the initial sort order.

Bind the grid's DataControlBase.ShowLoadingPanel property to IsLoading, so the Loading Panel is shown only while waiting for the callback response.

Customize the CardView element in the following manner.

Add the created View to the MainWindow and run the application to see the results.

Expanded Step 3 - Implementing Interaction

The process for implementing interaction is the same as for the ContactCollectionTableView. The code below binds the Refresh, Find, and Delete bar items and adds two EventToCommands, to enable data saving and row updating. It also adds the DXMessageBoxService to the View.

Expanded See Also

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