如何为您的应用程序构建 RibbonBar

这是为CodeProject的赞助商提供的展示评论。这些评论旨在为您提供我们认为对开发人员有用且有价值的产品和服务信息。

引言

本文将讨论Ribbon界面，并讨论在您的应用程序中有效使用r.a.d.ribbonbar的技巧。首先，本文将讨论Ribbon界面：Ribbon的简史，为什么Ribbon是应用程序的有效界面，以及构成Ribbon的元素。接下来，本文将着重介绍使用Ribbon界面创建有效界面的策略。

什么是Ribbon？

对于Microsoft Office 2007，Microsoft的UI工程师创建了一个新界面来替换大多数Office应用程序中现有的菜单结构；Outlook在主Outlook应用程序中仍使用旧的菜单结构，但在用户撰写电子邮件时使用新界面。这种新界面可以大大减少鼠标点击次数，并且是使鼠标使用更有效的研究结果。telerik的r.a.d.ribbonbar是一个第三方控件，可让您构建自己的Ribbon界面。

r.a.d.ribbonbar实际上是一个单一的控件区域，由许多控件组成。

图1.RibbonBar的结构

左上角是“开始”菜单，类似于Windows的“开始”菜单，用于放置最常用的选项（例如“保存”或“另存为”功能）。“开始”菜单还可以包含分隔符、组合框和程序员创建的项目。

“开始”菜单的右侧是“快速访问工具栏”，通常包含许多图标，这些图标实际上是常用功能的菜单项（保存、撤销或打开是一些可以从此区域启动的示例）。与“开始”菜单一样，它还可以包含分隔符、组合框和程序员创建的项目。

“快速访问工具栏”正下方是“选项卡”。每个“选项卡”都打开一组“块”（Chunks），这些块是包含其他控件的区域。开发人员通常将相关功能分组在一个“块”中。例如，您可能有一个名为“插入”的选项卡组，其中包含一个用于将各种图形对象（如图像或形状）插入文档的“块”。“块”控件是其他控件的容器，可以包括水平按钮组、垂直按钮组、组合框、复选框控件、下拉按钮、拆分按钮、重复按钮、切换按钮和复选框按钮。水平按钮组和垂直按钮组是用于对控件进行分组的布局控件，使您能够制作具有不同大小元素（行和列）的UI。

下拉按钮和拆分按钮单击时都会显示一个菜单，但拆分按钮包含一个用于选择默认项的选项，当用户单击拆分按钮时，其Click事件会触发。重复按钮是一个特殊的按钮，当用户按住鼠标时（保持按钮按下状态），它会重复Click事件。复选框按钮提供了一个按钮，通过在项目“开启”时显示选项旁边的复选框来表示两种不同的状态。相比之下，切换按钮也表示多种状态，但按钮的整个视觉表示可以更改以指示当前状态。

使用r.a.d.ribbonbar创建有效的Ribbon UI的技巧

设计一个有效的Ribbon就像设计一个带有工具栏的菜单。您将经历许多相同的步骤，但还需要一些额外的步骤才能使用Ribbon创建有效的界面。

在继续之前，我将描述一个虚构应用程序的功能，然后我将使用这个虚构应用程序为您提供一种实际方法来查看如何应用这些概念。示例应用程序是一个简单的博客编辑器，它具有文字处理器的主要功能；它具有拼写检查器、粗体和斜体等格式设置功能，以及与博客发布相关的功能，例如博客类别、标签和将帖子发布到博客服务器。

步骤1：分解您的功能/特性（按类别）

首先，您将列出要向最终用户公开的功能和特性，并在每个功能旁边放置类别。为了说明，我将使用一个具有五列的表格格式。我认为最好先列出功能和特性，然后再对它们进行分类，以防您在写下所有类别后又想起来。我将在接下来的两个步骤中介绍其他列。

以下是博客发布应用程序某些功能的示例表

功能/特性	类别
插入图片	Insert
粗体文本	样式
斜体文本	样式
下划线文本	样式
字体名称	字体
字体大小	字体
拼写检查器	语法工具
语法检查器	语法工具
保存到文件系统	文件操作
发布到博客	文件操作
管理博客类别	博客类别
应用博客类别	博客类别
管理常用标签	标签
应用常用标签	标签
插入自定义标签	标签
字体颜色	字体
从本地机器打开	文件操作
打开之前发布的文档	文件操作
设置附件	博客文档设置
插入表格	Insert
复制	剪贴板
粘贴	剪贴板
剪切	剪贴板

表1：UI设计表 第1步

您可能会得出结论，步骤1中的列表似乎没有条理。这是正常的，因为您在列出功能时可能会忘记一些功能，然后在稍后想起它们。不用担心。只需列出您希望向最终用户公开的所有功能即可。

您接下来会注意到的是，有些看似相关但却不在同一类别中的项。例如，“字体名称”和“插入表格”似乎相关，因为它们都是格式设置功能；然而，它们实际上并没有那么紧密地相关，以至于您在设计界面时总是将它们放在同一个菜单中或工具栏上的紧挨着的位置。您的目标是尽可能多地创建类别，以便将紧密相关的功能分组在一起。

如果您错过了几个功能，也不要担心。当您发现遗漏的内容时，您将确切地知道该项应放置在UI的何处，或者您需要将其添加到您正在构建的表中（取决于您在流程中的位置）。

步骤2：确定功能类型，并记录常用功能

在步骤2中，您将把您的类别分组为“功能类型”。例如，“字体”、“插入”和“格式设置”类别最终都将归入同一功能类型。这些类型最终将成为Ribbon UI中的选项卡。

在此步骤中，您还应该注意那些非常常用且应快速提供给用户使用的功能。

表2显示了带有后续两列填充的示例应用程序。

功能名称	类别	功能类型	常用？
插入图片	Insert	文档
粗体文本	样式	文档
斜体文本	样式	文档
下划线文本	样式	文档
字体名称	字体	文档
字体大小	字体	文档
拼写检查	语法工具	文档
语法检查	语法工具	文档
保存到文件系统	文件操作	文件	**
发布到博客	文件操作	文件	*
管理博客类别	博客类别	博客
应用博客类别	博客类别	博客
管理常用标签	标签	博客
应用常用标签	标签	博客
插入自定义标签	标签	博客
字体颜色	字体	文档
从本地机器打开	文件操作	文件	**
打开之前发布的文档	文件操作	文件	*
设置附件	博客文档设置	博客
插入表格	Insert	文档
复制	剪贴板	文档	**
粘贴	剪贴板	文档	**
剪切	剪贴板	文档

表2：UI设计表 第2步

我为这个示例应用程序确定了三个功能类型：博客、文档和文件。我还确定了六个常用功能，其中四个功能非常常用（用双星号表示）。我将在下一步（以及表中的最后一列）中使用此信息。

步骤3：确定每个项目在Ribbon UI中的位置

此时，应该很容易确定项目在界面中的位置。每个功能类型都应该有一个选项卡，每个类别都应该有一个块。如果您在一个块中有太多项目，您可以随时将该类别中的项目分解成多个类别。对于您想放入选项卡中的元素数量，实际上没有最大值或最小值，因为空间会根据您使用的布局控件类型向右或向下扩展。请注意，文件功能类型中的所有项目似乎都是常用功能。我将把这些项目放在“开始”菜单中，而不是它们自己的“选项卡/块”结构中。最后，我在示例应用程序中确定了四个项目为非常常用的功能；我将在“快速访问工具栏”上放置按钮，以便用户始终可以访问它们。我将在表中的最后一列中放入此信息，然后继续下一步。

有关示例应用程序的完整表格，请参阅附录A。

下载telerik radControls for WinForms（包括r.a.d.ribbonbar）的完整功能试用版

步骤4：创建您的界面

选项卡/块

1. 在Visual Studio 2005中，创建一个新的Windows Forms项目（或使用现有项目，其中包含新窗体或现有窗体）。
2. 将标准的ImageList（ImageList）拖到您的窗体上，并添加标准的图标用于复制、粘贴、剪切、粗体、斜体、下划线，或您按钮/菜单所需的任何图标。
3. 接下来，从工具箱将一个radRibbonBar拖到您的窗体上（它会自动停靠在应用程序窗口的顶部）。将radRibbonBar的ImageList属性指向您在步骤2中创建的ImageList。
4. 单击“添加新选项卡”（Add New Tab），输入您想要的标题，然后按Enter键（每个选项卡重复此操作）。对于示例应用程序，您将创建一个“博客”选项卡和一个“文档”选项卡。
5. 在示例应用程序中单击“博客”选项卡，将打开“块”区域。
6. 为每个类别创建一个新的“块”，因此对于示例应用程序的“博客”选项卡，将有三个“块”：“类别”、“标签”和“设置”。
7. 单击第一个“块”，将其Text属性更改为“类别”。（您可能还想将（name）属性更改为类似CategoriesChunk或ChunkCategories的内容。）使用各自的名称对其他两个“块”重复此操作。Visual Studio 2005中窗体的UI应该看起来像这样
   
   

   图1：步骤7后Visual Studio 2005中的示例应用UI设计

8. 接下来，向每个“块”添加控件。按照以下步骤为示例应用程序的“类别”选项卡操作
   1. 通过右键单击“块”，选择“添加项”（Add an Item）子菜单，然后选择“垂直按钮组”（Vertical Button Group）项，来添加一个垂直按钮组。
   2. 通过右键单击垂直按钮组，选择“添加项”子菜单，然后选择“RadButtonElement”项，来添加RadButtonElement。
   3. 更改新的RadButtonElement的属性如下
      
      1. （name）→ ManageCategoriesButton
      2. （optional）ImageIndex → [您在ImageList中适用于此项目的图标]
      3. Text → Manage Categories
      4. TextAlignment → MiddleRight
      5. TextImageRelation → ImageBeforeText
   4. 在“管理类别”按钮下添加一个RadDropDownButton，方法是右键单击“管理类别”按钮，选择“插入相邻”（Insert Adjacent）子菜单，然后选择“RadDropDownButton”项。
   5. 更改新的RadDropDownButton的属性如下
      
      1. （name）→ CategoriesDDButton
      2. （optional）ImageIndex → [您在ImageList中适用于此项目的图标]
      3. Text → Categories
      4. TextAlignment → MiddleRight
      5. TextImageRelation → ImageBeforeText
      6. 注意：您可以通过使用Items属性向此RadDropDownButton添加项，但这种类型的特性通常会以编程方式从博客服务器获取类别列表。
      7. 如果您的项目顺序出错，您只需拖动一个元素，直到它位于另一个元素的上方或下方，该元素将推开其他元素或向下移动，为拖放的元素腾出空间。
   6. 此时您的UI看起来会像这样
      
      

      图2：步骤8后Visual Studio 2005中的示例应用UI设计

9. 对“博客”选项卡中的其他“块”重复步骤5到8，并对“文档”选项卡中的所有“块”重复。文档选项卡看起来会像这样
   
   

   图3：步骤9后（文档选项卡）的示例应用UI设计

开始菜单/快速启动 工具栏

1. 接下来，您将向“开始”菜单添加项。单击Ribbon控件，并在属性网格中设置StartButton图像。
2. 单击StartButton/开始菜单图像，并根据需要添加项。请按照以下步骤为示例应用程序创建“开始”菜单
   1. 单击“开始菜单”（Start Menu），选择“添加新项”（Add New），然后在下拉菜单中选择新的RadMenuItem。
   2. 单击新创建的菜单项，并在“属性”窗格中按如下方式设置其属性
      
      1. （name）→ OpenStartMenu
      2. Text → Open
      3. 可选：添加图像并设置TextImage关系（TextImageRelation）和文本对齐（TextAlignment）属性，或者将显示样式（DisplayStyle）属性设置为Text。
   3. 单击“开始菜单”，将鼠标悬停在“打开”菜单项上，将鼠标悬停在右侧的“添加新项”上，然后从子菜单中选择新的RadMenuItem。
   4. 单击刚刚创建的新菜单项，并按如下方式设置其属性
      
      1. （name）→ OpenFileStartMenu
      2. Text → File
      3. TextAlignment → MiddleRight
      4. TextImageRelation → ImageBeforeText

5. 单击“开始菜单”，将鼠标悬停在“打开”菜单项上，将鼠标悬停在右侧的“添加新项”上（在“文件”项下方），然后从子菜单中选择新的RadMenuItem。
6. 单击刚刚创建的新菜单项，并按如下方式设置其属性
   
   1. （name）→ OpenFromBlogStartMenu
   2. Text → From Blog
   3. DisplayStyle → Text

7. 单击“开始菜单”，通过将鼠标悬停在“打开”菜单下方出现的“添加新项”菜单上，然后从子菜单中选择新的RadMenuItem来添加新的RadMenuItem。
8. 单击新创建的菜单项，并在“属性”窗口中按如下方式设置其属性
   
   1. （name）→ SaveStartMenu
   2. Text → Save
   3. 可选：添加图像并设置TextImage关系（TextImageRelation）和文本对齐（TextAlignment）属性，或者将显示样式（DisplayStyle）属性设置为Text。

9. 单击“开始菜单”，通过将鼠标悬停在“保存”菜单下方出现的“添加新项”菜单上，然后从子菜单中选择新的RadMenuItem来添加新的RadMenuItem。
10. 单击新创建的菜单项，并在“属性”窗口中按如下方式设置其属性
    
    1. （name）→ PublishStartMenu
    2. Text → Publish
    3. 可选：添加图像并设置TextImage关系（TextImageRelation）和文本对齐（TextAlignment）属性，或者将显示样式（DisplayStyle）属性设置为Text。

11. 通过从属性网格的下拉列表中选择OpenFileStartMenu，单击CommandBinding属性中的省略号，然后设置出现的对话框中的快捷键，为“打开文件”菜单添加快捷键。
12. 将OpenFileStartMenu项的Hint属性设置为Ctrl+O。这将为最终用户提供有关快捷键的视觉提示。
13. 您可能要采取的其他步骤是为“开始”菜单中的每个项目分配更多快捷键，并为已分配快捷键的每个项目添加文本到Hint属性。您也可以使用相同的方法为先前步骤中创建的任何其他控件（包括选项卡）分配快捷键。

3. 为应用程序的常用功能创建快速启动图标。
   1. 单击“快速启动”区域中显示“在此键入”的文本。键入文本：“打开文件”，然后按Enter键。对“保存文件”、“复制”和“粘贴”重复此操作。
   2. 将这些文本区域更改为简单的图标。
      
      1. 单击“打开文件”项，并按如下方式更改其属性
         
         1. （name）→ OpenFileQuickLaunchMenu
         2. ToolTipText → Ctrl+O
         3. ImageIndex → [选择您用于创建OpenFileStartMenu的图标]
         4. DisplayStyle → Image
         5. 注意：如果上下文选项卡碍事，只需添加一个新的选项卡，它会将上下文选项卡移到右侧（您可以稍后删除创建的选项卡）。

      c. 对其他快速启动项重复这些步骤。

      d. 最后，您的应用程序在Visual Studio 2005中应该看起来像这样

图4：步骤3后（文档选项卡）的示例应用UI设计

步骤5：将界面展示给最终用户

现在您已经创建了界面，您应该对其进行编译并将其展示给最终用户（或其他人员），因为您认为良好的功能组织方式可能对用户来说毫无意义。这实际上是最重要的一步。您希望您的UI对用户来说是完美的，因为他们最终将使用您的应用程序。如果某些内容对用户来说不合理，您可能需要调整控件的位置，以便更好地组织功能，使所有控件都位于您的最终用户逻辑上期望它们出现的位置。请反馈者帮助您识别控件可以更好地放置的位置。

动态元素

您还需要考虑的一个方面是，您可能有一些基于应用程序状态的选项卡或块。构建前面提到的表格将有助于您组织UI，并有助于您放置r.a.d.ribbonbar的这些动态元素。使Ribbon元素更动态的最简单解决方案是创建包含可选项目的完整UI，并简单地将Visibility属性设置为False，以便那些依赖于某些应用程序状态的项目不显示。当您需要显示可选元素时，您可以在代码中将其Visibility属性简单地设置为Visible。telerik r.a.d.controls for WinForms还包括用于动态添加和删除r.a.d.ribbonbar UI中的元素的功能，并且还具有上下文选项卡，可实现更多复杂的场景。

摘要

许多应用程序都模仿最新的Microsoft Office套件。随着Office 2007的推出，新的Ribbon用户界面将成为许多用户期望的控件。因此，您需要熟悉这个新界面。

在设计Ribbon用户界面元素时，最重要的一点是要认识到正确组织界面对于使您的应用程序易于最终用户使用至关重要。通过完成本文提供的步骤，您可以使用Telerik r.a.d.ribbonbar在您的应用程序中构建现代UI，并且它对用户来说是有意义的，而不仅仅是“看起来不错”。

下载telerik radControls for WinForms（包括r.a.d.ribbonbar）的完整功能试用版

附录A—示例应用程序功能矩阵

功能名称	类别	功能类型	常用？	UI位置
插入图片	Insert	文档		文档 选项卡的插入 块
粗体文本	样式	文档		文档 选项卡的样式 块
斜体文本	样式	文档		文档 选项卡的样式 块
下划线文本	样式	文档		文档 选项卡的样式 块
字体名称	字体	文档		文档 选项卡的样式 块
字体大小	字体	文档		文档 选项卡的样式 块
拼写检查	语法工具	文档		文档 选项卡的样式 块
语法检查	语法工具	文档		文档 选项卡的样式 块
保存到文件系统	文件操作	文件	**	开始菜单 和 快速启动
发布到博客	文件操作	文件	*	开始菜单
管理博客类别	博客类别	博客		博客 选项卡的类别 块
应用博客类别	博客类别	博客		博客 选项卡的类别 块
管理常用标签	标签	博客		博客 选项卡的标签 块
应用常用标签	标签	博客		博客 选项卡的标签 块
插入自定义标签	标签	博客		博客 选项卡的标签 块
字体颜色	字体	文档		文档 选项卡的字体 块
从本地机器打开	文件操作	文件	**	开始菜单 和 快速启动
打开之前发布的文档	文件操作	文件	*	快速启动
设置附件	博客文档设置	博客		博客 选项卡的设置 块
插入表格	Insert	文档		文档 选项卡的插入 块
复制	剪贴板	文档	**	文档 选项卡的剪贴板 块和 快速启动
粘贴	剪贴板	文档	**	文档 选项卡的剪贴板 块和 快速启动
剪切	剪贴板	文档		文档 选项卡的剪贴板 块