自定义 Office 2010 Backstage 视图中的列布局

项目
06/24/2015

Office 可视操作方法

**摘要：**了解如何在 Microsoft Office 2010 Backstage 视图中创建三种类型的列布局（12 个打印页）

上次修改时间： 2015年3月9日

**发布时间：**2010 年 4 月

**供稿人：**Michael Case，iSoftStone

Microsoft Office Backstage 视图是 Office 2010 中的一项新功能，它将代替传统的"文件"菜单来为文件管理任务（例如，打开新文件或现有文件、定义文档属性和共享信息）提供一个集中空间。与 Microsoft Office Fluent 功能区类似，可使用 XML 扩展 Backstage 视图以定义结构、组件和回调过程，以便为这些组件提供功能。

Backstage 视图中为您提供了三个选项，用于在列中布置页面控件。本文介绍如何使用一个列、两个列来布置 Backstage 视图页面控件或通过使用 taskFormGroup 控件在列中创建其他子导航。

本文使用 Trang Luu 的自定义 UI 编辑器（该链接可能指向英文页面）以简化向 Microsoft Excel 2010 工作簿添加自定义 UI XML 这一操作。您必须下载并安装自定义 UI 编辑器才能按照本文中提供的步骤进行操作。

本文通过使用 XML 和 VBA 代码的组合来自定义 Excel 2010 工作簿的 Backstage 视图。XML 将定义要在 Backstage 视图中显示的一个自定义选项卡和多个控件。VBA 代码将提供在自定义 UI XML 中定义的回调过程所需的功能。

本文介绍以下步骤，以演示如何在 Excel 2010 工作簿中创建自定义 Backstage 视图：

创建 Excel 工作簿
添加自定义 UI XML
添加 VBA 回调代码
查看自定义 Backstage 视图页

创建 Excel 工作簿

在本文中，您将自定义 UI XML 和 VBA 代码添加到新的 Excel 2010 工作簿。您必须将 Excel 2010 工作簿创建为启用宏的工作簿 (.xlsm) 才能支持 VBA 代码。

启动 Microsoft Excel 2010。
单击"文件"选项卡。
单击"另存为"。
在"保存类型"列表中，选择启用 Excel 宏的工作簿 (*.xlsm)。
单击"保存"以完成操作。将文档另存为 C:\Temp\BackstageViewFormatControls.xlsm。

添加自定义 UI XML

自定义 UI 编辑器简化了将自定义 UI XML 添加到在上一个步骤中创建的 Excel 2010 工作簿的过程。

启动自定义 UI 编辑器。
在"文件"菜单上，单击"打开"。
选择在上一过程中创建的 C:\Temp\BackstageViewFormatControls.xlsm 文件，然后单击"打开"。
在"插入"菜单上，单击"Office 2010 自定义 UI 部件"。这将在文档中创建 CustomUI14.xml 文件。

选择 customUI14.xml 文件，并将以下 XML 复制到该文件中。

<?xml version="1.0" encoding="utf-8"?>
<!-- customUI is the root tag of all Fluent UI customizations. -->
<customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui">
  <!—The Backstage defines the custom structure of the Backstage UI -->
  <backstage>
    <!-- Tab defines the name to display in the Backstage
         view tab and the controls to display on the page when 
         the tab is selected. -->
    <!-- This tab illustrates the single column layout. -->
    <tab id="singleColumnTab" label="Single Column Layout"
         insertBeforeMso="TabInfo">
      <firstColumn>
        <group id="reviewersGroup" label="Document Reviewers">
          <topItems>
            <layoutContainer id="headerLayout" layoutChildren="horizontal">
              <imageControl id="imageSpacer" image="ImageSpacer"/>
              <labelControl id="name" label="NAME" />
              <labelControl id="title" label="TITLE" />
              <labelControl id="role" label="ROLE" />
              <labelControl id="dueDate" label="APPROVAL DUE DATE" />
            </layoutContainer>
            <layoutContainer id="arthurLayout" layoutChildren="horizontal">
              <imageControl id="arthurImage" image="Arthur" />
              <labelControl id="arthurName" label="Arthur Davis" />
              <labelControl id="arthurTitle" label="Corporate VP" />
              <labelControl id="arthurRole" label="Final Approver" />
              <labelControl id="arthurDueDate" label="10/20/2009" />
            </layoutContainer>
            <layoutContainer id="carolLayout" layoutChildren="horizontal">
              <imageControl id="carolImage" image="Carol" />
              <labelControl id="carolName" label="Carol Johansen" />
              <labelControl id="carolTitle" label="Division GM" />
              <labelControl id="carolRole" label="Division Signoff" />
              <labelControl id="carolDueDate" label="10/16/2009" />
            </layoutContainer>
            <layoutContainer id="charlesLayout" layoutChildren="horizontal">
              <imageControl id="charlesImage" image="Charles" />
              <labelControl id="charlesName" label="Charles Bisco" />
              <labelControl id="charlesTitle" label="Engineering GM" />
              <labelControl id="charlesRole" label="Engineering Signoff" />
              <labelControl id="charlesDueDate" label="10/14/2009" />
            </layoutContainer>
          </topItems>
        </group>
      </firstColumn>
    </tab>
    <!-- This tab shows the two column layout. -->
    <tab id="twoColumnsTab" label="Two-Column Layout"
         insertBeforeMso="TabInfo">
      <firstColumn>
        <group id="specDetailsGroup" label="Specification Details" 
               helperText="Keep the following information up to date.">
          <topItems>
              <editBox id="specTitle" label="Title:        "
                       getText="GetSpecDetailText" />
              <editBox id="specDesigner" label="Designer: "
                       getText="GetSpecDetailText" />
              <editBox id="specEngineer" label="Engineer: "
                       getText="GetSpecDetailText" />
              <editBox id="specTeam" label="Team:      "
                       getText="GetSpecDetailText"/>
              <editBox id="specCost" label="Cost:        "
                       getText="GetSpecDetailText"/>
          </topItems>
        </group>
      </firstColumn>
      <secondColumn>
        <taskGroup id="bidProcessTaskGroup" 
                   label="Contract Bid Process Checklist" >
          <category id="defineWorkScopeCategory" 
                    label="Define work and tasks - Complete tasks in order.">
            <task id="defineScope" label="Define the scope of work" 
                  imageMso="_1"/>
            <task id="assignTasks" label="Assign the tasks" 
                  imageMso="_2"/>
          </category>
          <category id="calculateCostsCategory" 
                    label="Calculate costs - Complete tasks in order">
            <task id="calcManHours" label="Calculate total Man-Hours" 
                  imageMso="_3"/>
            <task id="calcOverheadCosts" label="Determine Overhead Costs" 
                  imageMso="_4"/>
          </category>
        </taskGroup>
      </secondColumn>
    </tab>
    <!-- This tab illustrates the taskFormGroup layout. -->
    <tab id="taskFormGroupTab" label="taskFormGroup Layout"
         insertBeforeMso="TabInfo">
      <firstColumn>
        <taskFormGroup id="teamTaskFormGroup">
          <category id="engineeringCategory" label="Engineering Tasks">
            <task id="engineeringTasks" 
                  label="Manager: William Rodgers" 
                  description="Engineering Excellence" 
                  imageMso="TableDesign">
              <group id="engineeringGroup" label="Engineering Group">
                <topItems>
                  <button id="concept" label="Concept    " 
                          imageMso="_1" />
                  <button id="design" label="Design       " 
                          imageMso="_2" />
                  <button id="prototype" label="Prototype  " 
                          imageMso="_3" />
                  <button id="production" label="Production" 
                          imageMso="_4" />
                </topItems>
              </group >
            </task>
          </category>
          <category id="manufacturingCategory" label="Manufacturing Tasks">
            <task id="manufacturingTasks" 
                  label="Manager: Alice Morton" 
                  description="Right the First Time" 
                  imageMso="ControlsGallery">
              <group id="manufacturingGroup" label="Manufacturing Group">
                <topItems>
                  <button id="flowDesign" label="Flow Design    " 
                          imageMso="_1" />
                  <button id="tooling" label="Tooling            " 
                          imageMso="_2" />
                  <button id="staffing" label="Staffing            " 
                          imageMso="_3" />
                  <button id="manufacturing" label="Manufacturing" 
                          imageMso="_4" />
                </topItems>
              </group >
            </task>
          </category>
          <category id="marketingCategory" label="Marketing Tasks">
            <task id="marketingTasks" 
                  label="Manager: Jane Burns" 
                  description="Bringing Quality to the Customer" 
                  imageMso="SignatureShow">
              <group id="marketingGroup" label="Marketing Group">
                <topItems>
                  <button id="concepts" label="Concepts              " 
                          imageMso="_1" />
                  <button id="storyBoarding" label="Story Boarding     " 
                          imageMso="_2" />
                  <button id="finalization" label="Finalization           " 
                          imageMso="_3" />
                  <button id="channelSelection" label="Channel Selection" 
                          imageMso="_4" />
                  <button id="execution" label="Execution              " 
                          imageMso="_5" />
                </topItems>
              </group >
            </task>
          </category>
        </taskFormGroup >
      </firstColumn>
    </tab>
  </backstage>
</customUI>

在"文件"菜单上，单击"保存"。
关闭自定义 UI 编辑器。

添加 VBA 回调代码

VBA 回调过程将功能添加到上一步骤中通过自定义 UI XML 添加的自定义 Backstage 视图组件。

启动 Microsoft Excel 2010。
单击"文件"选项卡。
单击"打开"。
打开 BackstageViewFormatControls.xlsm 工作簿。
选择"开发工具"选项卡。
单击"Visual Basic"。
在"插入"菜单上，单击"模块"。

选择"Module1"，然后将下面的 VBA 代码复制到文件中。

'Returns the text to display for each specification detail editBox.
Sub GetSpecDetailText(control As IRibbonControl, ByRef returnedVal)
  Select Case control.ID
    Case "specTitle"
      returnedVal = "Flexible Bracket"
    Case "specDesigner"
      returnedVal = "Andrew Fuller"
    Case "specEngineer"
      returnedVal = "Nancy Davolio"
    Case "specTeam"
      returnedVal = "Design"
    Case "specCost"
      returnedVal = "$896,210"
  End Select
End Sub

在"文件"菜单上，单击"保存"。
关闭 Visual Basic for Applications 编辑器，并返回到工作簿。

查看自定义 Backstage 视图页

若要查看本节中前面所定义的自定义 Backstage 视图页面，请通过选择"文件"选项卡显示 Backstage 视图。在出现 Backstage 视图后，请选择位于内置"信息"选项卡前面的某个自定义布局选项卡。选择"Single Column Layout"选项卡以在单个列中查看控件；选择"Two-Column Layout"选项卡以在两个列中查看控件；选择"taskFormGroup Layout"选项卡以使用 taskFormGroup 控件查看添加的子导航。

图 1. 自定义 Backstage 视图"Single Column Layout"页

图 2. 自定义 Backstage 视图"Two-Column Layout"页

图 3. 自定义 Backstage 视图"taskFormGroup Layout"页

标题

扩展 Office 2010Backstage 视图以包含自定义页面和控件来支持您自己的需求的任务包含向 Office 文档添加自定义 UI XML 和添加 VBA 代码这两个操作，可为在自定义 UI XML 中指定的回调提供功能。

本文中的示例代码介绍了用于在 Backstage 视图页的列中布置控件的三个选项：

可使用 firstColumn 元素指定单个列。此选项在您希望沿水平方向呈现信息时很有用。
可使用 firstColumn 和 secondColumn 元素来指定两列信息。这是最典型的选项。
可使用 taskFormGroup 控件创建其他子导航。taskFormGroup 控件使您能够基于在 taskFormGroup 控件中所做的选择来显示组。

单列布局

如果您希望沿水平方向呈现信息，则在单个列中布置控件会很有用。在您定义页面时，可通过在 firstColumn 元素中放置所有控件来创建单列布局。下面的代码段演示仅通过在 tab 元素中定义 firstColumn 元素来创建单列页面。

<!-- This tab illustrates the single column layout. -->
<tab id="singleColumnTab" label="Single Column Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <group id="reviewersGroup" label="Document Reviewers">
      <topItems>
        <layoutContainer id="headerLayout" layoutChildren="horizontal">
          <imageControl id="imageSpacer" image="ImageSpacer"/>
          <labelControl id="name" label="NAME" />
          <labelControl id="title" label="TITLE" />
          <labelControl id="role" label="ROLE" />
          <labelControl id="dueDate" label="APPROVAL DUE DATE" />
        </layoutContainer>
        <layoutContainer id="arthurLayout" layoutChildren="horizontal">
          <imageControl id="arthurImage" image="Arthur" />
          <labelControl id="arthurName" label="Arthur Davis" />
          ...
          <labelControl id="charlesRole" label="Engineering Signoff" />
          <labelControl id="charlesDueDate" label="10/14/2009" />
        </layoutContainer>
      </topItems>
    </group>
  </firstColumn>
</tab>

两列布局

典型方案是在两个列中布置控件。通过在 firstColumn 元素中放置要在页面的一侧显示的控件，并在 secondColumn 元素中放置要在页面的另一侧显示的控件来创建两列布局。下面的代码示例通过在 tab 元素中定义 firstColumn 和 secondColumn 元素来演示两列页面。

用于在第一个列中显示"规范详细信息"的 editBox 控件的 getText 回调已设置为 GetSpecDetailText。GetSpecDetailText 回调将评估显示的 editBox 并返回适当的文本。

<!-- This tab illustrates the two-column layout. -->
<tab id="twoColumnsTab" label="Two Column Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <group id="specDetailsGroup" label="Specification Details" 
           helperText="Keep the following information up to date.">
      <topItems>
          <editBox id="specTitle" label="Title:        "
                   getText="GetSpecDetailText" />
          <editBox id="specDesigner" label="Designer: "
                   getText="GetSpecDetailText" />
          <editBox id="specEngineer" label="Engineer: "
                   getText="GetSpecDetailText" />
          <editBox id="specTeam" label="Team:      "
                   getText="GetSpecDetailText"/>
          <editBox id="specCost" label="Cost:        "
                   getText="GetSpecDetailText"/>
      </topItems>
    </group>
  </firstColumn>
  <secondColumn>
    <taskGroup id="bidProcessTaskGroup" 
               label="Contract Bid Process Checklist" >
      <category id="defineWorkScopeCategory" 
                label="Define work and tasks - Complete tasks in order.">
        <task id="defineScope" label="Define the Scope of Work." 
              imageMso="_1"/>
        <task id="assignTasks" label="Assign the Tasks" 
              imageMso="_2"/>
      </category>
      <category id="calculateCostsCategory" 
                label="Calculate costs - Complete tasks in order.">
        <task id="calcManHours" label="Calculate Total Man-Hours" 
              imageMso="_3"/>
        <task id="calcOverheadCosts" label="Determine Overhead Costs" 
              imageMso="_4"/>
      </category>
    </taskGroup>
  </secondColumn>
</tab>

'Returns the text to display for each specification detail editBox.
Sub GetSpecDetailText(control As IRibbonControl, ByRef returnedVal)
  Select Case control.ID
    Case "specTitle"
      returnedVal = "Flexible Bracket"
    Case "specDesigner"
      returnedVal = "Andrew Fuller"
    Case "specEngineer"
      returnedVal = "Nancy Davolio"
    Case "specTeam"
      returnedVal = "Design"
    Case "specCost"
      returnedVal = "$896,210"
  End Select
End Sub

taskFormGroup 布局

在某些情况下，您可能希望在 Backstage 视图页上提供其他子导航。taskFormGroup 控件通过以下方式来支持这一点：在第一个列的右侧窗格中显示控件组，具体取决于在 taskFormGroup 控件中所做的选择。taskFormGroup 元素将使用在 category 元素中定义的 task 元素来确定应显示哪些控件组。每个任务均可定义一个或多个包含要显示的控件的组。在选定 taskFormGroup 控件中的某个任务时，将显示为该任务定义的组。选择不同的任务将更改窗格中显示的组，这将使您能够在更小的空间内显示更多的信息。

下面的代码示例演示如何使用 taskFormGroup 控件以在页面上提供子导航。taskFormGroup 元素将定义包含单个 task 的三个 category 元素。任务将定义一组按钮。当您单击 engineeringTasks 任务时，engineeringGroup 组将在窗格中的右侧显示。当您单击 manufacturingTasks 任务时，manufacturingGroup 组将替换窗格中的右侧的 engineeringGroup 组。

<!-- This tab illustrates the taskFormGroup layout. -->
<tab id="taskFormGroupTab" label="taskFormGroup Layout"
     insertBeforeMso="TabInfo">
  <firstColumn>
    <taskFormGroup id="teamTaskFormGroup">
      <category id="engineeringCategory" label="Engineering Tasks">
        <task id="engineeringTasks" 
              label="Manager: William Rodgers" 
              description="Engineering Excellence" 
              imageMso="TableDesign">
          <group id="engineeringGroup" label="Engineering Group">
            <topItems>
              <button id="concept" label="Concept    " 
                      imageMso="_1" />
              <button id="design" label="Design       " 
                      imageMso="_2" />
              <button id="prototype" label="Prototype  " 
                      imageMso="_3" />
              <button id="production" label="Production" 
                      imageMso="_4" />
            </topItems>
          </group >
        </task>
      </category>
      <category id="manufacturingCategory" label="Manufacturing Tasks">
        <task id="manufacturingTasks" 
              label="Manager: Alice Morton" 
              description="Right the First Time" 
              imageMso="ControlsGallery">
          <group id="manufacturingGroup" label="Manufacturing Group">
            <topItems>
              <button id="flowDesign" label="Flow Design    " 
                      imageMso="_1" />
              <button id="tooling" label="Tooling            " 
                      imageMso="_2" />
              <button id="staffing" label="Staffing            " 
                      imageMso="_3" />
              <button id="manufacturing" label="Manufacturing" 
                      imageMso="_4" />
            </topItems>
          </group >
        </task>
      </category>
      <category id="marketingCategory" label="Marketing Tasks">
        <task id="marketingTasks" 
              label="Manager: Jane Burns" 
              description="Bringing Quality to the Customer" 
              imageMso="SignatureShow">
          <group id="marketingGroup" label="Marketing Group">
            <topItems>
              <button id="concepts" label="Concepts              " 
                      imageMso="_1" />
              <button id="storyBoarding" label="Story Boarding     " 
                      imageMso="_2" />
              <button id="finalization" label="Finalization           " 
                      imageMso="_3" />
              <button id="channelSelection" label="Channel Selection" 
                      imageMso="_4" />
              <button id="execution" label="Execution              " 
                      imageMso="_5" />
            </topItems>
          </group >
        </task>
      </category>
    </taskFormGroup >
  </firstColumn>
</tab>

观看视频（该链接可能指向英文页面）

视频时长：00:06:28 | 文件大小：7.84 MB | 文件类型：WMV

获取代码（该链接可能指向英文页面）

通过

自定义 Office 2010 Backstage 视图中的列布局

其他资源