Walkthrough: Creating a Custom Toolbox Icon for a Control

  • Article

This walkthrough shows how to create a Toolbox icon for a Windows Presentation Foundation (WPF) custom control. When you add the custom control to the Toolbox, the icon appears next to the control's name.

In this walkthrough, you perform the following tasks:

  • Create a WPF custom control library project.

  • Create a custom bitmap file for the control's Toolbox icon.

  • Test the control's icon at design time.

When you are finished, you will know how create a Toolbox icon for a custom control.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010.

Creating a Custom Toolbox Icon

To create a custom Toolbox icon for a control, add an image as an embedded resource to the control's project.

To create a custom Toolbox icon

  1. Create a new WPF Custom Control Library project in Visual Basic or Visual C# named CustomControlWithToolboxIcon.

    The code for CustomControl1 opens in the Code Editor.

  2. From the Project menu, select Add New Item.

    The Add New Item dialog box opens.

  3. In the Add New Item dialog box, select the General category.

  4. In the list of templates, select Bitmap File, name the new file CustomControl1.Icon.bmp, and then click Add.

    The Image Editor opens.

  5. In the Properties window, set the bitmap's Colors property to 24 bit.

  6. Use the Image Editor tools to paint an image in the bitmap. For more information, see Image Editor.

  7. In Solution Explorer, select CustomControl1.Icon.bmp.

  8. In the Properties window, set the Build Action property to Embedded Resource.

  9. Build the solution.

    For more information, see Toolbox Icons.

Testing the Toolbox Icon

Test your custom Toolbox icon by adding CustomControl1 to the Toolbox.

To test the Toolbox icon

  1. Add a new WPF Application project in Visual Basic or Visual C# named TestApplication to the solution.

    MainWindow.xaml opens in the WPF Designer. In the Toolbox, CustomControl1 appears in the CustomControlWithToolboxIcon Controls tab.

    Toolbox with custom control

  2. In the Toolbox, right-click CustomControl1 and select Delete.

  3. In the message box that appears, click OK.

    CustomControl1 is removed from the Toolbox.

  4. In the Toolbox, right-click the control group where you want to add the control and then select Choose Items from the context menu.

    The Choose Toolbox Items dialog box opens.

  5. In the Choose Toolbox Items dialog box, click the WPF Components tab. For more information, see WPF Components Tab, Choose Toolbox Items Dialog Box.

  6. Click Browse and navigate to CustomControlWithToolboxIcon project's bin\Debug folder.

  7. In the Open dialog box, select CustomControlWithToolboxIcon.dll and click Open.

    Details of the CustomControlWithToolboxIcon assembly appear in the Choose Toolbox Items dialog box. Your custom icon appears in the CustomControl1 group box.

  8. Click OK.

    CustomControl1 appears in the Toolbox with its corresponding icon.

    Custom Toolbox icon

See Also

Tasks

How to: Embed an Icon in an Assembly

Walkthrough: Providing Metadata for Toolbox Icons

Reference

WPF Components Tab, Choose Toolbox Items Dialog Box

Concepts

Toolbox Icons

Other Resources

Using Resources