So I have a class like this that inherits from WebControl
''' <summary>
''' A custom control that will spit out a Tabbed Table (really div tags)
''' </summary>
''' <remarks></remarks>
<ParseChildren(False)> _
Public Class MZTabbedTable
Inherits WebControl
Private _HeaderText As String
Public WriteOnly Property HeaderText() As String
Set(ByVal value As String)
_HeaderText = value
End Set
End Property
Private _Text As String = String.Empty
Public Property Text() As String
Get
Return _Text
End Get
Set(ByVal value As String)
_Text = value
End Set
End Property
Private _TabWidth As Int32 = 746
Public WriteOnly Property TabWidth() As Int32
Set(ByVal value As Int32)
_TabWidth = value
End Set
End Property
Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag
Get
Return HtmlTextWriterTag.Div
End Get
End Property
Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
Me.Width = Unit.Pixel(_TabWidth)
MyBase.OnPreRender(e)
End Sub
''' <summary>
''' Render all the rows
''' </summary>
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
'Header
writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblTop")
writer.RenderBeginTag(HtmlTextWriterTag.Div)
writer.Write("<img src=""/images/icons/arrow.gif"" alt="""" class=""imgMid"" />")
writer.Write(_HeaderText)
writer.RenderEndTag()
'Content
writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblMiddle")
writer.RenderBeginTag(HtmlTextWriterTag.Div)
If String.IsNullOrEmpty(_Text) Then
MyBase.RenderContents(writer)
Else
writer.Write(_Text)
End If
writer.RenderEndTag()
'Footer
writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblBottom")
writer.RenderBeginTag(HtmlTextWriterTag.Div)
writer.Write(Draw1Px())
writer.RenderEndTag()
End Sub
End Class
Some notes about the class
- The CSS classes added on have the graphics/styles to finish up the control....
- The If String.IsNullOrEmpty in the "Content" area allow the code to read an assigned ".Text" property or will grab all the text inside the opening and closing tags for the control
- Obviously the control defaults to a width of 746px, but it can be over ridden
Declaring the control in the ASPX or ASCX page:
<%@ Register Namespace="MZControls" TagPrefix="mz" %>
Using the control just like you would any other control, on this page I am just showing a DataList:
<mz:MZTabbedTable id="MZNewest" runat="Server">
<asp:DataList ID="ListPosts" runat="Server" ShowFooter="false" ShowHeader="true"
CssClass="FrontPagePosts" DataKeyField="TopicID" RepeatColumns="2" RepeatDirection="Vertical">
<ItemTemplate>
<%# BuildLink(Container.DataItem) %>
</ItemTemplate>
</asp:DataList>
</mz:MZTabbedTable>
In the code behind I am assigning the HeaderText property, just as well could be in the code above as well (if it was static)
MZNewest.HeaderText = String.Concat(ViewState("PostsFrontPage"), " Newest Topics")
And the resultant output (please note, this is a few-day-old version, i have since fixed the middle content's right hand border)
Screenshot
See? pretty easy :-)