Written by:
8/14/2009 2:32 PM 

Creating Rounded Corners and Building the Table in ASP.Net Code

I have worked with a number of rounded corner solutions over the past 6 months since the interns that do design at work love rounded corners. I think the best method we have developed is to slice an image into 8 small images and then build a table surrounding content that shows the corners desired. I like to use Paint.Net to create the 8 images of 15px by 15px each. As you can imagine the images are top_left, top, top_right, left, right, etc.

The table code is like so:

<table cellpadding="0" cellspacing="0">
        <tr id="header">
            <td width="15px" height="15px"><img alt="gray_topleft" src="gray_topleft.png" /></td>
            <td height="15px" style="background-image:url('gray_top.png'); background-repeat:repeat-x;"></td>
            <td width="15px" height="15px"><img alt="gray_topright" src="gray_topright.png" /></td>
        </tr>
        <tr id="body">
            <td width="15px" style="background-image:url('gray_left.png'); background-repeat:repeat-y;"></td>
            <td></td>
            <td width="15px" style="background-image:url('gray_right.png'); background-repeat:repeat-y;"></td>
        </tr>
        <tr id="footer">
            <td width="15px" height="15px"><img alt="gray_bottomleft" src="gray_bottomleft.png" /></td>
            <td height="15px" style="background-image:url('gray_bottom.png'); background-repeat:repeat-x;"></td>
            <td width="15px" height="15px"><img alt="gray_bottomright" src="gray_bottomright.png" /></td>
        </tr>
</table>

With our web solution we also need to create a user control that will be included within other user controls. For that reason we cannot use the html as it is but need to transform the html into VB.net controls and add them to the user control object. Here is an example of the above html code in VB.Net.

        Dim objTable As New Table
        objTable.CellPadding = 0
        objTable.CellSpacing = 0

        Dim objHeaderRow As New TableRow
        Dim objHeaderCell1 As New TableCell
        Dim objHeaderCell2 As New TableCell
        Dim objHeaderCell3 As New TableCell

        objHeaderCell1.Width = 15
        objHeaderCell1.Height = 15
        objHeaderCell1.Style.Add("background-image", "url('../Themes/Images/gray_topleft.png')")
        objHeaderCell1.Style.Add("background-repeat", "no-repeat")

        objHeaderCell2.Height = 15
        objHeaderCell2.Style.Add("background-image", "url('../Themes/Images/gray_top.png')")
        objHeaderCell2.Style.Add("background-repeat", "repeat-x")

        objHeaderCell3.Width = 15
        objHeaderCell3.Height = 15
        objHeaderCell3.Style.Add("background-image", "url('../Themes/Images/gray_topright.png')")
        objHeaderCell3.Style.Add("background-repeat", "no-repeat")

        objHeaderRow.Cells.Add(objHeaderCell1)
        objHeaderRow.Cells.Add(objHeaderCell2)
        objHeaderRow.Cells.Add(objHeaderCell3)

        Dim objBodyRow As New TableRow
        Dim objBodyCell1 As New TableCell
        Dim objBodyCell2 As New TableCell
        Dim objBodyCell3 As New TableCell

        objBodyCell1.Width = 15
        objBodyCell1.Style.Add("background-image", "url('../Themes/Images/gray_left.png')")
        objBodyCell1.Style.Add("background-repeat", "repeat-y")

        Dim objBodyContainer As New MessageContainer
        BodyTemplate.InstantiateIn(objBodyContainer)
        objBodyCell2.Controls.Add(objBodyContainer)
        objBodyCell2.Style.Add("background-color", "#E4E2E2")

        objBodyCell3.Width = 15
        objBodyCell3.Style.Add("background-image", "url('../Themes/Images/gray_right.png')")
        objBodyCell3.Style.Add("background-repeat", "repeat-y")

        objBodyRow.Cells.Add(objBodyCell1)
        objBodyRow.Cells.Add(objBodyCell2)
        objBodyRow.Cells.Add(objBodyCell3)

        Dim objFooterRow As New TableRow
        Dim objFooterCell1 As New TableCell
        Dim objFooterCell2 As New TableCell
        Dim objFooterCell3 As New TableCell

        objFooterCell1.Width = 15
        objFooterCell1.Height = 15
        objFooterCell1.Style.Add("background-image", "url('../Themes/Images/gray_bottomleft.png')")
        objFooterCell1.Style.Add("background-repeat", "no-repeat")

        objFooterCell2.Height = 15
        objFooterCell2.Style.Add("background-image", "url('../Themes/Images/gray_bottom.png')")
        objFooterCell2.Style.Add("background-repeat", "repeat-x")

        objFooterCell3.Width = 15
        objFooterCell3.Height = 15
        objFooterCell3.Style.Add("background-image", "url('../Themes/Images/gray_bottomright.png')")
        objFooterCell3.Style.Add("background-repeat", "no-repeat")

        objFooterRow.Cells.Add(objFooterCell1)
        objFooterRow.Cells.Add(objFooterCell2)
        objFooterRow.Cells.Add(objFooterCell3)

        objTable.Rows.Add(objHeaderRow)
        objTable.Rows.Add(objBodyRow)
        objTable.Rows.Add(objFooterRow)

        Me.Controls.Clear()
        Me.Controls.Add(objTable)

Trackback Print

Tags:

Categories:

Location: Blogs CapturedTech - Technology

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel