We all reuse our windows controls out of the toolbox so why not our WPF user controls? The process is really the same. To show the steps involved let’s first write a simple WPF user control.
After renaming the control and adding a WPF application project to my solution(to test with), my solution looks like this
Since the functionality of the control is not important in this article, I just pasted in some animation code from msdn into my MyDemoControl.xaml file.
<UserControl x:Class="MyDemoControl.MyDemoControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="156" Width="267">
<!-- This example :
from http://msdn.microsoft.com/en-us/library/system.windows.media.animation.pointanimation.aspx
shows how to use PointAnimation to animate the
position of an ellipse by animating the Center property of an
EllipseGeometry. PointAnimation is used because the Center property
takes a Point value. -->
<Canvas>
<Path Fill="Blue" Margin="15,15,15,15">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="0,0" RadiusX="15" RadiusY="15" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<!-- Animate the Center property so that the ellipse animates from
one point on the screen to another. -->
<PointAnimation
Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:2" From="0,0" To="156,267" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</UserControl>
Now let’s add the control to the toolbox!
Step 1:
Add a using statement to the top of you control's .cs file. This is needed for the ToolboxBitmap we will be using.
Step 2:
Add a image resource to the project for an icon. (right click the project in solution explorer, choose properties, choose Resources tab)
You can use an existing or create a new icon. I created a new one.
First select Images from the left dropdown
Then click the add resource button
Enter the image name in the dialog that pops up.
The name you use is extremely important.
Note it should be the class name followed by a period then the word “icon”.
I tried to draw a “W” for my icon.
In the properties window change the Build Action property for the BMP to Embedded Resource.
Note the full name of the file is the class + “icon” + the extension
Step 3:
Add an ToolboxBitmap attribute to your control class.
[ToolboxBitmap(typeof(MyDemoControl))]
public partial class MyDemoControl : UserControl
{
public MyDemoControl()
{
InitializeComponent();
Notice only the type is needed because of our naming convention used on our bitmap.
Build the control project.
Step 4:
Now to add it to the toolbox,
Right click in the toolbox (where you want the control to be located) and select Choose Items.
You may need to wait a bit for the Choose Toolbox Items dialog to appear. When it does,
Choose the WPF Components tab. This is important! The .Net tab will not work for WPF controls.
Click the browse button and navigate out to your DLL, choose it, click Open.
Once you have selected your DLL you should see the icon that will be used for your control on the dialog
Click OK. You should now see the control in your toolbox with proper icon.
Step 5:
Switch back to the WPF Application project in the solution.
Drag your new control out of the toolbox and position it in the Window element.
Set the WPF Application project to be startup.
Run to test the behavior.