How to go back to a clean user interface code ?

Question

I am working on a winforms project containing some forms and controls. Each one is translated in 4 languages. There is one form called "PropertiesForm" which is a nightmare to maintain : it has a tab container with 6 tab pages, and more than one hundred controls in it, with dirty code trying (and often failing) to keep the whole thing coherent.

Since I am in charge of this project, I have tried to avoid doing big modifications to this form, but it's not doable anymore. Making big changes will be difficult and slow, and is likely to cause stability issues. So, what is the best way to restore a clean and understandable code ?

My idea is to make at least one control for each tab page, and synchronizing them in the form. My problem is that I don't know any simple way to do that with visual studio. Is there any automatic way to keep the translations and events handlers in the new controls since copy-paste makes them disappear ? Is there any tool or add-in designed for this task ?

What should be the method to clean the structure without breaking everything ?

Answer 1

You already know what's wrong and how to fix it: break everything up in small, loosely coupled components and make the form work them together.

Take a look at the Model-View-Controller pattern. Maybe it's a good idea to make a separate controller for each component, and then the big form has its own controller which controls the smaller ones. This will be important for decent event handling: don't hook up on control events, but rather on controller events.

Answer 2

As far as I know, there is no a such tool, and I don't see after what principle it should exist.

I'd simply create 6 user controls, cut the controls from each tab page in the respective control and paste it into the newly created controls. After that fix all the errors by dispatching functions with errors in respective UserContols. However, if tabs controls are linked one with other from different tabs, you may encounter some "problems".

An other approach is to logically separate the user controls (date/time controls, text controls, busineess-object-depending controls).

However, I am afraid that the event handlers and other stuff you will need to fix by yourself.

Answer 3

such a modification should probably be done in the code, not in the design editor. You say yourself that copy-paste starts breaking things: the desing editor is meant to create the design/layout, but is not very suitable for handling the code behind.

I'd suggest you start by breaking up the 6 tab pages into 6 different files, and 1 file for the actual form. Then have a quick look over the code and see if you can find common patterns, either functional or logical (ie certain groups of controls that seem to re-appear, or certain code structures that are used a lot). Extract them, place in seperate classes and apply in the original files. A typical example would be a control hat has a certain style applied and is used more than once: that should get a dedicated class/function managing the style.

Meanwhile, document your steps and keep testing functionality.

Also very important (you do not talk about it in your question but it is probably there) is the way you get data from/to the underlying data structure/database/file. Maybe you should even start with that: provide a dedicated, standarized for your application way to handle communication between data and UI, and make all controls use it. You know you did it the correct way if you do not have to change that communication logic if you choose to refactor either UI, database, or both.