Walkthrough: Hosting a WPF User Control in a Tool Window

Article
11/16/2012

This walkthrough demonstrates how to create a Visual Studio tool window that contains a Windows Presentation Foundation (WPF) user control. For information about WPF user controls and the WPF, see Windows Presentation Foundation.

This walkthrough illustrates the following tasks:

Creating the tool window package.
Creating a basic WPF user control and adding it to the tool window.
Verifying that the tool window works as expected.

Prerequisites

You must have the following components to complete this walkthrough:

Visual Studio SDK

Creating the Project

Create a Visual Studio Integration Package project that provides a tool window. Later, you add a WPF control to this tool window.

To create the Visual Studio project

Create a Visual Studio package that provides a tool window. For more information, see How to: Create VSPackages (C# and Visual Basic). Name the package HostedWpfUserControl.
In the Visual Studio Integration Package Wizard, use the following settings:
- Set the programming language to Visual Basic or Visual C#.
- Use the default values on the Basic Package Information page.
- Add a tool window that is named Hosted WPF Clock Control.
Click Finish.

The wizard generates a project that contains a Windows Forms user control, MyControl, for the tool window.

Adding the WPF User Control

Add a WPF user control to your project. The user control presented here represents a clock. Then, add this WPF control to the control for the tool window in your package.

To create the WPF user control

In Solution Explorer, right-click the tool window project, point to Add, and then click New Item.
In the Add New Item dialog box, select the User Control (WPF) template, name it WpfClockControl, and click Add.

Open the WpfClockControl.xaml file for editing, and replace the child element of the UserControl element by using the following markup. This markup adds a date and time label.

<StackPanel Orientation="Vertical">
  <StackPanel Orientation="Horizontal" Margin="4,2" HorizontalAlignment="Left">
    <Label Name="dateLabel" Foreground="DarkSlateBlue" Margin="0" Padding="0">
      MM/dd/yyyy
    </Label>
  </StackPanel>
  <StackPanel Orientation="Horizontal" Margin="12,2,12,12" HorizontalAlignment="Center">
    <Label Name="timeLabel" Foreground="SlateBlue" Margin="0" Padding="0"
           FontSize="20" FontWeight="Bold">
      HH:mm:ss
    </Label>
  </StackPanel>
</StackPanel>

To open the code-behind file for editing, right-click in the XAML editor, and then click View Code.

Add the following method, SetTime, to the WpfClockControl class. Use this method to update the date and time that is displayed by the control.

Public Sub SetTime(ByVal t As Date)
    Me.dateLabel.Content = t.ToShortDateString()
    Me.timeLabel.Content = t.ToLongTimeString()
End Sub

public void SetTime(DateTime t)
{
    this.dateLabel.Content = t.ToShortDateString();
    this.timeLabel.Content = t.ToLongTimeString();
}

Save all files and verify that the solution builds.

To add the WPF user control to the tool window

Open the MyControl user control in design mode.
Remove the default button, button1, from the control.
In the Toolbox, open the WPF Interoperability tab, and add an ElementHost control to the user control.
Click the smart tag anchor on the upper-right corner of the ElementHost control to open the smart tag for this control.
1. Select WpfClockControl on the Select Hosted Content list.
2. Click Dock in parent container to set the Dock property to Fill.
3. Click outside the smart tag to close it.
In the Toolbox, open the Components tab, and add a Timer component to the user control.

On the design surface, select the timer. In the Properties window, change the Name to updateTimer, and change the Interval to 333.
Right-click the design surface, and then click View Code to open the MyControl class in the code editor.
Delete the button1_Click method that the wizard generated.

Add the methods shown in the following example. The MyControl_Load method will handle the Load event of the user control and the updateTimer_Tick method will handle the Tick event of the timer component. The UpdateClock method calls the SetTime method of the hosted WPF control to update the time and date that is displayed.

Private Sub MyControl_Load( _
ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles MyBase.Load
    UpdateClock()
    Me.updateTimer.Enabled = True 
End Sub 

Private Sub updateTimer_Tick( _
ByVal sender As System.Object, ByVal e As System.EventArgs) _
Handles updateTimer.Tick
    UpdateClock()
End Sub 

Private Sub UpdateClock()
    DirectCast(Me.ElementHost1.Child, WpfClockControl).SetTime(Date.Now)
End Sub

private void MyControl_Load(object sender, System.EventArgs e)
{
    UpdateClock();
    this.updateTimer.Enabled = true;
}

void updateTimer_Tick(object sender, System.EventArgs e)
{
    UpdateClock();
}

private void UpdateClock()
{
    ((WpfClockControl)this.elementHost1.Child).SetTime(DateTime.Now);
}

Right-click in the editor, and then click View Designer to open the MyControl class in design mode.
In the Properties window, select MyControl on the drop-down list. Click the Events button to display the events for the control. In the Behavior category, select the Load event, and select MyControl_Load on the event list.
In the Properties window, select updateTimer on the drop-down list. In the Behavior category, select the Tick event, and select updateTimer_Tick on the event list.
Save all files and verify that the solution builds.

Testing the Visual Studio Package

To test the tool window

Press F5 to start a second instance of Visual Studio in the experimental registry hive.

For more information about how to use the experimental hive, see Experimental Build.
Click the View menu, point to Other Windows, and then click Hosted WPF Clock Control, which is the command that opens the tool window you created.

Your WPF control should be displayed in the tool window as a running clock.

Change History

Date	History	Reason
July 2008	Added topic.	Content bug fix.

Share via