office 2010 ui customization lab - az12722.vo.msecnd.netaz12722.vo.msecnd.net/.../lab.docx · web...

Hands-On LabOffice 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 – Add Export Backstage tab......................................................................................................4

Task 2 – Connect Backstage tab to document properties....................................................................8

Task 3 – Add quick export buttons to the Home ribbon tab..............................................................13

Exercise 1 Verification.......................................................................................................................17

EXERCISE 2: CREATE A CUSTOM TASK PANE...................................................................................18Task 1 – Creating a custom Task Pane...............................................................................................19

Task 2 – Add Snippets Ribbon Button................................................................................................20


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

Task 2 – Implement the Form Region................................................................................................25


SUMMARY................................................................................................................................................ 33

Overview

In this exercise, you will explore the different ways in which Office 2010’s UI can be customized to provide a platform for building rich office applications. You will make use of C#/VB and the Visual Studio support for Office 2010.

Objectives

In this lab you will:

Customize the Office 2010 UI using Office 2010

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® Windows® Vista SP1 or Microsoft® Windows Server 2008 (64-bit)

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

Microsoft® Visual Studio 2010

Exercises

This Hands-On Lab is comprised of one exercise with the following tasks:

1. End-User Customization

2. Customizing the Office UI with Add-Ins

3. Outlook Form Regions

Estimated time to complete this lab: 60 minutes.

Starting Materials

This Hands-On Lab includes the following starting materials.

Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises. Lab instructions will reference the Training Kit location after installation as %Office2010DeveloperTrainingKitPath%.

◦ %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\ExportAddIn.sln: Contains a starting point for the Export Add-in that contains the needed resource images.

◦ %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\WPFTaskPane.sln: Contains a starter TaskPane with the WPF User Control already defined.

Note: Inside the lab’s Source folder, you will find a Solution folder containing an end solution with the completed lab exercise.

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 – Add Export Backstage tab

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

1. Add a new XML Ribbon item to the existing ExportAddIn project

a. Open Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\ExportAddIn\ExportAddIn.sln

b. Right click ExportAddIn in the Solution Explorer and choose Add -> New Item.

c. In the Add New Item dialog, select the Office category.

d. Choose the Ribbon (XML) item type and enter a name of Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#)

e. Click Add to create the new ribbon

Figure 1(a)-In case of C#Add Ribbon (XML) Item

Figure 1(b)-In case of VBAdd Ribbon (XML) Item

f. Open the Ribbon.xml file located in the Solution Explorer

2. 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

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

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 a 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

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>

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

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

b. Add the following GetButtonImage method to the Ribbon class

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; }}

Visual Basic

Public Function GetButtonImage(ByVal control As Office.IRibbonControl) As System.Drawing.Bitmap

Select Case control.IdCase "btnBackStageXPS"

Return My.Resources.XPSCase "btnBackStagePDF"

Return My.Resources.PDFCase Else

Return NothingEnd 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.

4. Override the CreateRibbonExtensibilityObject method in the add-in to define the ribbon to load

a. Open the ThisAddIn class by double clicking it in the Solution Explorer

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

C#

protected override Office.IRibbonExtensibility CreateRibbonExtensibilityObject(){ return new Ribbon();}

Visual Basic

Protected Overrides Function CreateRibbonExtensibilityObject() As Office.IRibbonExtensibility

Return New Ribbon()End Function

5. 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 2Custom Backstage Export tab

Task 2 – Connect Backstage tab to 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.

1. Define the code behind that will determine when the button and editBox controls are enabled

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

b. Add a getEnabled attribute to the button and editBox controls

XML

<button id="btnBackStageXPS" getEnabled="GetEnable" ... />

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

c. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer

d. Add the following private field to the class

C#

private ExportProperties m_properties = new ExportProperties();

Visual Basic

Private m_properties As New ExportProperties()

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

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

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; }}

Visual Basic

Public Function GetEnable(ByVal control As Office.IRibbonControl) As Boolean

Select Case control.IdCase "btnBackStageXPS", "txtXPSPath"

Return m_properties.XpsEnabledCase "btnBackStagePDF", "txtPDFPath"

Return m_properties.PdfEnabledCase Else

Return FalseEnd Select

End Function

2. Add code to populate and respond to events from the enabled checkboxes


b. Add a getPressed and onAction attribute to every checkBox element in the Backstage markup

XML

<checkBox id="chkEnablePDF" getPressed="IsEnableChecked" onAction="EnableChecked" .../>

Note: You should find 2 checkBox controls


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

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;}

Visual Basic

Public Function IsEnableChecked(ByVal control As Office.IRibbonControl) As Boolean

If control.Id = "chkEnableXPS" ThenReturn m_properties.XpsEnabled

ElseIf control.Id = "chkEnablePDF" ThenReturn m_properties.PdfEnabled

ElseReturn False

End IfEnd Function

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

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"); }}

Visual Basic

Public Sub EnableChecked(ByVal control As Office.IRibbonControl, ByVal value As Boolean)

If control.Id = "chkEnableXPS" Thenm_properties.XpsEnabled = valueribbon.InvalidateControl("btnBackStageXPS")ribbon.InvalidateControl("txtXPSPath")

ElseIf control.Id = "chkEnablePDF" Thenm_properties.PdfEnabled = valueribbon.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.

3. Add code to populate and respond to events from the path edit boxes


b. Add a getText and onChange attribute to every editBox element

XML

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

Note: You should find 2 editBox controls


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

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; }

Visual Basic

Public Function GetExportPath(ByVal control As Office.IRibbonControl) As String

If control.Id = "txtXPSPath" ThenReturn m_properties.XpsExportPath

ElseIf control.Id = "txtPDFPath" ThenReturn m_properties.PdfExportPath

ElseReturn String.Empty

End IfEnd Function

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

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;}

Visual Basic

Public Sub SetExportPath(ByVal control As Office.IRibbonControl, ByVal value As String)

If control.Id = "txtXPSPath" Then

m_properties.XpsExportPath = valueElseIf control.Id = "txtPDFPath" Then

m_properties.PdfExportPath = valueEnd If

End Sub

4. 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 1Enable check box in Backstage tab

Task 3 – Add 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. Add the ribbon markup to the Ribbon.xml file


b. Add the markup that will create a new Quick Export group in the Home tab

i. Make sure the ribbon xml element is added before the backstage xml element

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.

c. 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

d. 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" />

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


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 "btnRibbonXPS", "btnBackStageXPS"Return My.Resources.XPS

Case "btnRibbonPDF", "btnBackStagePDF"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 "btnRibbonXPS", "btnBackStageXPS", "txtXPSPath"Return m_properties.XpsEnabled

Case "btnRibbonPDF", "btnBackStagePDF", "txtPDFPath"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" Thenm_properties.XpsEnabled = valueribbon.InvalidateControl("btnRibbonXPS")ribbon.InvalidateControl("btnBackStageXPS")ribbon.InvalidateControl("txtXPSPath")

ElseIf control.Id = "chkEnablePDF" Thenm_properties.PdfEnabled = valueribbon.InvalidateControl("btnRibbonPDF")

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

End If

3. Create the method that will perform the export when the buttons are clicked


b. Add the following using statements to the file

C#

using Microsoft.Office.Interop.Word;

Visual Basic

Imports Microsoft.Office.Interop.Word

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

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; }}

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)

Case "btnRibbonPDF", "btnBackStagePDF"

Globals.ThisAddIn.Application.ActiveDocument.ExportAsFixedFormat(m_properties.PdfExportPath, WdExportFormat.wdExportFormatPDF)

End SelectEnd Sub

4. Add the onAction attributes to all of the buttons in the Ribbon and Backstage


b. Add a onAction attribute to every button element

XML

<button id="btnRibbonXPS" onAction="ExportDocument" ... />

Note: You should find 4 button controls

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 of %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\Export.xps

Figure 4Export 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 5Quick Export Ribbon Button

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

a. Close Word 2010

b. In the Solution Explorer, right click Word2010AddIn 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. Create a Windows Forms UserControl to host the WPF Task Pane

a. Open Visual Studio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\WPFTaskPane\ WPFTaskPane.sln

b. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer

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

C#

UserControl taskPane = new UserControl();

Visual Basic

Dim taskPane As New UserControl()

d. 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})

2. Add the Windows forms user control to the add-in as a task pane

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

C#

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

Visual Basic

Dim snippetsTaskPane As Microsoft.Office.Tools.CustomTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets")

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

C#

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

Visual Basic

snippetsTaskPane.Visible = TruesnippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRightsnippetsTaskPane.Width = 300

Task 2 – Add Snippets Ribbon Button

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

1. Add a toggle button to the View ribbon tab


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

XML

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

c. 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>

2. Add the code behind to process the button toggle changes


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. 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 6Custom 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. Create new Outlook 2010 add-in project

a. Open Visual Studio 2010 and select File -> New -> Project

b. In the New Project dialog select the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office -> 2010 templates

c. Choose an Outlook 2010 Add-in template

d. Set the Name of the project to OutlookFormRegion and set the location to %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter

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

Figure 7(a)-In case of C#

Figure 7(b)- In case of VBNew Outlook 2010 Addin Project

2. Add a new form region named BillableTaskRegion to the Task form

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

b. In the Add New Item dialog choose the Visual C#(in case of C#)/ Visual Basic(in case of VB) -> Office templates

c. Choose OutlookFormRegion and name it BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of C#)

d. Click Add to create the new item

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

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

Figure 8Choose Form Region Type

g. Change the name to Billable Task and click Next

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

Figure 9Choose 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 – Implement 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.

1. Add the controls to the form region to create the Billable Task extensions

Figure 10Completed Custom Form Region

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

b. Right click the design surface and click Properties

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

d. Using the toolbox, drag the following controls onto the canvas

i. 1 CheckBox

ii. 1 ComboBox

iii. 1 NumericUpDown

iv. 1 TextBox

v. 2 Labels

e. Set the following properties on the CheckBox controls

i. (Name) & Text – chkBillable & Billable

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

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

i. Text –Customer

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

g. Set the following properties on the ComboBox control

i. (Name) – lstCustomer

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

iii. Items – Fabrikam Inc., Adventure Works

Note: Enter each company on its own line

h. Set the following properties on the remaining Label control

i. Text –Hours

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

i. Set the following properties on the NumericUpDown control

i. (Name) – numHours

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

j. Set the following properties on the TextBox control

i. (Name) - txtDetails

ii. Multiline - true

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

iv. Anchor – Top, Bottom, Left, Right

2. Add the code behind that will implement the functionality of the form

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

b. Add the following properties to the BillableTaskRegion class

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;

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. Add the EnsureItemProperty method to aid in creating custom properties on the task

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); }}

Visual Basic

Private Sub EnsureItemProperty(ByRef [property] As Outlook.ItemProperty, ByVal name As String, ByVal propertyType As Outlook.OlUserPropertyType)

If [property] Is Nothing Then[property] = m_taskItem.ItemProperties(name)If [property] Is Nothing Then

[property] = m_taskItem.ItemProperties.Add(name, propertyType)

End IfEnd If

End Sub

d. Add the EnsureProperties method to verify all of the custom task properties exists

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);}

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 UpdateEnableState to update the state of the controls based on the state of the Billable checkbox

C#

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

Visual Basic

Public Sub UpdateEnableState()lstCustomer.Enabled = chkBillable.Checked

numHours.Enabled = chkBillable.CheckedtxtDetails.Enabled = chkBillable.Checked

End Sub

f. Implement FormRegionShowing to load the current property values into the controls and setup the initial state of the form region

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;

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

3. 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)

m_isBillable.Value = chkBillable.CheckedUpdateEnableState()

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)

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)

m_hours.Value = CDbl(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)

m_details.Value = txtDetails.Text

End Sub

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

a. Open the designer for BillableTaskRegion.vb(in case of VB) & BillableTaskRegion.cs(in case of 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 11Control 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 12Custom 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.

office 2010 ui customization lab - az12722.vo.msecnd.netaz12722.vo.msecnd.net/.../lab.docx · web...

Documents