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
   1. Open VisualStudio 2010 and open the starter lab at %Office2010DeveloperTrainingKitPath%\Labs\OfficeUI\Source\[language]\Starter\WPFTaskPane\ WPFTaskPane.sln
   2. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) 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 As New UserControl()

   4. 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
   1. 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")

   2. 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 = True
      snippetsTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionRight
      snippetsTaskPane.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
   1. Open Ribbon.xml by double clicking it in the Solution Explorer
   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>

2. Add the code behind to process the button toggle changes
   1. Open Ribbon.vb(in case of VB) & Ribbon.cs(in case of C#) by double clicking it in the Solution Explorer
   2. 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).Visible
      End Function

      Note:

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

   3. 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 = value
      End Sub

      Note:

      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.

1. Run the add-in and verify the enable checkboxes work
   1. In the Debug menu, click Start Without Debugging
   2. Once Word 2010 loads, switch to the Views ribbon tab
   3. On the View tab, click the Pane button in the Snippets group and verify the task pane is shown and hidden
   4. Double click one of the items in the task pane and verify the content is added to the document

      

      Figure 6

      Custom Task Pane

2. When you are done cleanup and remove the add-in
   1. Close Word 2010
   2. In the Solution Explorer, right click WPFTaskPane and click Clean