I did a recent talk on Custom Controls to the local user group in Chicago and I thought I would re-iterate those points here. The silverlight control model is very important to the collaboration efforts between designers and developers. First lets understand the difference between Custom Controls and User Controls.

1. User controls is very similar to movies in flash. User Controls is how visual elements and development code is separated into modules, developers understand the concept of classes or objects and the reason for object oriented development, user controls are very similar in nature except its physical visual elements along with UI type code tied to it. Additionally user controls are great for visual and code reuse among the application it belongs to, but that doesn't mean its only useful when it is reused. User Controls are just as valuable in scenarios that exist singularly in an application as well as reused in multiple places.

   

Above is an application I recently demoed at Riapalooza, its a simple Image viewer that you may have seen in flash. The best first hierarchy breakdown of user controls for this application would be the viewer on the right and the remote that controls the viewer on the left. Its important to note that these types of breakdowns of user controls should be identified in the early stages of design/development. I am of the opinion that as designers come up with the wire frames, a meeting between designers and developers should be created to hash out exactly how these types of breakdowns will occur. Both parties should have a say in the module breakdowns because its the essence of the organization both on the visual level as well as the development level of the project.

For developers, there is alot of power in user controls. They can be very control like, if your familiar with ASP.net user controls, Silverlight's use of user controls is very similar. A user control can have its own properties, it can behave very similarly to custom controls but I will point out the differences below.

2. The next concept of the control model is the key element to the power of collaboration to silverlight/WPF. We will start by defining custom controls. Custom Controls is similar to user controls except with two physical differences. Custom Controls define some sort of functionality, and attached with that functionality is a default look through templates. The default look can be modified by designers very heavily, again through templates. Custom Controls are controls that can be reused across multiple applications and quite honestly should only really be considered when its theres a need for reuse. Custom controls should be used when extending functionality of existing controls or to create new functionality all together, an example would be drop downs, menus, tree views, and more. The bottom line is, its the essence of a control.

Now I don't for-see designers going out and creating custom controls, so you're probably wondering where this powerful collaboration takes place. The model that makes up custom controls is the same model that is used in the controls you see in your existing toolbox, like the button, check box, scrollbar, slider, etc. The concept is that developers can take an application and after understanding how the application should be broken out as defined in user controls can jump right into development. They can approach the project by developing the application... not focusing on the design aspects of the project but in it functionality. They can develop the application with existing controls in the control library or custom controls and develop out a majority of the application and only use the functional pieces.



Lets look at my application example again, since we have a design goal in mind the developer can look a the design from a functional perspective and build the entire application functionally. It doesn't have to be arranged perfectly as I show here, I arranged the functional pieces so you could see them related to the actual application. The entire application could be completely developed using these functional pieces. Events could be wired up, states and parts could be created, the entire application could be working functionally. And then the designer using the new tools in blend such as the Visual State Manager can then transform these functional controls, like a button and a slider and a scrollbar and transform them into their own custom designs.

The best relation I can make here is that its very much like components in flash, except my past experiences with components in flash has been customizing a components look is not an easy task. And building components is not exactly easy to do either. Silverlight revolves around this model and to customize and create is the very essence of what makes development and design work better together. To understand more check out the links I listed in my previous blog post for CD2.