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.
- Create a Windows Forms UserControl to host the WPF Task Pane
- Open VisualStudio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\WPFTaskPane\ WPFTaskPane.sln
- Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
Locate the ThisAddIn_Startup method and add the following code to create a new UserControl
UserControl taskPane = new UserControl();
Dim taskPane As New UserControl()
Create a new ElementHost control to contain the WPF user control and add it to the Windows Forms UserControl
taskPane.Controls.Add( new ElementHost { Child = new TaskPane(), Dock = DockStyle.Fill });
taskPane.Controls.Add(New ElementHost With {.Child = New TaskPane(), .Dock = DockStyle.Fill})
- Add the Windows forms user control to the add-in as a task pane
Create a new CustomTaskPane object wrapping the user control from the previous step
Microsoft.Office.Tools.CustomTaskPane snippetsTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets");
Dim snippetsTaskPane As Microsoft.Office.Tools.CustomTaskPane = CustomTaskPanes.Add(taskPane, "Custom Snippets")
- Set the visibility and size of the new task pane
snippetsTaskPane.Visible = true; snippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight; snippetsTaskPane.Width = 300;
snippetsTaskPane.Visible = True snippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight snippetsTaskPane.Width = 300
In this second task, you will add a ribbon button that will toggle the visibility of the snippets task pane.
- Add a toggle button to the View ribbon tab
- Open Ribbon.xml by double clicking it in the Solution Explorer
Add the tab element referencing the standard View ribbon tab
<ribbon> <tabs> <tab idMso="TabView"> </tab> </tabs> </ribbon>
Add a snippets group and toggle button to the tab element
<group id="GroupSnippets" label="Snippets"> <toggleButton id="Snippets" label="Pane" size="large" imageMso="PageMenu" getPressed="IsSnippetsPressed" onAction="SnippetsToggle" /> </group>
- Add the code behind to process the button toggle changes
- Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
Add an IsSnippetPressed method to the Ribbon class
public bool IsSnippetsPressed(Office.IRibbonControl control) { return Globals.ThisAddIn.CustomTaskPanes[0].Visible; }
Public Function IsSnippetsPressed(ByVal control As Office.IRibbonControl) As Boolean Return Globals.ThisAddIn.CustomTaskPanes(0).Visible End Function
The status is set using the Visible property of the CustomTaskPane object
- Add a SnippetsToggle method to the Ribbon class
public void SnippetsToggle(Office.IRibbonControl control, bool value) { Globals.ThisAddIn.CustomTaskPanes[0].Visible = value; }
Public Sub SnippetsToggle(ByVal control As Office.IRibbonControl, ByVal value As Boolean) Globals.ThisAddIn.CustomTaskPanes(0).Visible = value End Sub
The value of the button is stored directly in the CustomTaskPane object
Exercise 2 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.
- Run the add-in and verify the enable checkboxes work
- In the Debug menu, click Start Without Debugging
- Once Word 2010 loads, switch to the Views ribbon tab
- On the View tab, click the Pane button in the Snippets group and verify the task pane is shown and hidden
Double click one of the items in the task pane and verify the content is added to the document
Figure 6
Custom Task Pane
- When you are done cleanup and remove the add-in
- Close Word 2010
- In the Solution Explorer, right click WPFTaskPane and click Clean