カード ビュー モードは、従来の行と列の代わりに、一連のノート カードとしてデータ行を表すバンドの表示スタイルです。このビュー スタイルは、Microsoft Outlook の連絡先セクションのカード表示スタイルに似ています。カード ビュー モードは、カードを含むカード ビュー領域で、子バンドの行と列を置き換えます。カード ビュー領域は、バンド内のデータによって必要とされる数のカードだけカードを表示するために水平にスクロールします。
カード ビュー モードには、カードが表示する方法を制御する多数の選択肢があります。カードにラベルを表示する、カード ビュー領域のサイズを制御する、カードの配列方法に関するガイドラインを設定する、データ フィールド ラベル（列ヘッダーに似ている）の表示方法を選択することができます。バンドに関連付けられた CardSettings オブジェクトのプロパティを操作することによって、これらのオプションは設定されます。
バンドがカード ビュー モードのときに、そのバンドの子は表示されないことに注意してください。カード ビューでは、子バンドを表示するための効果的なインターフェイスはありません。したがって、子バンドの表示は無効です。子バンドはそのまま存在することもできますが、子バンドはコントロールによって表示できません。
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; }