DOCX

hands-on lab: Office UI Customization with VS2010

By Brent Rodriguez,2014-09-22 12:10
7 views 0
hands-on lab: Office UI Customization with VS2010

Hands-On Lab

    Microsoft Office 2010 UI Customization

Lab version: 1.0.0

    Last updated: 9/22/2011

CONTENTS

    OVERVIEW ............................................................................................................................................. 3

    EXERCISE 1: CUSTOMIZING OFFICE WITH RIBBONS AND BACKSTAGE ......................................... 4

    Task 1 Adding Export Backstage Tab .............................................................................................. 4

    Task 2 Connecting the Backstage Tab to the Document Properties ................................................ 9

    Task 3 Adding Quick Export Buttons to the Home Ribbon Tab ..................................................... 15

    Task 4 Adding the Export Functionality........................................................................................ 17

    Exercise 1 Verification .................................................................................................................... 19

    EXERCISE 2: CREATE A CUSTOM TASK PANE ................................................................................ 20

    Task 1 Creating a Custom Task Pane ............................................................................................ 21

    Task 2 Adding Snippets Ribbon Button ........................................................................................ 22

    Exercise 2 Verification .................................................................................................................... 23

    EXERCISE 3: OUTLOOK FORM REGIONS ......................................................................................... 24

    Task 1 Creating a Form Region .................................................................................................... 24

    Task 2 Implementing the Form Region ........................................................................................ 27

    Exercise 3 Verification .................................................................................................................... 34

    SUMMARY ............................................................................................................................................ 35

Overview

    In this lab, you will explore the different ways in which Microsoft Office 2010’s UI can be customized to

    provide a platform for building rich office applications. You will make use of the Visual Studio support

    for Microsoft Office 2010.

    Objectives

    In this lab you will:

    ; Customize Microsoft Office 2010’s UI using the Ribbon and Backstage

    ; Build a custom Ribbon using Visual Studio 2010

    ; Build a custom Outlook Form Region using Visual Studio 2010

System Requirements

    You must have the following items to complete this lab:

    ; Microsoft Office Professional Plus 2010 (RC) (32-bit or 64-bit)

    ; Microsoft Visual Studio 2010

    ; Microsoft .Net Framework 4

Exercises

    This Hands-On Lab is comprised by the following exercises:

    1. Customizing Office with Ribbons and Backstage

    2. Customizing the Office UI with Add-Ins

    3. Outlook Form Regions

Estimated time to complete this lab: 60 minutes.

    Setup

    All the requisites for this lab are verified using the Configuration Wizard. To make sure that everything is correctly configured, follow these steps.

    1. Run the Configuration Wizard for the Training Kit if you have not done it previously. To do

    this, browse to Source\Setup folder of this lab, and double-click the Dependencies.dep file.

    Install any pre-requisites that are missing (rescanning if necessary) and complete the wizard.

    Note: The Configuration Wizard is used for checking dependencies and setting up the

    environment. If the Configuration Wizard is not installed on your machine, you must install it

    running the DependencyChecker.msi file located on

    the %VS2010TKInstallationFolder%\Assets\DependencyChecker folder (e.g. by default the

    Training Kit is installed under C:\VS2010TrainingKit).

    For convenience, much of the code you will be managing along this lab is available as Visual

    Studio code snippets. The Dependencies.dep file launches the Visual Studio installer file that

    installs the code snippets.

    Exercise 1: Customizing Office with Ribbons and Backstage

    Backstage is a perfect place to put UI elements that take up space but are not necessary when actively editing the document. In this case you will be using Backstage and a Ribbon together to create multiple parts of a complete add-in.

    Task 1 Adding Export Backstage Tab

    In this first task, you will create a new Backstage tab named Export to manage the quick export functionality.

    1. Open Microsoft Visual Studio 2010 and open the ExportAddIn.sln solution located at

    Source\Ex1-ExportAddIn\Begin\ (Choosing the folder that matches the language of your

    preference.)

    2. Add a new XML Ribbon item to the existing ExportAddIn project. To do this:

    a. Right-click ExportAddIn project in the Solution Explorer and choose Add\New Item.

    b. In the Add New Item dialog, select the Office category, and choose the Ribbon (XML)

    item.

    c. Type Ribbon as the Name and click Add to create the new ribbon.

Figure 1

Add Ribbon (XML) Item (C#)

Figure 2

Add Ribbon (XML) Item (VB)

    d. In the Solution Explorer, double-click the Ribbon.xml file to open it.

    3. Add XML Markup to the Ribbon.xml file to define the Export Backstage tab

    a. Remove the current node from the Ribbon.xml file.

    b. Add the following markup to define the Backstage tab and the first column of

    information.

    (Code Snippet Office UI Customization Backstage Tab XML)

    XML

    

    

    

    

    

    

    c. Inside the element, add the following markup to define the group containing the XPS export controls.

    (Code Snippet Office UI Customization Backstage XPS Button XML)

    XML

    current document as XPS.">

    

    

    d. Immediately following the previous group, add the following markup to define the PDF export controls

    (Code Snippet Office UI Customization Backstage PDF Button XML) XML

        current document as PDF.">

    

    

     Case "btnBackStageXPS"

     Return My.Resources.XPS

     Case "btnBackStagePDF"

     Return My.Resources.PDF

     Case Else

     Return Nothing

     End Select

    End Function

    Note: The getImage attribute in the button elements define a public method Office

    will call any time a button loads. This method uses a switch command to differentiate

    between the different buttons.

    5. Override the CreateRibbonExtensibilityObject method in the add-in to define the ribbon to

    load

    a. In the Solution Explorer, double-click on the ThisAddIn class, located under the Word node, to open it.

    b. Add the following namespace statement to it. C#

    using Microsoft.Office.Core;

Visual Basic

    Imports Microsoft.Office.Core

    c. In the ThisAddIn class, override the CreateRibbonExtensibilityObject method and return a new Ribbon object.

    (Code Snippet Office UI Customization CreateRibbonExtensibilityObject Method

    CSharp)

    C#

    protected override IRibbonExtensibility CreateRibbonExtensibilityObject()

    {

     return new Ribbon();

    }

(Code Snippet Office UI Customization CreateRibbonExtensibilityObject Method VB)

    Visual Basic

    Protected Overrides Function CreateRibbonExtensibilityObject() As

    Microsoft.Office.Core.IRibbonExtensibility

     Return New Ribbon()

    End Function

    6. Run the add-in and verify the Backstage tab looks correct.

    a. In the Debug menu, click Start Without Debugging.

    b. Once Word 2010 loads, click the Backstage button (labeled as File.)

    c. In Backstage switch to the Export tab and verify it looks like the image below.

    Figure 3

    Custom Backstage Export tab

    Task 2 Connecting the Backstage Tab to the Document Properties In this task, you will connect the controls in the Export tab to the CustomDocumentProperties object in

    the active document. This will allow the state of the controls to be persisted in the document and

    loaded when the document is loaded later.

    First, you will define the code required to determine when the button and editBox control are enabled.

    1. Open Ribbon.xml by double clicking it in the Solution Explorer.

    2. Add a getEnabled attribute to the two button” and two editBox controls. The markup should

    look as the following:

    XML

     ...

    

    

Report this document

For any questions or suggestions please email
cust-service@docsford.com