[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
 [Collapse]Controls and Libraries
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
    [Expand]Table View
    [Collapse]Card View
      Cards Layout
      Card Settings
      Expanding and Collapsing Cards
     TreeList View
     Create and Assign Views
   [Expand]Grid View Data Layout
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Filtering and Searching
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus, Navigation, Selection
   [Expand]Conditional Formatting
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  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)

Cards Layout

Expanded Card Arrangement

A Card View can arrange cards in columns or rows. This is specified by the CardView.CardLayout property.

  • Columns Layout

    By default, a Card View arranges cards in columns. The first card is displayed at a View's top-left corner. Subsequent cards are positioned under the previous ones. If a card cannot be placed there without being truncated, it is placed at the top of the next column. Subsequent cards are positioned under this card, etc.

  • Rows Layout

    Cards can also be arranged in rows. In this instance, set the CardView.CardLayout property to CardLayout.Rows. In this case, the first card is displayed at a View's top left corner. Subsequent cards are positioned next to the previous ones. If a card cannot be entirely displayed, it is displayed on the next row, etc.

The maximum number of cards in a row (or column) is specified by the CardView.MaxCardCountInRow property.

Expanded Card Alignment

The alignment of cards is specified by the CardView.CardAlignment property. The table below shows all possible card alignments:

Rows Alignment

Center Far Near

Columns Alignment

Center Far Near

Expanded Card Size

By default, a card's size (its width or height depending on the layout) is automatically calculated to display its content in the optimal way. As a result, different cards can have different sizes. To avoid this, and specify the same size for all cards displayed within a view, use the CardView.FixedSize property. The minimum size to which a card can be resized is specified by the CardView.MinFixedSize property.

An end-user can resize cards by dragging a Card Separator if the CardView.FixedSize property is specified and the CardView.AllowCardResizing property is set to true.

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