New Controls
It’s been almost two weeks since I last posted any pictures of coding progress. Progress was slowed because I spent a couple of days on a marketing course and then another couple of evenings making changes to my existing company website in order to implement some ideas that came from the course.
But now I am back into full coding mode again and so here is the state of play as of today. We now have three different controls in our little toolkit. If you look at the image below you can see examples of all three.
Professional Renderer
All of the above controls are drawn with the default settings using our single renderer currently in the toolkit. This is called the Professional renderer and is intended to mimic the look and feel of the Microsoft Office line of products.
Most users are accustomed to this appearance and so the majority of business applications want to replicate it in their own applications. By making their own programs look familiar to customers it is likely to help customers believe the corporate application is as professional as Microsoft programs.
The first control on the left is the Panel control and is intended to be used as the background filler for the client area of the application. In our case it is a simple light blue color.
The middle control is the Group control and it provides a border and background appearance for a control container. This is similar to what you might see in Microsoft Outlook, where the contents are a preview of an email message.
Finally our newest control is called Header and as the name suggest is intended to be useful for providing a heading for other content on the user’s page. Our header control can have three pieces of information displayed, an image, a primary piece of text and a secondary piece of text. All three pieces are optional and can be aligned against different edges.
Text Rendering
We use the same technique for drawing the text strings as we used previously for drawing the border and background elements. So you can use solid as well as gradient color effects on the text itself. Here is an example with large text so it is easy to see the color effect in action.
I did not need to write lots of new code for the rendering, I could completely reuse the existing code for creating an appropriate Brush for painting the text area.
In a previous post I showed how I had added the ability to provide an image for drawing the border and background. This has also been reused and so here is an example where an image is used to paint the text.
It only took about 30 seconds to create the following header instance with some interested color gradient effects in the border, background and the text itself. Although a little over the top for actual use it shows the potential for creating some cool looking design very quickly.
The Next Step
Although the basics of the Header control are working I still need to flesh out the functionality before it is completed. I need to investigate the ability to auto size the control based on the content, add extra appearance settings so when it is disabled it has a disabled look and feel.
It also needs to handle the RightToLeft setting so international users get the reversed ordering they would expect. Small details like this tend to take up much of the development effort.
Oh well, back to the keyboard…
