Code reusablity is one of the major concern to many of us. When dealing with large projects, modularizing your project is one of the primary thing that you should look for. I have talked about many of the approaches that you can use to deal with modularizing your code, eg, Prism. In this post our intent is not to talk hard on some pattern, rather I will discuss how your WPF application supports code reusability. There are a number of approaches that WPF supports to deal with reusable component. We can use Resources to define a Resource or even use CodeBehind to write our reusable component or even load the XAML from a file using XAML Loader. Each of the approaches has its own pros and cons. Today I will show you another cool technique to write a reusable XAML for your project which will allow you to easily use Visual Studio design surface to design the component.

Lets create a series of steps to create a reusable component for your application to make it easier for you to write one yourself.

Step 1 : Start Visual Studio and Create a new WPF project.Step 2 : Add a new Page to the application and call it as GreetPanel. Just like the figure below.

Once you are done lets change the code for the Page.

Step 3 : Change the root element of the page to Grid to make it a Reusable grid.

Note : Currently there is no Visual Studio File Template for writing a loose XAML component, hence I have used Page to do the same.

Step 4: After doing this, you also need to go to the Code -behind for the Page and change it to inherit from Grid. Now you have a complete reusable component (UserControl) which can use the design surface too, to define its components.

Here I define a TextBox and a Button which has a click Handler too. You can define the ClickHandler in the codebehind for the GridPanel too. The Button will display a message in a textblock called tbResult.

You can access each properties of the Grid from your GreetPanel as it is derived from Grid. Now compile your code and run, you will see your greetpanel working.

Adding a RoutedEvent on the control

As you know RoutedEvent is one of the base for events in WPF application, lets see how you can add one on the panel just declared. Now as you might already know that RoutedEvent can be of three types, one that Bubbles, one Tunnels and one Direct. To declare a RoutedEvent, you need to use EventManager.RegisterRoutedEvent. This command will register the event to the XAML and hence allows you to use Event in EventSetters, styles etc.

In our previous code, lets add an event which will fire when the Result box is altered. To do this, lets add this to the code page of GreetPanel.

Thus when the button is clicked on the Control it shows up a messagebox shows up.

Conclusion

By this way you can derive any control directly from an existing control. But if you are likely to build a completely new control you can use UserControl as its base, which will ensure that the UI has nothing. This is very easy. In my next post I will talk about Custom Controls.

Blog Subscription

Learn MVC 5 step by step

My friend Shivprasad Koirala who is also a Microsoft ASP.NET MVP has released Learn MVC 5 step by step video series. It starts right from basics of MVC and goes to a level until you become a professional.
You can start taking the course for free using the below youtube video.
Please try it, you will find it awesome.

My Awards

Hit Counter

Twitter

Best .NET 4.5 Expert CookBook

Abhishek authored one of the best selling book of .NET. It covers ASP.NET, WPF, Windows 8, Threading, Memory Management, Internals, Visual Studio, HTML5, JQuery and many more...
Grab it now !!!
Another book on .NET 4.5 has been released very recently. It covers Debugging, Testing, Extensibility, WCF, Windows Phone, Windows Azure and many more...
Grab it now !!!GET ANY BOOK AT $5 from PacktPub. Offer is limited