microsoft office 2010 ui customization -...

Hands-On LabMicrosoft Office 2010 UI Customization

Lab version: 1.0.0

Last updated: 5/5/2023

CONTENTS

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

EXERCISE 1: CUSTOMIZING OFFICE WITH RIBBONS AND BACKSTAGE..........................................4Task 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...........................................................................................18

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

EXERCISE 2: CREATE A CUSTOM TASK PANE...................................................................................20Task 1 – Creating a Custom Task Pane...............................................................................................21

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


EXERCISE 3: OUTLOOK FORM REGIONS............................................................................................24Task 1 – Creating a Form Region........................................................................................................24

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


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 (Beta) (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.

Note: To perform the setup steps you need to run the scripts in a command window with administrator privileges.

1. Run the Configuration Wizard for the Lab if you have not done it previously. To do this, run the CheckDependencies.cmd script located under the Setup folder of this lab. Install any pre-requisites that are missing (rescanning if necessary) and complete the wizard.

Note: For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. The CheckDependencies.cmd 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 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 1Add 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.

e. Replace the xmlns attribute value in the customUI node using the example below

XML

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui" onLoad="Ribbon_Load">

Note: The change to Ribbon.xml will not be required in the release version. The template has not been updated to use the latest namespace Uri.

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

a. Remove the current <ribbon> 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

<backstage> <tab id="tabExport" label="Export" insertAfterMso="TabInfo"> <firstColumn> </firstColumn> </tab></backstage>

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

(Code Snippet – Office UI Customization – Backstage XPS Button – XML)

XML

<group id="grpExportXPS" label="Export as XPS" helperText="Exports the current document as XPS."> <primaryItem> <button id="btnBackStageXPS" label="To XPS" getImage="GetButtonImage" /> </primaryItem> <topItems> <checkBox id="chkEnableXPS" label="Allow XPS Export" />

<editBox id="txtXPSPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" /> </topItems></group>

Note: The XPS output controls are made up of a button to perform the export, a check box to enable or disable exporting to XPS and an edit box to define the filename of the exported file.

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

<group id="grpExportPDF" label="Export as PDF" helperText="Exports the current document as PDF."> <primaryItem> <button id="btnBackStagePDF" label="To PDF" getImage="GetButtonImage" /> </primaryItem> <topItems> <checkBox id="chkEnablePDF" label="Allow PDF Export" /> <editBox id="txtPDFPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" /> </topItems></group>

4. Define the code that will load images for the export buttons

a. Open Ribbon.cs (C#) or Ribbon.vb (VB) by double clicking it in the Solution Explorer

b. Add the following GetButtonImage method to the Ribbon class

(Code Snippet – Office UI Customization – GetButtonImage Method – CSharp)

C#

public System.Drawing.Bitmap GetButtonImage(Office.IRibbonControl control){ switch (control.Id) { case "btnBackStageXPS": return Properties.Resources.XPS; case "btnBackStagePDF": return Properties.Resources.PDF;

default: return null; }}

(Code Snippet – Office UI Customization – GetButtonImage Method – VB)

Visual Basic

Public Function GetButtonImage(ByVal control As Office.IRibbonControl) As System.Drawing.Bitmap Select Case control.Id Case "btnBackStageXPS" Return My.Resources.XPS Case "btnBackStagePDF" Return My.Resources.PDF Case Else Return Nothing End SelectEnd 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 3Custom 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

... <button id="btnBackStageXPS" label="To XPS" getImage="GetButtonImage" getEnabled="GetEnable" /> </primaryItem> <topItems> <checkBox id="chkEnableXPS" label="Allow XPS Export" /> <editBox id="txtXPSPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" getEnabled="GetEnable"/> ... <button id="btnBackStagePDF" label="To PDF" getImage="GetButtonImage" getEnabled="GetEnable"/> </primaryItem> <topItems> <checkBox id="chkEnablePDF" label="Allow PDF Export" /> <editBox id="txtPDFPath" label="Export Path" sizeString="WWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" getEnabled="GetEnable"/> …

Note: You should find 2 button controls and 2 editBox controls

3. In the Solution Explorer, double-click the Ribbon class to open it.

4. Add the following private field to it.

C#

private ExportProperties m_properties = new ExportProperties();

Visual Basic

Private m_properties = New ExportProperties()

Note: The ExportProperties class is a wrapper provided for you that wraps the CustomDocumentProperties collection of the current ActiveDocument.

5. Create a GetEnable method to determine the enable state of other controls.

(Code Snippet – Office UI Customization – GetEnable Method– CSharp)

C#

public bool GetEnable(Office.IRibbonControl control){ switch (control.Id) { case "btnBackStageXPS": case "txtXPSPath": return m_properties.XpsEnabled; case "btnBackStagePDF": case "txtPDFPath": return m_properties.PdfEnabled; default: return false; }}

(Code Snippet – Office UI Customization – GetEnable Function– VB)

Visual Basic

Public Function GetEnable(ByVal control As Office.IRibbonControl) As Boolean Select Case control.Id Case "btnBackStageXPS", "txtXPSPath" Return m_properties.XpsEnabled Case "btnBackStagePDF", "txtPDFPath" Return m_properties.PdfEnabled Case Else Return False End SelectEnd Function

Next, you will add the code required to populate and respond to events from the enabled checkboxes.


2. Add a getPressed and onAction attribute to the two “checkbox” elements in the Backstage markup. The code should look as follows for each checkbox:

XML

<checkBox id="chkEnableXPS" label="Allow XPS Export" getPressed="IsEnableChecked" onAction="EnableChecked" />

Note: The Id of the checkbox might change to match the group (either XPS or PDF).

3. Open Ribbon.cs (C#) or Ribbon.vb (VB) file by double clicking it in the Solution Explorer

4. Create an IsEnableChecked method that will respond to requests from check box controls to get their current state

(Code Snippet –Office UI Customization – IsEnabledChecked Method– CSharp)

C#

public bool IsEnableChecked(Office.IRibbonControl control){ if (control.Id == "chkEnableXPS") return m_properties.XpsEnabled; else if (control.Id == "chkEnablePDF") return m_properties.PdfEnabled; else return false;}

(Code Snippet –Office UI Customization – IsEnabledChecked Function– VB)

Visual Basic

Public Function IsEnableChecked(ByVal control As Office.IRibbonControl) As Boolean If control.Id = "chkEnableXPS" Then Return m_properties.XpsEnabled ElseIf control.Id = "chkEnablePDF" Then Return m_properties.PdfEnabled Else Return False End IfEnd Function

5. Create an EnableChecked method that will respond to the checking of a check box

(Code Snippet –Office UI Customization – EnableChecked Method– CSharp)

C#

public void EnableChecked(Office.IRibbonControl control, bool value){ if (control.Id == "chkEnableXPS") { m_properties.XpsEnabled = value; ribbon.InvalidateControl("btnBackStageXPS"); ribbon.InvalidateControl("txtXPSPath"); } else if (control.Id == "chkEnablePDF") { m_properties.PdfEnabled = value;

ribbon.InvalidateControl("btnBackStagePDF"); ribbon.InvalidateControl("txtPDFPath"); }}

(Code Snippet –Office UI Customization – EnableChecked Sub– VB)

Visual Basic

Public Sub EnableChecked(ByVal control As Office.IRibbonControl, ByVal value As Boolean) If control.Id = "chkEnableXPS" Then m_properties.XpsEnabled = value ribbon.InvalidateControl("btnBackStageXPS") ribbon.InvalidateControl("txtXPSPath") ElseIf control.Id = "chkEnablePDF" Then m_properties.PdfEnabled = value ribbon.InvalidateControl("btnBackStagePDF") ribbon.InvalidateControl("txtPDFPath") End IfEnd Sub

Note: The calls to ribbon.InvalidateControl force those controls to reevaluate their state. This will lead to another call to GetEnabled that will now have a different result.

Finally, you will add the code required to populate and respond to events from the path edit boxes


7. Add a getText and onChange attribute to the two “editBox” elements, the markup should look as follows:

XML

<editBox id="txtPDFPath" getText="GetExportPath" onChange="SetExportPath" ... />

Note: The Id of the editBox might change to match the group (either XPS or PDF).

8. In the Solution Explorer, double-click the Ribbon.cs (C3) or Ribbon.vb (VB) to open it.

9. Create a GetExportPath method that will retrieve the current export path for the editBox controls

(Code Snippet –Office UI Customization – GetExportPath Method– CSharp)

C#

public string GetExportPath(Office.IRibbonControl control){ if (control.Id == "txtXPSPath") return m_properties.XpsExportPath; else if (control.Id == "txtPDFPath") return m_properties.PdfExportPath; else return string.Empty; }

(Code Snippet –Office UI Customization – GetExportPath Function– VB)

Visual Basic

Public Function GetExportPath(ByVal control As Office.IRibbonControl) As String If control.Id = "txtXPSPath" Then Return m_properties.XpsExportPath ElseIf control.Id = "txtPDFPath" Then Return m_properties.PdfExportPath Else Return String.Empty End IfEnd Function

10. Create a SetExportPath method that will respond to the change event of the editBox control

(Code Snippet –Office UI Customization – SetExportPath Method– CSharp)

C#

public void SetExportPath(Office.IRibbonControl control, string value){ if (control.Id == "txtXPSPath") m_properties.XpsExportPath = value; else if (control.Id == "txtPDFPath") m_properties.PdfExportPath = value;}

(Code Snippet –Office UI Customization – SetExportPath Sub– VB)

Visual Basic

Public Sub SetExportPath(ByVal control As Office.IRibbonControl, ByVal value As String) If control.Id = "txtXPSPath" Then m_properties.XpsExportPath = value ElseIf control.Id = "txtPDFPath" Then

m_properties.PdfExportPath = value End IfEnd Sub

11. Run the add-in and verify the enable checkboxes work


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

c. In Backstage switch to the Export tab

d. Check and uncheck the enabled checkboxes and verify the related controls are enabled and disabled

Figure 4Enable check box in Backstage tab

Task 3 – Adding Quick Export Buttons to the Home Ribbon Tab

In this task, you will add a Quick Export ribbon button to the Home ribbon tab. It will tie into the same functionality as the buttons on Backstage.

1. Double-click the Ribbon.xml file in the Solution Explorer to open it.

2. Add the markup that will create a new Quick Export group in the Home tab. Make sure the <ribbon> xml element is added before the <backstage> xml element

(Code Snippet –Office UI Customization – Ribbon XML Element– XML)

XML

<ribbon> <tabs> <tab idMso="TabHome"> <group id="grpQuickExport" autoScale="true"> </group> </tab> </tabs></ribbon>

Note: The use of the idMso attribute tells Office to put the following group in the existing tab.

3. Inside the grpQuickExport group element, add a menu control using an existing image within Office

XML

<menu id="btnQuickExport" size="large" itemSize="large" label="Quick Export" imageMso="PageMenu" ></menu>

Note: The use of imageMso tells Office to use an built in Office image

4. Inside the <menu> element, add the two button controls to perform the export as XPS or PDF

XML

<button id="btnRibbonXPS" label="XPS" getEnabled="GetEnable" getImage="GetButtonImage" /><button id="btnRibbonPDF" label="PDF" getEnabled="GetEnable" getImage="GetButtonImage" />

5. Update the code behind to update the Ribbon buttons as well as the Backstage buttons

a. In the Solution Explorer, double-click the Ribbon class to open it.

b. Locate the GetButtonImage method and add cases for the ribbon buttons

C#

case "btnRibbonXPS":case "btnBackStageXPS": return Properties.Resources.XPS;case "btnRibbonPDF":case "btnBackStagePDF": return Properties.Resources.PDF;

Visual Basic

Case "btnBackStageXPS", "btnRibbonXPS" Return My.Resources.XPSCase "btnBackStagePDF", "btnRibbonPDF" Return My.Resources.PDF

c. Locate the GetEnable method and add cases for the ribbon buttons

C#

case "btnRibbonXPS":case "btnBackStageXPS":case "txtXPSPath": return m_properties.XpsEnabled;case "btnRibbonPDF":case "btnBackStagePDF":case "txtPDFPath": return m_properties.PdfEnabled;

Visual Basic

Case "btnBackStageXPS", "txtXPSPath", "btnRibbonXPS" Return m_properties.XpsEnabledCase "btnBackStagePDF", "txtPDFPath", "btnRibbonPDF" Return m_properties.PdfEnabled

d. Locate the EnableChecked method and add InvalidateControl calls for the ribbon buttons

C#

if (control.Id == "chkEnableXPS"){ m_properties.XpsEnabled = value; ribbon.InvalidateControl("btnRibbonXPS"); ribbon.InvalidateControl("btnBackStageXPS"); ribbon.InvalidateControl("txtXPSPath");}else if (control.Id == "chkEnablePDF"){ m_properties.PdfEnabled = value; ribbon.InvalidateControl("btnRibbonPDF"); ribbon.InvalidateControl("btnBackStagePDF"); ribbon.InvalidateControl("txtPDFPath");}

Visual Basic

If control.Id = "chkEnableXPS" Then m_properties.XpsEnabled = value ribbon.InvalidateControl("btnRibbonXPS") ribbon.InvalidateControl("btnBackStageXPS") ribbon.InvalidateControl("txtXPSPath")ElseIf control.Id = "chkEnablePDF" Then m_properties.PdfEnabled = value

ribbon.InvalidateControl("btnRibbonPDF") ribbon.InvalidateControl("btnBackStagePDF") ribbon.InvalidateControl("txtPDFPath")End If

Task 4 – Adding the Export Functionality

In this task, you will add the Export Functionality to the Add-In to actually export the file to the selected format.

1. Open Ribbon.cs (C#) or Ribbon.vb (VB) by double clicking it in the Solution Explorer

2. Add the following namespace to the file.

C#

using Microsoft.Office.Interop.Word;

Visual Basic

Imports Microsoft.Office.Interop.Word

3. Create a new method named ExportDocument that will use the ExportAsFixedFormat document method to export the current document

Note: For the sake of simplicity, you will not add validation. Note that if you enter an invalid path, Word will crush, throwing an exception.

(Code Snippet –Office UI Customization – ExportDocument Method– CSharp)

C#

public void ExportDocument(Office.IRibbonControl control){ switch (control.Id) { case "btnRibbonXPS": case "btnBackStageXPS": Globals.ThisAddIn.Application.ActiveDocument. ExportAsFixedFormat( m_properties.XpsExportPath, WdExportFormat.wdExportFormatXPS); break; case "btnRibbonPDF": case "btnBackStagePDF": Globals.ThisAddIn.Application.ActiveDocument. ExportAsFixedFormat(

m_properties.PdfExportPath, WdExportFormat.wdExportFormatPDF); break; }}

(Code Snippet –Office UI Customization – ExportDocument Sub– VB)

Visual Basic

Public Sub ExportDocument(ByVal control As Office.IRibbonControl) Select Case control.Id Case "btnRibbonXPS", "btnBackStageXPS" Globals.ThisAddIn.Application.ActiveDocument.ExportAsFixedFormat(m_properties.XpsExportPath, WdExportFormat.wdExportFormatXPS) Exit Select Case "btnRibbonPDF", "btnBackStagePDF" Globals.ThisAddIn.Application.ActiveDocument.ExportAsFixedFormat(m_properties.PdfExportPath, WdExportFormat.wdExportFormatPDF) Exit Select End SelectEnd Sub


5. Add the onAction attribute to the four “button” elements. Your markup should look as follows:

XML

<button id="btnRibbonXPS" label="XPS" getEnabled="GetEnable" getImage="GetButtonImage" onAction="ExportDocument"/>

Note: The Id of the editBox might change to match the group (either XPS or PDF).

Exercise 1 Verification

In order to verify that you have correctly performed all steps in the above exercise, proceed as follows:

Test the Add-in

Test your add-in to confirm that the export ribbon and backstage buttons work as expected.



b. Once Word 2010 loads, type a phrase in the document and click the Backstage button (labeled as File)

c. In Backstage switch to the Export tab

d. Check the Allow XPS Export check box

e. Enter an Export Path, for example: Export.xps

Note: Remember you did not provide any validation for the export path. So make sure you enter a valid path.

Figure 5Export as XPS

2. Click the To XPS button and using Windows Explorer navigate to the folder and open the Export.xps document. Close the .xps file.

3. Verify the Home ribbon contains a new Quick Format button

a. Switch to the Home ribbon tab and type an additional phrase into the document

b. Click the Quick Export button and click the XPS button. Navigate to the .xps document and view it again to see your changes.

Figure 6Quick Export Ribbon Button

4. When you are done cleanup and remove the add-in

a. Close Word 2010

b. In the Solution Explorer, right click ExportAddIn and click Clean

Exercise 2: Create a Custom Task Pane

In this exercise you will create a custom task pane that can be used to insert snippets of text into the active document. A ribbon button will toggle visibility of a custom task pane that hosts a WPF User Control

Task 1 – Creating a Custom Task Pane

In this first task, you will use a pre-created WPF user control as a task pane.

1. Open Microsoft Visual Studio 2010 and open the WPFTaskPane.sln solution located at \Source\Ex2-WPFTaskPane\Begin\ (Choosing the folder that matches the language of your preference.)

2. Open ThisAddIn.cs (C#) or ThisAddIn.vb (VB) by double clicking it in the Solution Explorer

3. Locate the ThisAddIn_Startup method and add the following code to create a new UserControl

C#

UserControl taskPane = new UserControl();

Visual Basic

Dim taskPane = new UserControl()

4. Below, in the same method, create a new ElementHost control to contain the WPF user control and add it to the Windows Forms UserControl

C#

taskPane.Controls.Add( new ElementHost { Child = new TaskPane(), Dock = DockStyle.Fill });

Visual Basic

taskPane.Controls.Add( New ElementHost With { .Child = New TaskPane(),

.Dock = DockStyle.Fill })

5. Next to the previous code, add the Windows forms user control to the add-in as a task pane, to do this:

a. Create a new CustomTaskPane object wrapping the user control from the previous step

C#

Microsoft.Office.Tools.CustomTaskPane formulaTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets");

Visual Basic

Dim formulaTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets")

a. Set the visibility and size of the new task pane

C#

formulaTaskPane.Visible = true;formulaTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight;formulaTaskPane.Width = 300;

Visual Basic

formulaTaskPane.Visible = TrueformulaTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRightformulaTaskPane.Width = 300

Task 2 – Adding Snippets Ribbon Button

In this second task, you will add a ribbon button that will toggle the visibility of the snippets task pane.


2. Add the tab element referencing the standard View ribbon tab

XML

<ribbon> <tabs> <tab idMso="TabView"> </tab>

</tabs></ribbon>

3. Add a snippets group and toggle button to the <tab> element

XML

<group id="GroupSnippets" label="Snippets"> <toggleButton id="Snippets" label="Pane" size="large" imageMso="PageMenu" getPressed="IsSnippetsPressed" onAction="SnippetsToggle" /></group>

4. Add the code behind to process the button toggle changes, to do this:

a. Open Ribbon.cs (C#) or Ribbon.vb (VB) by double clicking it in the Solution Explorer

b. Add an IsSnippetPressed method to the Ribbon class

C#

public bool IsSnippetsPressed(Office.IRibbonControl control){ return Globals.ThisAddIn.CustomTaskPanes[0].Visible;}

Visual Basic

Public Function IsSnippetsPressed(ByVal control As Office.IRibbonControl) As Boolean Return Globals.ThisAddIn.CustomTaskPanes(0).VisibleEnd Function

Note: The status is set using the Visible property of the CustomTaskPane object

c. Below, in the same class, add a SnippetsToggle method to the Ribbon class

C#

public void SnippetsToggle(Office.IRibbonControl control, bool value){ Globals.ThisAddIn.CustomTaskPanes[0].Visible = value;}

Visual Basic

Public Sub SnippetsToggle(ByVal control As Office.IRibbonControl, ByVal value As Boolean) Globals.ThisAddIn.CustomTaskPanes(0).Visible = valueEnd Sub

Note: The value of the button is stored directly in the CustomTaskPane object



Test the Add-in




b. Once Word 2010 loads, switch to the Views ribbon tab

c. On the View tab, click the Pane button in the Snippets group and verify the task pane is shown and hidden

d. Double click one of the items in the task pane and verify the content is added to the document

Figure 7Custom Task Pane


a. Close Word 2010

b. In the Solution Explorer, right click WPFTaskPane and click Clean

Exercise 3: Outlook Form Regions

In this exercise you will use an Outlook Form Region to extend the Task form in Outlook. The extensions will allow tracking of billable tasks within Outlook’s storage location.

Task 1 – Creating a Form Region

In this first task, you will create a new Outlook Form Region attached to the existing Task forms in Outlook.

1. Open Microsoft Visual Studio 2010 and create a new Outlook 2010 Add-in project. To do this, Select File\New Project

2. In the New Project dialog choose an Outlook 2010 Add-in template, located under Office\ 2010

3. Set the Name of the project to OutlookFormRegion and set the location to \Source\Ex3-OutlookFormRegion\Begin\ (choosing the folder that matches the language of your preference.)

4. Verify Create directory for solution is unchecked and click OK to create the new project

Figure 8New Outlook 2010 Addin Project (C#)

Figure 9New Outlook 2010 Addin Project (VB)

5. Add a new form region named BillableTaskRegion to the Task form, to do this:

a. Right click on OutlookFormRegion in the Solution Explorer and click Add\ New Item

b. In the Add New Item dialog choose OutlookFormRegion from the Office templates

c. Type BillableTaskRegion as name, and click Add to create the new item.

d. In the first page of the New Outlook Form Region wizard, choose Design a new form region and click Next

e. In the next page, select Adjoining and click Next

Figure 10Choose Form Region Type

f. Change the name to Billable Task and click Next

g. Choose the Task option and clear all other check boxes then click Finish

Figure 11Choose Form Region Class

Note: The message classes chosen determine which types of items receive the new form region. In this case you will be extending the IPM.Task message class only

Task 2 – Implementing the Form Region

In this second task, you will add controls to the form and implement the code behind necessary to make the form region functional.

The Billable Task extensions pane will end-up looking as the following:

Figure 12Completed Custom Form Region

1. Open the designer for BillableTaskRegion.cs (C#) or BillableTaskRegion.vb (VB) by right clicking it in the Solution Explorer and clicking View Designer

2. Right click the design surface and click Properties

3. In the Properties window, set the size of the canvas to 486, 150

4. Using the toolbox, drag the following controls onto the canvas in the layout showed in Figure 10.

a. 1 CheckBox

b. 1 ComboBox

c. 1 NumericUpDown

d. 1 TextBox

e. 2 Labels

5. Set the following properties on the CheckBox controls

a. (Name) & Text – chkBillable & Billable

b. Location & Size – 6, 6 & 59, 17

6. Set the following properties on one of the Label controls

a. Text –Customer

b. Location & Size – 87, 7 & 51, 13

7. Set the following properties on the ComboBox control

a. (Name) – lstCustomer

b. Location & Size – 143, 4 & 167, 21

c. Items – Fabrikam Inc., Adventure Works

Note: Enter each company on its own line

8. Set the following properties on the remaining Label control

a. Text –Hours

b. Location & Size – 347, 7 & 35, 13

9. Set the following properties on the NumericUpDown control

a. (Name) – numHours

b. Location & Size – 386, 4 & 95, 20

10. Set the following properties on the TextBox control

a. (Name) - txtDetails

b. Multiline - true

c. Location & Size – 5, 31 & 476, 116

d. Anchor – Top, Bottom, Left, Right

11. Add the code behind that will implement the form’s functionality

a. Open the code behind for BillableTaskRegion.cs (C#) or BillableTaskRegion.vb (VB) by right clicking it in the Solution Explorer and clicking View Code

b. Add the following properties to the BillableTaskRegion class

(Code Snippet –Office UI Customization – Outlook Properties – CSharp)

C#

private Outlook.TaskItem m_taskItem;private Outlook.ItemProperty m_isBillable;private Outlook.ItemProperty m_customer;private Outlook.ItemProperty m_hours;private Outlook.ItemProperty m_details;

(Code Snippet –Office UI Customization – Outlook Properties – VB)

Visual Basic

Private m_taskItem As Outlook.TaskItemPrivate m_isBillable As Outlook.ItemPropertyPrivate m_customer As Outlook.ItemPropertyPrivate m_hours As Outlook.ItemPropertyPrivate m_details As Outlook.ItemProperty

c. In the same class, add the EnsureItemProperty method to aid in creating custom properties on the task

(Code Snippet –Office UI Customization – EnsureItemProperty Method– CSharp)

C#

private void EnsureItemProperty(ref Outlook.ItemProperty property, string name, Outlook.OlUserPropertyType propertyType){ if (property == null) { property = m_taskItem.ItemProperties[name]; if (property == null) property = m_taskItem.ItemProperties.Add(name, propertyType); }}

(Code Snippet –Office UI Customization – EnsureItemProperty Sub– VB)

Visual Basic

Private Sub EnsureItemProperty(ByRef prop As Outlook.ItemProperty, ByVal name As String, ByVal propertyType As Outlook.OlUserPropertyType) If prop Is Nothing Then prop = m_taskItem.ItemProperties(name) If prop Is Nothing Then prop = m_taskItem.ItemProperties.Add(name, propertyType) End If End IfEnd Sub

d. Next to the previous code, add the EnsureProperties method to verify all of the custom task properties exists

(Code Snippet –Office UI Customization – EnsureProperties Method– CSharp)

C#

private void EnsureProperties(){ EnsureItemProperty(ref m_isBillable, "Billable", Outlook.OlUserPropertyType.olYesNo); EnsureItemProperty(ref m_customer, "Billable Customer", Outlook.OlUserPropertyType.olText); EnsureItemProperty(ref m_hours, "Billable Hours", Outlook.OlUserPropertyType.olNumber); EnsureItemProperty(ref m_details, "Billing Details", Outlook.OlUserPropertyType.olText);

}

(Code Snippet –Office UI Customization – EnsureProperties Sub– VB)

Visual Basic

Private Sub EnsureProperties() EnsureItemProperty(m_isBillable, "Billable", Outlook.OlUserPropertyType.olYesNo) EnsureItemProperty(m_customer, "Billable Customer", Outlook.OlUserPropertyType.olText) EnsureItemProperty(m_hours, "Billable Hours", Outlook.OlUserPropertyType.olNumber) EnsureItemProperty(m_details, "Billing Details", Outlook.OlUserPropertyType.olText)End Sub

e. Add the UpdateEnableState method, to update the state of the controls based on the state of the Billable checkbox

(Code Snippet –Office UI Customization – UpdateEnableState Method– CSharp)

C#

public void UpdateEnableState(){ lstCustomer.Enabled = chkBillable.Checked; numHours.Enabled = chkBillable.Checked; txtDetails.Enabled = chkBillable.Checked;}

(Code Snippet –Office UI Customization – UpdateEnableState Method– VB)

Visual Basic

Public Sub UpdateEnableState() lstCustomer.Enabled = chkBillable.Checked numHours.Enabled = chkBillable.Checked txtDetails.Enabled = chkBillable.CheckedEnd Sub

f. In the same class, implement FormRegionShowing method to load the current property values into the controls and setup the initial state of the form region

(Code Snippet –Office UI Customization – FormRegionShowing Implementation – CSharp)

C#

m_taskItem = this.OutlookItem as Outlook.TaskItem;

EnsureProperties();chkBillable.Checked = m_isBillable.Value;UpdateEnableState();

lstCustomer.SelectedText = m_customer.Value;numHours.Value = (decimal)m_hours.Value;txtDetails.Text = m_details.Value;

(Code Snippet –Office UI Customization – FormRegionShowing Implementation – VB)

Visual Basic

m_taskItem = TryCast(Me.OutlookItem, Outlook.TaskItem)

EnsureProperties()chkBillable.Checked = m_isBillable.ValueUpdateEnableState()

lstCustomer.SelectedText = m_customer.ValuenumHours.Value = CDec(m_hours.Value)txtDetails.Text = m_details.Value

12. In the same BillableTaskRegion class, add code behind that will write the contents of the controls as they change

a. Create a method named chkBillable_CheckedChanged to handle the Billable check box’s checked event

C#

private void chkBillable_CheckedChanged(object sender, EventArgs e){ m_isBillable.Value = chkBillable.Checked; UpdateEnableState();}

Visual Basic

Private Sub chkBillable_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs) Handles chkBillable.CheckedChanged m_isBillable.Value = chkBillable.Checked UpdateEnableState()End Sub

b. Create a method named lstCustomer_TextChanged to handle the Customer drop down control’s changed event

C#

private void lstCustomer_TextChanged(object sender, EventArgs e){ m_customer.Value = lstCustomer.Text;}

Visual Basic

Private Sub lstCustomer_TextChanged(ByVal sender As Object, ByVal e As EventArgs) Handles lstCustomer.TextChanged m_customer.Value = lstCustomer.TextEnd Sub

c. Create a method named numHours_ValueChanged to handle changes in the Hours control

C#

private void numHours_ValueChanged(object sender, EventArgs e){ m_hours.Value = (double)numHours.Value;}

Visual Basic

Private Sub numHours_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) Handles numHours.ValueChanged m_hours.Value = CDec(numHours.Value)End Sub

d. Create a method named txtDetails_TextChanged to handle changes to the Details control

C#

private void txtDetails_TextChanged(object sender, EventArgs e){ m_details.Value = txtDetails.Text;}

Visual Basic

Private Sub txtDetails_TextChanged(ByVal sender As Object, ByVal e As EventArgs) Handles txtDetails.TextChanged m_details.Value = txtDetails.TextEnd Sub

13. Connect the code behind to the controls using the designer

Note: This step is only needed in C#

a. Open the designer for BillableTaskRegion.cs (C#) by right clicking it in the Solution Explorer and clicking View Designer

b. Right click the Billable check box control and click Properties

c. In the Properties window, click the Event icon (the lightning bolt)

d. Set the CheckedChanged event to chkBillable_CheckedChanged using the drop down list

Figure 13Control Events

e. Repeat the above process to attach the Customer control’s TextChanged event to the lstCustomer_TextChanged method

f. Repeat the above process to attach the Hours control’s ValueChanged event to the numHours_ValueChanged method

g. Repeat the above process to attach the Details control’s TextChanged event to the txtDetails_TextChanged method



Test the Add-in




b. Once Outlook 2010 loads, switch to the Home ribbon tab

c. Click the New Items -> Task option to create a new task

d. Verify the Billable Task form region is visible

Figure 14Custom Task Form Region

e. Enter some data into the new task and save it

f. Switch to the Tasks section using the buttons in the lower left and open the task you just created.

g. Verify the information in the Billable Task region is loading correctly


a. Close Word 2010

b. In the Solution Explorer, right click OutlookFormRegion and click Clean

Summary

In this exercise you learned how to extend Office application using custom ribbons, backstage tabs, task panes, and Outlook form regions. Each of these tools are used to solve a different problem. Ribbons provide functionality while editing while Backstage provides tools that work on the state of the document, no necessarily the content.

microsoft office 2010 ui customization -...

Documents