バンドをカード ビュー モードに設定すると、バンドの各行のデータはカード形式で表示されます。これらのカードは、表示グリッドの行の代わりに、長方形のカードビュー領域に並べられます。バンドの列ヘッダーがカードのラベルになります。カードは"スタック"（つまりカードの列）形式で並べられ、各スタックは１つ以上の"層"（つまり個々のカードの行）から成ります。Style プロパティは、カード ビュー領域内でのカードの配列方法を指定します。
カードの表示スタイルは 3 通りあります。Standard Labelsスタイルは各カードにデータラベルを表示します。カードは列（つまり"スタック"）に並べられ、各列には同じ行（つまり"レベル"）数のカードが含まれます。 各カードの高さは同じです。Merged Labelsスタイルでは、カード領域の左側にラベル用の領域が１つあり、カード自体にはデータのみが表示されます。また、一定数のレベルを持つ同じ高さのカードが対称的に積み重ねられます。
Variable Heightスタイルを使用すると、ラベルは各カードに表示されますが、個々のカードの高さはカードの内容によって異なります。値が空のデータフィールド（データ値がDBNULLか、または文字列フィールドの場合は空の文字列）はカードに表示されません。Variable Height スタイルを使用する場合は、空のフィールドにアクセスできないため、空のフィールドに値を追加できません。
Variable Heightビュースタイルでは、カードの各スタックに含まれるレベルの数が同じにならない場合があり、この場合は他のスタイルとは違ってレベルが行および列に整然と並びません。スタックあたりのレベルの数が可変であるため、プロパティの中には、このスタイルでの適用のされ方が他のスタイルと異なるものがあります。たとえば、MaxCardAreaRows プロパティは表示されるレベルの最大数を決定しますが、これはすべてのフィールドが表示されているカードで構成された理論上のスタックの高さに基づいており、実際に表示されるスタックの高さには基づいていません。
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; }