如何：使用DevExpress模板庫(kù)構(gòu)建受Office啟發(fā)用戶(hù)界面

---

立即下載DevExpress WinForms

在本教程中，您將使用DevExpress 模板庫(kù)構(gòu)建一個(gè)典型的Office Inspired UI，如下所示。請(qǐng)注意，您還可以手動(dòng)構(gòu)建受 Office 風(fēng)格的 UI。

1.在 Visual Studio 中，轉(zhuǎn)到“File | New | Project或按CTRL+SHIFT+N創(chuàng)建一個(gè)新項(xiàng)目。選擇DevExpress 模板庫(kù)選項(xiàng)并單擊確定。

2.在DevExpress 模板庫(kù)中，選擇“Blank Application”選項(xiàng)并繼續(xù)下一步。

3.所選模板將創(chuàng)建一個(gè)帶有空的可換膚 XtraForm 的項(xiàng)目，并啟用Layout Assistant Extension，打開(kāi)表單的智能標(biāo)記菜單并單擊布局助手操作下的“Predefined Form Templates” 。

4.選擇“Navigation Container”模板（“Office Inspired UI”組）并單擊 Apply。

 5.運(yùn)行應(yīng)用程序并嘗試新創(chuàng)建的 UI。嘗試使用 In-Ribbon Gallery 切換主題，使用 Ribbon 菜單或底部導(dǎo)航控件在模塊之間導(dǎo)航，并注意切換框架時(shí)的動(dòng)畫(huà)效果。

 返回到設(shè)計(jì)時(shí)間并查看模板自動(dòng)應(yīng)用以啟用此 UI 的更改，該表單現(xiàn)在是一個(gè)功能區(qū)表單，上面有一個(gè)RibbonControl和RibbonStatusBar 。在功能區(qū)控件上，SkinRibbonGalleryBarItem 在運(yùn)行時(shí)自動(dòng)創(chuàng)建主題庫(kù)，導(dǎo)航菜單中的項(xiàng)目使用以下代碼更改導(dǎo)航欄的活動(dòng)組。

C#

void barButtonNavigation_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
navBarControl.ActiveGroup = e.Item.Caption == "Employees" ? employeesNavBarGroup : customersNavBarGroup;
}

VB.NET

Private Sub barButtonNavigation_ItemClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.ItemClickEventArgs)
navBarControl.ActiveGroup = If(e.Item.Caption = "Employees", employeesNavBarGroup, customersNavBarGroup)
End Sub 

 OfficeNavigationBar 和 NavBar 控件綁定在一起，因此單擊一個(gè)中的項(xiàng)目會(huì)更改另一個(gè)中的活動(dòng)組。如果活動(dòng)組發(fā)生變化——通過(guò)這種方式或如上所述通過(guò)功能區(qū)事件處理程序——執(zhí)行以下代碼以更改當(dāng)前選定的框架。

C#

void navBarControl_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group);
}

VB.NET

Private Sub navBarControl_ActiveGroupChanged(ByVal sender As Object, ByVal e As DevExpress.XtraNavBar.NavBarGroupEventArgs)
navigationFrame.SelectedPageIndex = navBarControl.Groups.IndexOf(e.Group)
End Sub

 最后，中間有一個(gè)導(dǎo)航框架控件，允許您自定義、添加或刪除單個(gè)框架。請(qǐng)參閱導(dǎo)航框架和選項(xiàng)卡窗格一文，了解如何使用頁(yè)面填充此控件并為它們提供所需的內(nèi)容。