Partager via

How to: Create a Toolbox Control That Uses WPF

  • Article

The WPF Toolbox Control template that is included in the Visual Studio 2010 SDK lets you create Windows Presentation Foundation (WPF) controls that are automatically added to the Toolbox when the extension is installed. This topic shows how to use the template to create a Toolbox control that you can distribute to other users. For a full implementation of a WPF Toolbox Control, see Walkthrough: Creating a WPF Toolbox Control.

Notes

For more information about the Visual Studio SDK, see Visual Studio Integration SDK. To find out how to download the Visual Studio SDK, see Visual Studio Extensibility Developer Center on the MSDN Web site.

Creating a Toolbox Control

Use the WPF Toolbox Control template to create the project, and then build a user interface (UI) in the Extensible Application Markup Language (XAML) designer.

To create a WPF Toolbox Control project

  1. On the File menu, click New, and then click Project.

  2. In the New Project dialog box, under Installed Templates, click the node for your preferred programming language and then click Extensibility. In the list of project types, select WPF Toolbox Control.

  3. In the Name box, type the name you want to use for the project. Click OK.

    Visual Studio creates a solution that contains a user control, an attribute to put the control in the Toolbox, and a VSIX manifest for deployment.

To build the control UI

  1. In Solution Explorer, double-click ToolboxControl.xaml to open it in the designer.

    The designer shows a Grid control that contains a Button control.

  2. Arrange the grid layout.

    When you select the Grid control, blue control bars appear on the top and left edges of the grid. You can add rows and columns to the grid by clicking the bars.

  3. Add child controls to the grid.

    You can position a child control by dragging it from the Toolbox to a section of the grid, or by setting its Grid.Row and Grid.Column attributes in the XAML. The following example positions two labels on the top row of a grid, and positions a button on the second row.

    <Button Content="Reset" Name="button1" Click="button1_Click" Grid.Row="1" Grid.ColumnSpan="2" />
<Label Content="{Binding Text}" Grid.Row="0" Grid.Column="0" Name="label1" />
<Label Content="{Binding Count}" Grid.Row="0" Grid.Column="1" Name="label2" />

Coding the Control

By default, your control will appear in the Toolbox as ToolboxControl1 in a Toolbox item group that has the same name as your solution. You can change these names in the ToolboxControl.xaml.cs file.

To code the control

  1. In Solution Explorer, right-click ToolboxControl.xaml.cs and then click View Code to open the file in code view.

  2. At the definition of the partial class that implements the control, right-click the class name, click Refactor, and then click Rename. Change the name of the class to the name that you want to be displayed in the Toolbox when the control is installed.

  3. Immediately above the class definition, in the ProvideToolboxControl attribute declaration, change the value of the first parameter to the name of the item group that will host the control in the Toolbox.

    The following example shows the ProvideToolboxControl attribute and the adjusted class definition for a control named Counter in the General item group.

    [ProvideToolboxControl("General", true)]
public partial class Counter : UserControl

  4. Implement the properties, methods, and events for the control.

Building, Testing, and Deployment

Pressing F5 builds the project, which includes a .vsix deployment file, and opens a second instance of Visual Studio that has the control installed in the Toolbox.

To build and test the control

  1. Press F5.

  2. In the new instance of Visual Studio, create a WPF Application project.

  3. Find your control in the Toolbox and drag it to the design surface.

  4. In the Properties window, verify that your properties appear as expected.

  5. Add any code or additional controls that are required to test your methods and events.

  6. Press F5 to open the WPF application.

  7. Verify that the properties, methods, and events of your control behave as expected.

To deploy the control

  1. After you build the tested project, open the \bin\debug\ folder of the project in Windows Explorer and locate the .vsix file.

  2. Upload the .vsix file to a network or to a Web site.

    If you upload the file to the Visual Studio Gallery Web site, other users can use Extension Manager in Visual Studio to find the control and install it.

See Also

Tasks

Walkthrough: Creating a WPF Toolbox Control

How to: Create a Toolbox Control That Uses Windows Forms

Other Resources

Toolbox (Visual Studio SDK)