Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Collapse]View Technology
    [Expand]Banded Grid Views
    [Collapse]Card View
      Card View
      Card Settings
      Card Layout
      Card Auto Width
    [Expand]Layout View
    [Expand]Tile View
    [Expand]WinExplorer View
     View Hierarchy
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Card Layout

This topic provides information about card layout within Card Views. Here we consider the general card arrangement mechanism and the properties controlling the layout and size of cards. Additionally, refer to the Card Auto Width topic for the description of a Card View's auto width feature.

Expanded General Card Arrangement Mechanism

Card Views arrange their cards in columns. The first card is displayed at a View's top-left corner. Succeeding cards are positioned under the previous ones. If a card cannot be placed there without being truncated vertically, it is placed at the top of the next column. Subsequent cards are positioned under this card, etc. Horizontal and vertical intervals between cards are controlled by the CardView.CardInterval View property. Card width is specified by the CardView.CardWidth property. Card height depends on the card content.

As stated above, the number of cards in each card column depends on how many cards can fit into a View vertically. This default behavior occurs when the CardView.MaximumCardRows property value is -1. If this property is set to a positive integer, its value specifies the maximum number of cards to be displayed in each column. The image below shows the default card layout and the effect of setting the CardView.MaximumCardRows property to 2.

You can also limit the number of card columns displayed within a View. This is done using the CardView.MaximumCardColumns property. The following image shows the default card layout when the CardView.MaximumCardColumns property value is 2.


The CardView.MaximumCardColumns property is most often used when the auto width feature is enabled. Please refer to the Card Auto Width topic for details.

Expanded Variable Card Height

There are two occasions when cards can have different heights. The first is when the CardOptionsView.ShowEmptyFields option is disabled. In this case, fields with null (Nothing in Visual Basic) values are not displayed within cards. Thus, cards can contain a different number of fields. If the CardView.MaximumCardRows property value is -1, this may result in the display of a different number of cards in each column. See the image below.

Cards can also have different heights when the CardOptionsBehavior.FieldAutoHeight option is enabled. This option only effects fields that use the MemoEdit or the PictureEdit editor to display and edit cell values. These fields have their heights calculated automatically, based on the editor content. See the image below.

When using a MemoEdit in-place editor, ensure that the editor's text wrapping feature is enabled (it is enabled by default). See the TextOptions.WordWrap option accessible via the editor's RepositoryItem.Appearance object.

You can manually set the height for individual card fields by handling the CardView.CalcFieldHeight event.

Expanded See Also

How would you rate this topic?​​​​​​​