如何:使用DevExpress模板庫構(gòu)建受Office啟發(fā)用戶界面
在本教程中,您將使用DevExpress 模板庫構(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 模板庫選項(xiàng)并單擊確定。
2.在DevExpress 模板庫中,選擇“Blank Application”選項(xiàng)并繼續(xù)下一步。
3.所選模板將創(chuàng)建一個(gè)帶有空的可換膚 XtraForm 的項(xiàng)目,并啟用Layout Assistant Extension,打開表單的智能標(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)畫效果。
返回到設(shè)計(jì)時(shí)間并查看模板自動(dòng)應(yīng)用以啟用此 UI 的更改,該表單現(xiàn)在是一個(gè)功能區(qū)表單,上面有一個(gè)RibbonControl和RibbonStatusBar 。在功能區(qū)控件上,SkinRibbonGalleryBarItem 在運(yùn)行時(shí)自動(dòng)創(chuàng)建主題庫,導(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ā)生變化——通過這種方式或如上所述通過功能區(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)卡窗格一文,了解如何使用頁面填充此控件并為它們提供所需的內(nèi)容。