如何：手動構(gòu)建受Office啟發(fā)的用戶界面

---

立即下載DevExpress WinForms

本教程演示如何構(gòu)建一個典型的Office Inspired UI，如下所示。請注意，您還可以使用模板庫來構(gòu)建相同的 UI 類型。

1在 Visual Studio 中，轉(zhuǎn)到“文件 | 新 | 項目”或按CTRL+SHIFT+N創(chuàng)建一個新項目，選擇默認的 Visual Studio “Windows 表單應(yīng)用程序”模板，然后單擊“ok”。

2.使用 Visual Studio 工具箱將Navigation Frame、Navigation Bar和Office Navigation Bar控件添加到您表單中。

3.如下圖所示排列控件。

4.使用 Navigation Bar 智能標記將欄切換到Navigation Pane View。

5.將自動創(chuàng)建的NavBarGroup和NavigationPage控件的標題更改為“Employees”和“Customers”。將相同的文本字符串分配給兩個頁面的Tag屬性，如下面的代碼所示。

C#

navigationPage1.Tag = navBarGroup1.Caption = navigationPage1.Caption = "Employees";
navigationPage2.Tag = navBarGroup2.Caption = navigationPage2.Caption = "Customers";

VB.NET

navigationPage1.Caption = "Employees"
navBarGroup1.Caption = "Employees"
navigationPage1.Tag = "Employees"
navigationPage2.Caption = "Customers"
navBarGroup2.Caption = "Customers"
navigationPage2.Tag = "Customers"

6.單擊 Navigation Frame 的 V 形按鈕以選擇不同的頁面并在每個頁面上放置一個LabelControl，然后自定義標簽標題。在運行時，這些標簽將允許您識別導(dǎo)航框架頁面。

7.使用 Office 導(dǎo)航欄智能標記刪除自動生成的“Item1”和“Item2”元素。

8.將導(dǎo)航欄分配給OfficeNavigationBar.NavigationClient屬性來將兩個控件綁定在一起，您會注意到該欄現(xiàn)在具有基于現(xiàn)有導(dǎo)航欄組的“員工”和“客戶”元素。啟動應(yīng)用程序并單擊一個元素以查看相應(yīng)的組是否已激活。

9.處理NavBarControl.ActiveGroupChanged事件來切換選中的 Frame 頁面，下面的代碼使用頁面標簽來查找所需的頁面。

C#

private void navBarControl1_ActiveGroupChanged(object sender, DevExpress.XtraNavBar.NavBarGroupEventArgs e) {
    navigationFrame1.SelectedPage = (NavigationPage)navigationFrame1.Pages.FindFirst(x => (string)x.Tag == e.Group.Caption);
}

VB.NET

Private Sub navBarControl1_ActiveGroupChanged(ByVal sender As Object, ByVal e As DevExpress.XtraNavBar.NavBarGroupEventArgs)
    navigationFrame1.SelectedPage = CType(navigationFrame1.Pages.FindFirst(Function(x) CStr(x.Tag) = e.Group.Caption), NavigationPage)
End Sub

10.在運行時測試您的應(yīng)用程序。請注意，默認情況下動畫效果是啟用的。

11.返回設(shè)計時，調(diào)用表單智能標記（您可能需要重建項目并重新加載表單才能看到它）并單擊“轉(zhuǎn)換為功能區(qū)表單”，這會將您的主表單轉(zhuǎn)換為Ribbon Form，也會添加Ribbon和Ribbon Status Bar控件。

12.將帶有兩個子BarButtonItem 的BarSubItem添加到Ribbon Page Group，最終用戶將能夠通過單擊這些按鈕在“員工”和“客戶”導(dǎo)航框架頁面之間切換。

13.在設(shè)計時，雙擊第一個按鈕以創(chuàng)建BarItem.ItemClick事件處理程序。下面的代碼示例說明了如何切換活動導(dǎo)航欄組。再加上之前處理的NavBarControl.ActiveGroupChanged事件，這個按鈕也改變了 Navigation Frame 頁面。

C#

private void barButtonItem1_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e) {
    navBarControl1.ActiveGroup = navBarControl1.Groups.First(x => x.Caption == e.Link.Caption);
}

VB.NET

Private Sub barButtonItem1_ItemClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.ItemClickEventArgs)
navBarControl1.ActiveGroup = navBarControl1.Groups.First(Function(x) x.Caption = e.Link.Caption)
End Sub

14.選擇第二個BarButtonItem并在 Visual Studio 屬性窗口中找到ItemClick事件。使用組合框選擇與第一個按鈕相同的事件處理程序，以便兩個子菜單項都起作用。啟動應(yīng)用程序并確保導(dǎo)航框架正確更改其頁面。