Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

MaxCardAreaCols Property

Returns or sets the maximum number of cards displayed in the horizontal dimension within the card area.
Syntax
'Declaration
 
Public Property MaxCardAreaCols As Integer
public int MaxCardAreaCols {get; set;}
Remarks

When a band is in card view mode, the MaxCardAreaCols property specifies the maximum number of "stacks" of cards that will be visible in the card area. This property applies to visibility only; it does not limit the number of cards that will be displayed.

The default behavior is to display as many cards as will fit within the width of the card area, based on the width of the cards. So for example, if you have a card area that is wide enough to display six card widths across, and you set MaxCardAreaCols to 4, only 4 cards across will be displayed at one time. You can then scroll horizontally to see more of the cards, but only four "stacks" of cards will be visible at once.

Example
Following code illustrates how to use Card View feature in the UltraGrid. Following code turns on the card-view for the first band. All the descendants of that band will automatically get hidden.

Imports Infragistics.Shared
Imports Infragistics.Win
Imports Infragistics.Win.UltraWinGrid

  Private Sub Button18_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles button18.Click

      ' Following code illustrates how to use Card View feature in the UltraGrid.
      ' Following code turns on the card-view for the first band. All the 
      ' descendants of that band will automatically get hidden.

      ' Get the band that you want in card-view.
      Dim band As UltraGridBand = Me.UltraGrid1.DisplayLayout.Bands(0)

      ' Turn the card-view on for that band. All the descendants of that band 
      ' will automatically get hidden.
      band.CardView = True

      ' Optinally set the style to desired card-view style.
      band.CardSettings.Style = CardStyle.MergedLabels

      ' If desired, further customize the card-view's visual and behavioural aspects.

      ' Set the CaptionField to the key of the column value of which you want 
      ' displayed on captions of rows.
      band.CardSettings.CaptionField = "CustomerID"

      ' Whether to show the caption for each row or not.
      band.CardSettings.ShowCaption = True

      ' Set the LabelWidth to control the width of the label area which is the area
      ' where all the column headers are displayed.
      band.CardSettings.LabelWidth = 120

      ' Whether the user can resize width of the label area.
      band.CardSettings.AllowLabelSizing = False

      ' Set the Width to control the width of the cell area which is the area where 
      ' where all the cells are displayed.
      band.CardSettings.Width = 140

      ' Whether the user is allowed to resize the width of the cell area.
      band.CardSettings.AllowSizing = True

      ' Should card auto-fit, that is occupy the all of the available horizontal space.
      band.CardSettings.AutoFit = False

      ' Number of lines of the card captions. This controls the height of the card 
      ' captions.
      band.CardSettings.CaptionLines = 1

      ' A card row visually contains a whole collection of rows. It typically lays out cards
      ' in a grid-like fashion. By default it tries to fit as may cards as possible within
      ' available width and height. MaxCardAreaCols and MaxCardAreaRows dictate the max number of
      ' columns and rows a card row will display.
      band.CardSettings.MaxCardAreaCols = 4
      band.CardSettings.MaxCardAreaRows = 1

      ' Set the spacing bettween cards in pixel.
      band.Override.CardSpacing = 20

      ' Set various appearance related properties.
      band.Override.BorderStyleCardArea = UIElementBorderStyle.Raised

      ' CardAreaAppearance applies to the whole card area.
      band.Override.CardAreaAppearance.BackColor = Color.LightGray

      ' SelectedCardCaptionAppearance appearance applies to the card captions of selected 
      ' cards in card-view.
      band.Override.SelectedCardCaptionAppearance.BackColor = Color.Green
      band.Override.SelectedCardCaptionAppearance.ForeColor = Color.White

      ' ActiveCardCaptionAppearance appearance applies to the card caption of the active
      ' card in card-view. 
      band.Override.ActiveCardCaptionAppearance.BackColor = Color.Red
      band.Override.ActiveCardCaptionAppearance.ForeColor = Color.LightYellow

      ' Also various appearance and border related properties used for setting up objects like
      ' cells, rows, headers in non-card view also apply in card-view. 

      ' BorderStyleRow sets the border style of cards.
      band.Override.BorderStyleRow = UIElementBorderStyle.Raised

      ' BorderStyleCell applies to cells in the cards.
      band.Override.BorderStyleCell = UIElementBorderStyle.Inset

      ' BorderStyleHeader applies to column captions in the card.
      band.Override.BorderStyleHeader = UIElementBorderStyle.Raised

      ' CellAppearance applies to cells in the cards.
      band.Override.CellAppearance.BackColor = Color.LightYellow

      ' HeaderAppearance applies to column captions in the card.
      band.Override.HeaderAppearance.FontData.Bold = DefaultableBoolean.True

  End Sub
using Infragistics.Shared;
using Infragistics.Win;
using Infragistics.Win.UltraWinGrid;
using System.Diagnostics;

private void button18_Click(object sender, System.EventArgs e)
{

	// Following code illustrates how to use Card View feature in the UltraGrid.
	// Following code turns on the card-view for the first band. All the 
	// descendants of that band will automatically get hidden.

	// Get the band that you want in card-view.
	UltraGridBand band = this.ultraGrid1.DisplayLayout.Bands[0];

	// Turn the card-view on for that band. All the descendants of that band 
	// will automatically get hidden.
	band.CardView = true;
          
	// Optinally set the style to desired card-view style.
	band.CardSettings.Style = CardStyle.MergedLabels;

	// If desired, further customize the card-view's visual and behavioural aspects.

	// Set the CaptionField to the key of the column value of which you want 
	// displayed on captions of rows.
	band.CardSettings.CaptionField = "CustomerID";

	// Whether to show the caption for each row or not.
	band.CardSettings.ShowCaption = true;			

	// Set the LabelWidth to control the width of the label area which is the area
	// where all the column headers are displayed.
	band.CardSettings.LabelWidth = 120;
	
	// Whether the user can resize width of the label area.
	band.CardSettings.AllowLabelSizing = false;

	// Set the Width to control the width of the cell area which is the area where 
	// where all the cells are displayed.
	band.CardSettings.Width = 140;
	
	// Whether the user is allowed to resize the width of the cell area.
	band.CardSettings.AllowSizing = true;

	// Should card auto-fit, that is occupy the all of the available horizontal space.
	band.CardSettings.AutoFit = false;

	// Number of lines of the card captions. This controls the height of the card 
	// captions.
	band.CardSettings.CaptionLines = 1;

	// A card row visually contains a whole collection of rows. It typically lays out cards
	// in a grid-like fashion. By default it tries to fit as may cards as possible within
	// available width and height. MaxCardAreaCols and MaxCardAreaRows dictate the max number of
	// columns and rows a card row will display.
	band.CardSettings.MaxCardAreaCols = 4;
	band.CardSettings.MaxCardAreaRows = 1;

	// Set the spacing bettween cards in pixel.
	band.Override.CardSpacing = 20;

	// Set various appearance related properties.
	band.Override.BorderStyleCardArea = UIElementBorderStyle.Raised;

	// CardAreaAppearance applies to the whole card area.
	band.Override.CardAreaAppearance.BackColor = Color.LightGray;

	// SelectedCardCaptionAppearance appearance applies to the card captions of selected 
	// cards in card-view.
	band.Override.SelectedCardCaptionAppearance.BackColor = Color.Green;
	band.Override.SelectedCardCaptionAppearance.ForeColor = Color.White;

	// ActiveCardCaptionAppearance appearance applies to the card caption of the active
	// card in card-view. 
	band.Override.ActiveCardCaptionAppearance.BackColor = Color.Red;
	band.Override.ActiveCardCaptionAppearance.ForeColor = Color.LightYellow;

	// Also various appearance and border related properties used for setting up objects like
	// cells, rows, headers in non-card view also apply in card-view. 
	
	// BorderStyleRow sets the border style of cards.
	band.Override.BorderStyleRow = UIElementBorderStyle.Raised;

	// BorderStyleCell applies to cells in the cards.
	band.Override.BorderStyleCell = UIElementBorderStyle.Inset;

	// BorderStyleHeader applies to column captions in the card.
	band.Override.BorderStyleHeader = UIElementBorderStyle.Raised;

	// CellAppearance applies to cells in the cards.
	band.Override.CellAppearance.BackColor = Color.LightYellow;

	// HeaderAppearance applies to column captions in the card.
	band.Override.HeaderAppearance.FontData.Bold = DefaultableBoolean.True;

}
Requirements

Target Platforms: Windows 10, Windows 8.1, Windows 8, Windows 7, Windows Server 2012, Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

See Also