ASP.NET Custom Server Controls: Round Cornered box control in ASP.NET - Creating the header
(Page 3 of 5 )
The header part mainly contains three cells (top left, top middle, top right). We need to create a new row with three cells and fill these cells with their respective images. The following is the next code fragment (a continuation from the above code fragment within the same “RenderBeginTag” method).
writer.RenderBeginTag(HtmlTextWriterTag.Tr)
'top left
writer.AddAttribute(HtmlTextWriterAttribute.Width, "0px")
writer.AddAttribute(HtmlTextWriterAttribute.Height,
"0px")
writer.RenderBeginTag(HtmlTextWriterTag.Td)
If Me.ImageTopLeftURL.Trim.Length > 0 Then
writer.AddAttribute(HtmlTextWriterAttribute.Src,Me.ImageTopLeftURL.Trim)
writer.AddAttribute(HtmlTextWriterAttribute.Border,
"0px")
writer.RenderBeginTag(HtmlTextWriterTag.Img)
writer.RenderEndTag()
End If
writer.RenderEndTag() 'td
The above code fragment starts a single row (first row in the table) and creates the first cell (top left cell). Once the image specification (path of the image) for the cell is provided, I embed it into the cell using the “<img>” tag. By default, I fixed the width to “0px,” allowing it to fit automatically based on the image size.
'top middle
writer.AddAttribute(HtmlTextWriterAttribute.Width,
"100%")
writer.AddAttribute(HtmlTextWriterAttribute.Height,
"0px")
If Me.ImageTopMiddleURL.Trim.Length > 0 Then
writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, "url("
&Me.ImageTopMiddleURL.Trim & ")")
writer.AddStyleAttribute("background-repeat",
"repeat-x")
End If
writer.RenderBeginTag(HtmlTextWriterTag.Td)
writer.RenderEndTag() 'td
As the middle cell may expand according to the content, I set the image (for the top middle cell) as a background image. I also added a style attribute which makes it repeat when expanded. And finally, the following code fragment is for the last cell (top right).
'top right
writer.AddAttribute(HtmlTextWriterAttribute.Width, "0px")
writer.AddAttribute(HtmlTextWriterAttribute.Height,
"0px")
writer.RenderBeginTag(HtmlTextWriterTag.Td)
If Me.ImageTopRightURL.Trim.Length > 0 Then
writer.AddAttribute(HtmlTextWriterAttribute.Src,Me.ImageTopRightURL.Trim)
writer.AddAttribute(HtmlTextWriterAttribute.Border,
"0px")
writer.RenderBeginTag(HtmlTextWriterTag.Img)
writer.RenderEndTag()
End If
writer.RenderEndTag() 'td
writer.RenderEndTag() 'tr
The above is very similar to the first cell (top left) and I don’t think that I need to explain it much. But the important issue is that I closed the header row with the last statement.
Next: Creating the body (content) >>
More ASP.NET Articles
More By Jagadish Chaterjee
