Aug
14
2009
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)