Using custom controls in WPF applications

December 6, 2007 at 10:43 am | Posted in Visual Studio 2008, WPF | 14 Comments

One thing that has frustrated me in both Silverlight and WPF applications is the use of custom controls–not their creation but how to add them to my project.  With all of the namespaces, assemblies, references that have to be used just right, my success rate has been about 50-50.  Every time I think I know the technique, I get floored by some mysterious error.  And God help you if you try to change the namespace of something!  I can easily get my solution in an unrecoverable state!

Google to the rescue?  Hardly. While there are many sites with examples of custom controls, they usually go into great detail about the creation but not how to successfully add it to your project.  This piece of magic is assumed to be obvious.  When the application is shown, the namespaces and assembly names are often the same as the project or other names in the solution so it was not so clear which name is the important reference.

So this post is my attempt to help anyone else who might have this problem by documenting the rules (that seem to work for me) for adding a custom (or user) control to your project.

Scenario 1: Add new User Control

This should be the easiest to do.

  1. 1. Project > Add User Control
  2. 2. In the dialog box now is the time to name the control.  In my example it will be LocalUserControl .  This will add the .xaml and .cs files for the control which can be used to create the control
  3. 3. In the .xaml file for the application that is going to use the control, add a reference to the namespace that is used by the UserControl like this:  xmlns:local=”clr-namespace:AddingControls”  Unless you have made namespace changes to the UserControl, this will be the same namespace as your application. 
  4. 4. Refer to the UserControl in your xaml file with the local tag: <local:LocalUserControl /> (The designer may not show the control immediately.  You may have to run the application one time.)
  5. 5. If you add an x:Name attribute to the control in the .xaml, you can reference it in the .cs file.

Scenario 2: Add existing User Control to your solution

Suppose you have an application with a local UserControl that you would like to use and possibly modify in a new application.  You want to add the source code of this control to your project.

  1. 1. Project > Add Existing Item
  2. 2. Browse to the solution folder that you are going to get the control from and select both the .xaml and .cs files for the control.  These should be added to your new solution.
  3. 3. In the .xaml file for the application that is going to use the control, add a reference to the namespace that is used by the UserControl like this:  <xmlns:local=”clr-namespace:AnotherUserControlProj”/>  Note that this will probably be different than the namespace for the application you are creating. 
  4. 4. Refer to the UserControl in your xaml file with the local tag: <local:AnExistingControl /> (The designer may not show the control immediately.  You may have to run the application one time.)
  5. 5. If you add an x:Name attribute to the control in the .xaml, you can reference it in the .cs file.

Scenario 3: Using an externally referenced control (.dll)

User controls may be supplied in .dll form.  This is how you will get third party controls, most likely.

  1. 1. Project > Add Reference…
  2. 2. Browse to the .dll to be used and add it.
  3. 3. In the .xaml file for the application that is going to use the control, add a reference to the namespace of the control and to its assembly like this: <xmlns:local3=”clr-namespace:Microsoft.Samples.CustomControls;assembly=ColorPicker” /> Both of these items will have to be provided in order to use the control.
  4. 4. Refer to the UserControl in your xaml file with the local tag: <local:ColorThumb />
  5. 5. If you add an x:Name attribute to the control in the .xaml, you can reference it in the .cs file.
Advertisements

14 Comments »

RSS feed for comments on this post. TrackBack URI

  1. Many thanks!
    It was hard to find this article in google.

  2. Thanks! I was having trouble with exactly this. I googled “add usercontrol to wpf application” and your page was the top result fortunately.

    You’d think that Microsoft would have created a Wizard for doing this. Or allow you to drag and drop from the solution explorer to add it to a xaml page with all the associated namespacing intact.

  3. Oddly enough, Expression Blend makes this easy. It offers up a project’s user controls in the “Asset Library”. Why VS makes it so hard is a mystery.

  4. Thanks big time, I’ve been looking for this solution for a while :)

  5. Great Help, and a Great Post. thanks for Sharing.

  6. Thank you very much! This was extreamly helpful and like all .NET objects, touchy, touchy, touchy… but your info has saved my day. :)

  7. Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  8. Thankyou so much for this. I wasted so much time trying to figure out something as simple as adding a control to a form.

    I’m pleased to see that there are others out there who were equally as baffled.

  9. Nice posting, But using UserControl in the same assembly gives me problem. Adding a simple customized UserControl (button) to a another user control structure, the x:Name is not possible to set within the nested usercontrol for me. The examples are simple but you want to build up a structure of customized controls info is still hard to find on how to do…

  10. The headline confusing.
    You mean to UserControl and not to CustomControl
    they are different

  11. Hi, Great article exactly what I was looking for. I do want to mention that in the 1st approach the term “AddingControls” was a bit confusing to me. I understand that it is the name of your namespace for this example but it was not clear to me. If you named it something like “YourApplicationNamespaceGoesHere” it would be easier to understand

  12. YES!! Thank you many times over for this awesome and easy to follow post!

    I was in the exact same position as you as far as implementing local controls (or even page references, other xaml, etc…) being a mystery. My main application XAML has become very over-bloated as a result.

    You have answered my question, un-stalled my project, and RESCUED my interface with this post! I can now take all my interface elements and put them back in their own XAML files with their own classes… I cannot begin to thank you enough or tell you what a lifesaver this post is. You were exactly right in your opening statements about how implementing the control is assumed to be obvious, and how nobody seems to cover it at all…. I could not even find this information on the MSDN. Kudos and accolades, dude… you really saved me on this one.

  13. Thanks…just what I was looking for!

  14. Thank you!!!! Finally someone who explains how to do this. Much appreciated.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: