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 Auto Width

This topic describes the auto width feature provided by Card Views. This feature allows you to display cards so that none are partially displayed, i.e. all cards occupy the same width. Note that the general card layout rules still remain in effect. Please refer to the Card Layout topic for details.

Expanded The Auto Width Feature Overview

Auto width is enabled by setting the CardOptionsBehavior.AutoHorzWidth option to true. By default, a single card column is displayed. Cards are resized horizontally to fit inside a View's visible area. This means that the CardView.CardWidth property is ignored while auto width is enabled. If the View is resized, cards are resized as well. Note that resizing doesn't change the width of card field captions. Resizing is performed by changing the data cells' width.

The image below illustrates an example in which enabling auto width increases the card width.

You can also display several card columns with auto width feature enabled. Use the CardView.MaximumCardColumns property to select the number of columns to display. Again, cards are resized to fit the View horizontally. Thus, no card is truncated.

The image below shows the same View as the previous example, but with the CardView.MaximumCardColumns property set to 3.

When disabling the auto width feature, the card width is restored and the CardView.CardWidth property takes effect.

Expanded See Also

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