如何：手动构建受Office启发的用户界面

---

立即下载DevExpress WinForms

本教程演示如何构建一个典型的Office Inspired UI，如下所示。请注意，您还可以使用模板库来构建相同的 UI 类型。

1在 Visual Studio 中，转到“文件 | 新 | 项目”或按CTRL+SHIFT+N创建一个新项目，选择默认的 Visual Studio “Windows 表单应用程序”模板，然后单击“ok”。

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

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

4.使用 Navigation Bar 智能标记将栏切换到Navigation Pane View。

5.将自动创建的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，然后自定义标签标题。在运行时，这些标签将允许您识别导航框架页面。

7.使用 Office 导航栏智能标记删除自动生成的“Item1”和“Item2”元素。

8.将导航栏分配给OfficeNavigationBar.NavigationClient属性来将两个控件绑定在一起，您会注意到该栏现在具有基于现有导航栏组的“员工”和“客户”元素。启动应用程序并单击一个元素以查看相应的组是否已激活。

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.在运行时测试您的应用程序。请注意，默认情况下动画效果是启用的。

11.返回设计时，调用表单智能标记（您可能需要重建项目并重新加载表单才能看到它）并单击“转换为功能区表单”，这会将您的主表单转换为Ribbon Form，也会添加Ribbon和Ribbon Status Bar控件。

12.将带有两个子BarButtonItem 的BarSubItem添加到Ribbon Page Group，最终用户将能够通过单击这些按钮在“员工”和“客户”导航框架页面之间切换。

13.在设计时，双击第一个按钮以创建BarItem.ItemClick事件处理程序。下面的代码示例说明了如何切换活动导航栏组。再加上之前处理的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事件。使用组合框选择与第一个按钮相同的事件处理程序，以便两个子菜单项都起作用。启动应用程序并确保导航框架正确更改其页面。