StyledPanel WebControl
A common need when building web sites is integrating the content in designed frames and not just in plain dumb gray panels. The difficulty with that is that we have to use HTML tables to enable the panels to be sizable according to their content, and link this HTML tags to CSS styles.
I created a new WebControl that greatly simplifies this task. This control's source code is actually quite simple and can be used as an example if you want to take a look at how WebControls work.
With a control like the StyledPanel (that's its name), the developer manipulates only the control and its properties through the Property Inspector, all the design is defined in a CSS file.
Having all the style exported to a CSS file, the only difference between the two controls below is just one property value! Also, only the CSS needs to be changed if you want to redesign the panels. Isn't that appealing to you?
Here is how to test this control:
- Open and build the solution
- Add the control to the Toolbox (right-click on the Toolbox, browse for Madgeek.dll and add it)
- Add a new Web project to the solution
- Copy the Samples directory to your Web project directory
- Add a link to the CSS in the WebForm (Format | Document Styles... then select Samples.css in the directory you just copied)
- Drop a StyledPanel onto the WebForm
- Set the CssSuffix of the StyledPanel to Sample1
- Drop another StyledPanel onto the WebForm
- Set the CssSuffix of the second StyledPanel to Sample2
- Run the Web application
- Change the first StyledPanel's CssSuffix property to Sample2 and save
- Reload the page in the browser
Note: you can change the CssSuffix without recompiling as the ASPX file gets reevaluated after the change.