DevExpress WinForms擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

在本教程中，您將學習如何使用DevExpress WinForms在代碼中創建帶狀和高級帶狀布局。首先將主視圖切換到所需的類型，然后您將創建第一級帶狀和子帶狀來創建層次結構。初始化帶狀之后，將創建列并將它們鏈接到父帶狀，最后您將切換到高級帶狀網格視圖，把列移動到第二行，并讓列標題填充它們下面的空白空間。

獲取DevExpress WinForms 正式版下載

DevExpress技術交流群11：749942875      歡迎一起進群討論

開始

從一個綁定到Car數據庫的Grid Control應用程序開始。

切換到帶狀網格視圖

Ribbon控件中的Create Banded Layout按鈕將啟動把布局切換到帶狀視圖的代碼，在Click事件處理程序中，創建一個實例，禁用其選項，并將結果對象分配給網格的 屬性。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// Switch to the Banded Grid View.
BandedGridView view = new BandedGridView();
view.OptionsBehavior.AutoPopulateColumns = false;
gridControl1.MainView = view;
}

運行應用程序并單擊Create Banded Layout按鈕，布局切換了，但是新創建的View是空的，因為禁用了自動列生成。

創建頂級Bands

關閉應用程序并返回處理程序代碼，創建實例，在頂層分層級別添加Main、Performance Attributes和Notes band，將對象添加到視圖的集合中。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// ...
// Create top-level bands.
GridBand bandMain = new GridBand() { Name = "bandMain", Caption = "Main" };
GridBand bandPerformanceAttributes = new GridBand() { Name = "bandPerformance", Caption = "Performance Attributes" };
GridBand bandNotes = new GridBand() { Name = "bandNotes", Caption = "Notes" };
view.Bands.AddRange(new GridBand[] { bandMain, bandPerformanceAttributes, bandNotes });
}

運行應用程序，單擊按鈕，現在視圖將顯示bands。

創建嵌套Bands

這一次，創建嵌套bands，為此創建新的band對象并將它們添加到主band的集合中。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// ...
// Create nested bands.
GridBand bandModel = new GridBand { Name = "bandModel", Caption = "Model" };
GridBand bandPrice = new GridBand { Name = "bandPrice", Caption = "Price" };
bandMain.Children.AddRange(new GridBand[] { bandModel, bandPrice });
}

運行應用程序并單擊按鈕來查看新的分層band結構。

創建帶狀列

返回到單擊處理程序代碼并創建由對象表示的列，初始化它們的屬性并使它們可見，將創建的列添加到視圖的集合中。

使用屬性將Price列值格式化為貨幣。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// ...
// Create banded grid columns and make them visible.
BandedGridColumn colTrademark = new BandedGridColumn() { Name = "colTrademark", FieldName = "Trademark", Visible = true };
BandedGridColumn colModel = new BandedGridColumn() { Name = "colModel", FieldName = "Model", Visible = true };
BandedGridColumn colCategory = new BandedGridColumn() { Name = "colCategory", FieldName = "Category", Visible = true };
BandedGridColumn colPrice = new BandedGridColumn() { Name = "colPrice", FieldName = "Price", Visible = true };
BandedGridColumn colHP = new BandedGridColumn() { Name = "colHP", FieldName = "HP", Visible = true };
BandedGridColumn colLiter = new BandedGridColumn() { Name = "colLiter", FieldName = "Liter", Visible = true };
BandedGridColumn colCyl = new BandedGridColumn() { Name = "colCyl", FieldName = "Cyl", Visible = true };
BandedGridColumn colDescription = new BandedGridColumn() { Name = "colDescription", FieldName = "Description", Visible = true };
BandedGridColumn colPicture = new BandedGridColumn() { Name = "colPicture", FieldName = "Picture", Visible = true };
view.Columns.AddRange(new BandedGridColumn[] { colTrademark, colModel, colCategory, colPrice, colHP, colLiter, colCyl, colDescription, colPicture });

// Format the Price column values as currency.
colPrice.DisplayFormat.FormatType = DevExpress.Utils.FormatType.Numeric;
colPrice.DisplayFormat.FormatString = "c2";
}

運行應用程序并再次點擊按鈕，列沒有顯示在視圖中，這是因為它們還沒有鏈接到bands 。

為Bands分配列

要將列添加到Bands中，請設置列的屬性。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// ...
// Assign columns to bands.
colTrademark.OwnerBand = bandModel;
colModel.OwnerBand = bandModel;
colCategory.OwnerBand = bandModel;
colPrice.OwnerBand = bandPrice;
colHP.OwnerBand = bandPerformanceAttributes;
colLiter.OwnerBand = bandPerformanceAttributes;
colCyl.OwnerBand = bandPerformanceAttributes;
colDescription.OwnerBand = bandNotes;
colPicture.OwnerBand = bandNotes;
}

運行應用程序，單擊按鈕，可以看到列現在在相應的bands下可見。

切換到高級帶狀網格視圖

返回代碼并修改處理程序，使其創建高級帶狀網格視圖替代標準帶狀網格視圖，只需為視圖使用一個不同的類，其余的代碼將繼續工作。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// Switch to the Advanced Banded Grid View.
AdvBandedGridView view = new AdvBandedGridView();
view.OptionsBehavior.AutoPopulateColumns = false;
gridControl1.MainView = view;
// ...
}

運行應用程序，布局和以前一樣，只是列的自動寬度功能現在被禁用了。

將列排列成多行

關閉應用程序并將列標題排列到多行中，要在父bands內的其他列下顯示Category和Liter列，請將它們的 屬性設置為1。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// ...
// Set the vertical position of column headers.
colCategory.RowIndex = 1;
colLiter.RowIndex = 1;
}

再次運行應用程序，可以看到更改，但是現在在某些列標題下出現了空格。

自動拉伸列標題

要自動修改列標題的高度來填充空白空間，請啟用它們的選項。

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemCl
// ...
// Stretch columns to fit empty spaces below them.
colPrice.AutoFillDown = true;
colDescription.AutoFillDown = true;
colPicture.AutoFillDown = true;
}

運行應用程序并再次單擊Create Banded Layout按鈕來查看最終結果。

完整代碼

C#

private void btnCreateBandedLayout_ItemClick(object sender, ItemClickEventArgs e) {
// Switch to the Advanced Banded Grid View.
AdvBandedGridView view = new AdvBandedGridView();
view.OptionsBehavior.AutoPopulateColumns = false;
gridControl1.MainView = view;

// Create top-level bands.
GridBand bandMain = new GridBand() { Name = "bandMain", Caption = "Main" };
GridBand bandPerformanceAttributes = new GridBand() { Name = "bandPerformance", Caption = "Performance Attributes" };
GridBand bandNotes = new GridBand() { Name = "bandNotes", Caption = "Notes" };
view.Bands.AddRange(new GridBand[] { bandMain, bandPerformanceAttributes, bandNotes });

// Create nested bands.
GridBand bandModel = new GridBand { Name = "bandModel", Caption = "Model" };
GridBand bandPrice = new GridBand { Name = "bandPrice", Caption = "Price" };
bandMain.Children.AddRange(new GridBand[] { bandModel, bandPrice });

// Create banded grid columns and make them visible.
BandedGridColumn colTrademark = new BandedGridColumn() { Name = "colTrademark", FieldName = "Trademark", Visible = true };
BandedGridColumn colModel = new BandedGridColumn() { Name = "colModel", FieldName = "Model", Visible = true };
BandedGridColumn colCategory = new BandedGridColumn() { Name = "colCategory", FieldName = "Category", Visible = true };
BandedGridColumn colPrice = new BandedGridColumn() { Name = "colPrice", FieldName = "Price", Visible = true };
BandedGridColumn colHP = new BandedGridColumn() { Name = "colHP", FieldName = "HP", Visible = true };
BandedGridColumn colLiter = new BandedGridColumn() { Name = "colLiter", FieldName = "Liter", Visible = true };
BandedGridColumn colCyl = new BandedGridColumn() { Name = "colCyl", FieldName = "Cyl", Visible = true };
BandedGridColumn colDescription = new BandedGridColumn() { Name = "colDescription", FieldName = "Description", Visible = true };
BandedGridColumn colPicture = new BandedGridColumn() { Name = "colPicture", FieldName = "Picture", Visible = true };
view.Columns.AddRange(new BandedGridColumn[] { colTrademark, colModel, colCategory, colPrice, colHP, colLiter, colCyl, colDescription, colPicture });

// Format the Price column values as currency.
colPrice.DisplayFormat.FormatType = DevExpress.Utils.FormatType.Numeric;
colPrice.DisplayFormat.FormatString = "c2";

// Assign columns to bands.
colTrademark.OwnerBand = bandModel;
colModel.OwnerBand = bandModel;
colCategory.OwnerBand = bandModel;
colPrice.OwnerBand = bandPrice;
colHP.OwnerBand = bandPerformanceAttributes;
colLiter.OwnerBand = bandPerformanceAttributes;
colCyl.OwnerBand = bandPerformanceAttributes;
colDescription.OwnerBand = bandNotes;
colPicture.OwnerBand = bandNotes;

// Set the vertical position of column headers.
colCategory.RowIndex = 1;
colLiter.RowIndex = 1;

// Stretch columns to fit empty spaces below them.
colPrice.AutoFillDown = true;
colDescription.AutoFillDown = true;
colPicture.AutoFillDown = true;
}

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是DevExpress的中國區的合作伙伴，DevExpress作為用戶界面領域的優秀產品，幫助企業高效構建權限管理、數據可視化（如網格/圖表/儀表盤）、跨平臺系統（WinForms/ASP.NET/.NET MAUI）及行業定制解決方案，加速開發并強化交互體驗。