In this article I will explain how to quickly and easily extend the power of the panel to create a nice looking container which you will soon be able to view at my Job Site

kick it on DotNetKicks.com

 

If you want to skip all the mumbo jumbo and download the example project then go here: CustomControl.zip (56.06 kb)

Now what's the result? What do you get out of developing a custom panel control? First you get to drag and drop reusable and modifiable UI Container elements. Now admittadly i could have really enabled support for multiple themes even true theme support but hey i'm just throwing this out there maybe you can extend it and send it back.

The kewl thing about a custom control is that it enables child controls ad design time a panel is especially useful as a custom control because we can put controls in it at design time.

 

This picture shows you how the control renders

This picture shows you  how it looks at design time.

 

 

 

 

Here is the main part of the code. On thing to keep in mind when developing custom controls is if you want to theme a custom control (not really done here) you need to add a registery assebler to the theme skin file.

 

<%@ Register Assembly="Simmons.Controls" Namespace="Simmons.Controls.CustomControls" TagPrefix="cc1" %>

 

 

This is the main part of the code.

 

 

Imports System

Imports System.Drawing

Imports System.Collections.Generic

Imports System.ComponentModel

Imports System.Text

Imports System.Web.UI

Imports System.Web.UI.HtmlControls

Imports System.Web.UI.WebControls

 

 

Namespace CustomControls

    <ToolboxData("<{0}:Container runat='server' HeaderText='Heading' HeaderWidth='300' ></{0}:RoundedContainer>")> _

    Public Class Container

        Inherits Panel

        Private _headerText As String

        Private _headerwidth As String

 

        Public Property HeaderText() As String

            Get

                Return _headerText

            End Get

            Set(ByVal value As String)

                _headerText = value

            End Set

        End Property

 

 

        <Category("HeaderStyle"), PersistenceMode(PersistenceMode.InnerProperty), Themeable(True)> _

        Public Property HeaderWidth() As String

            Get

                Return _headerwidth

            End Get

            Set(ByVal value As String)

                _headerwidth = value

            End Set

        End Property

 

 

        Protected Overloads Overrides Sub RenderChildren(ByVal writer As HtmlTextWriter)

 

            Dim strContainerWidth As String

            Dim strHeaderWidth As String

 

            strContainerWidth = _headerwidth + "px"

            strHeaderWidth = Convert.ToString(Convert.ToInt16(_headerwidth) - 22) + "px"

 

            ' FUll container

            writer.AddAttribute(HtmlTextWriterAttribute.[Class], "ContainerFull")

            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, strContainerWidth)

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

 

            'header left

            writer.AddAttribute(HtmlTextWriterAttribute.[Class], "ContainerHeadLeft")

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

            'header left

            writer.RenderEndTag()

 

            'header right

            writer.AddAttribute(HtmlTextWriterAttribute.[Class], "ContainerHeadRight")

            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, strHeaderWidth)

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

            writer.AddAttribute(HtmlTextWriterAttribute.[Class], "ContainerHeadText")

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

            writer.Write(_headerText)

            writer.RenderEndTag()

            'header right

            writer.RenderEndTag()

 

            ' Write Visual Contents

            writer.AddAttribute(HtmlTextWriterAttribute.[Class], "ContainerChildren")

 

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

 

            writer.AddStyleAttribute(HtmlTextWriterStyle.Visibility, "hidden")

            writer.RenderBeginTag(HtmlTextWriterTag.Div)

            writer.Write("")

            writer.RenderEndTag()

 

            MyBase.RenderChildren(writer)

            writer.RenderEndTag()

 

            ' full container end

            writer.RenderEndTag()

 

        End Sub

        ' RenderChildren

 

 

    End Class

    ' class

End Namespace