Anti-Aliased Rounded Corners with the NiftyCornersExtender Control
When I was in college I took a course on Software Construction. With 3 weeks left in the semester, the professor assigned us a project that he knew would take close to 6 weeks to implement. To meet the deadline he allowed us to leverage 3rd party components where possible. He encouraged us to think about a solution that was constructed from other components as opposed to one that we developed from scratch. This professor was good. This is exactly the same type of problem I encounter everyday.
I took this construction approach on a recent project. Our team is looking to soften some of our UI elements by using the toolkit's RoundedCornerExtender control. The toolkit's rounded corner implementation does not include anti-aliasing and as a result, the corners look pretty rough. (Anti-aliasing is a technique that is used to make graphics and text easier to read. Here is an explanation from Wikipedia.) If you look at the 'rounded' corners created by the RoundedCornersExtender closely you can see the corners aren't all that round. It looks like a bunch of 1 pixel notches have been taken out of them ...
See how much better that looks! If you zoom in on the corners, you can really see the difference (the anti-aliased one is on the left). The nifty corners algorithm adds additional DIV's that gradually blend the color from the foreground color (blue) to the background color (white). When viewed normally (i.e. not at 890% zoom), this gradual blend is what makes the corner appear round.
The demo site for this post contains three sample usages, each with different foreground/background color combinations. For fun, I also included a SliderExtenderControl that allows you to changes the radius of all 6 panels. This way you can play around with different radius sizes and see how the 2 controls compare.
Besides swapping out the original rounded corners algorithm (basically the buildParentDiv function) with the anti-aliased version, I also made a few other minor changes:
- In each of the RoundedCornersExtender behavior's property setters (set_Corners, set_BorderColor, set_Radius, etc...), a call to buildParentDiv was being made. Because these setters are called when the component is initializing, it was causing the rounded algorithm to run multiple times (once for every property that was set, and then again after all properties were set and the initialize function is called). I updated these property setters to check if the component is initialized or not, before calling buildParentDiv (This can be done using the Component.get_isInitialized() function).
- Because I the anti-aliasing algorithm controls the color of the border, I removed the BorderColor property
- I removed the option to selectively draw each of the four corners independently. I will most likely add this back sometime in the future
That's it. Enjoy!