Typed Styles for Child Controls Example

Article
10/22/2014

This example shows how to create a control named StyledRegister that implements strongly typed style properties in a composite control. These properties enable a page developer to customize the appearance of the composite control's child controls. Typed styles also allow composite controls to scale easily. As more child controls are added to the composite control, it becomes unmanageable to expose each child control's many properties in the composite control. Instead, you can encapsulate many properties in a single style property.

The StyledRegister control in the example is similar to the Register control described in Composite Web Control Example. The StyledRegister control has two TextBox child controls and a Button child control. The StyledRegister class exposes the ButtonStyle and TextBoxStyle properties to enable a page developer to set the Font, ForeColor, and other style-related properties of the child TextBox and Button controls.

A page developer can set the Font-Names, ForeColor, and BackColor properties of the controls in the StyledRegister control as shown in the following example:

<aspSample:StyledRegister ID="StyledRegister1" runat="server">
  <TextBoxStyle Font-Names="Arial" BorderStyle="Solid"  
    ForeColor="#804000"></TextBoxStyle>
  <ButtonStyle Font-Names="Arial" BorderStyle="Outset" 
    BackColor="Silver"></ButtonStyle>
</aspSample:StyledRegister>

As the preceding example shows, typed style properties are persisted as child elements within a control's tags. For information about implementing properties that are persisted this way, see the implementation of the Author property in Server Control Properties Example.

A typed style is a property of type Style or of a type derived from Style. The Style class exposes appearance-related properties such as Font, ForeColor, and BackColor. The ControlStyle property of the WebControl class is of type Style. The Font, ForeColor, and BackColor properties of a Web control are subproperties of the ControlStyle property, although they are also exposed as top-level properties of the WebControl class.

Because the Style class has subproperties, properties of type Style require custom state management, as described in Custom Property State Management Example. The implementation details for typed styles are described in the "Code Discussion" section later in this topic.

Code Listing for the StyledRegister Control

' StyledRegister.vbOption Strict OnImports System
Imports System.ComponentModel
Imports System.Drawing
Imports System.Security.Permissions
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
    < _
    AspNetHostingPermission(SecurityAction.Demand, _
        Level:=AspNetHostingPermissionLevel.Minimal), _
    AspNetHostingPermission(SecurityAction.InheritanceDemand, _
        Level:=AspNetHostingPermissionLevel.Minimal), _
    DefaultEvent("Submit"), _
    DefaultProperty("ButtonText"), _
    ToolboxData("<{0}:Register runat=""server""> </{0}:Register>") _
    > _
    PublicClass StyledRegister
        Inherits CompositeControl

        Private submitButton As Button
        Private nameTextBox As TextBox
        Private nameLabel As Label
        Private emailTextBox As TextBox
        Private emailLabel As Label
        Private emailValidator As RequiredFieldValidator
        Private nameValidator As RequiredFieldValidator

        PrivateSharedReadOnly EventSubmitKey AsNewObject()

        Private buttonStyleValue As Style
        Private textBoxStyleValue As Style

#Region "Properties delegated to child controls"
        < _
        Bindable(True), _
        Category("Appearance"), _
        DefaultValue(""), _
        Description("The text to display on the Button.") _
        > _
        PublicProperty ButtonText() AsStringGet
                EnsureChildControls()
                Return submitButton.Text
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                submitButton.Text = value
            EndSetEndProperty

        < _
        Bindable(True), _
        Category("Default"), _
        DefaultValue(""), _
        Description("The user name.") _
        > _
        PublicProperty Name() AsStringGet
                EnsureChildControls()
                Return nameTextBox.Text
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                nameTextBox.Text = value
            EndSetEndProperty

        < _
        Bindable(True), _
        Category("Appearance"), _
        DefaultValue(""), _
        Description("The error message of the name validator.") _
        > _
        PublicProperty NameErrorMessage() AsStringGet
                EnsureChildControls()
                Return nameValidator.ErrorMessage
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                nameValidator.ErrorMessage = value
                nameValidator.ToolTip = value
            EndSetEndProperty

        < _
        Bindable(True), _
        Category("Appearance"), _
        DefaultValue(""), _
        Description("The text for the name Label.") _
        > _
        PublicProperty NameLabelText() AsStringGet
                EnsureChildControls()
                Return nameLabel.Text
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                nameLabel.Text = value
            EndSetEndProperty

        < _
        Bindable(True), _
        Category("Default"), _
        DefaultValue(""), _
        Description("The e-mail address.") _
        > _
        PublicProperty Email() AsStringGet
                EnsureChildControls()
                Return emailTextBox.Text
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                emailTextBox.Text = value
            EndSetEndProperty

        < _
        Bindable(True), _
        Category("Appearance"), _
        DefaultValue(""), _
        Description("Error message of the e-mail validator.") _
        > _
        PublicProperty EmailErrorMessage() AsStringGet
                EnsureChildControls()
                Return emailValidator.ErrorMessage
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                emailValidator.ErrorMessage = value
                emailValidator.ToolTip = value
            EndSetEndProperty
        < _
        Bindable(True), _
        Category("Appearance"), _
        DefaultValue(""), _
        Description("The text for the e-mail Label.") _
        > _
        PublicProperty EmailLabelText() AsStringGet
                EnsureChildControls()
                Return emailLabel.Text
            EndGetSet(ByVal value AsString)
                EnsureChildControls()
                emailLabel.Text = value
            EndSetEndProperty
#End Region

#Region "Typed Style properties"
        < _
        Category("Styles"), _
        DefaultValue(GetType(Style), Nothing), _
        DesignerSerializationVisibility( _
            DesignerSerializationVisibility.Content), _
        PersistenceMode(PersistenceMode.InnerProperty), _
        Description( _
            "The strongly typed style for the Button child control.") _
        > _
        PublicOverridableReadOnlyProperty ButtonStyle() As Style
            GetIf buttonStyleValue IsNothingThen
                    buttonStyleValue = New Style
                    If IsTrackingViewState ThenCType(buttonStyleValue, _
                            IStateManager).TrackViewState()
                    EndIfEndIfReturn buttonStyleValue
            EndGetEndProperty

        < _
        Category("Styles"), _
        DefaultValue(GetType(Style), Nothing), _
        DesignerSerializationVisibility( _
            DesignerSerializationVisibility.Content), _
        PersistenceMode(PersistenceMode.InnerProperty), _
        Description( _
            "The strongly typed style for the TextBox child control.") _
        > _
        PublicOverridableReadOnlyProperty TextBoxStyle() As Style
            GetIf textBoxStyleValue IsNothingThen
                    textBoxStyleValue = New Style
                    If IsTrackingViewState ThenCType(textBoxStyleValue, _
                            IStateManager).TrackViewState()
                    EndIfEndIfReturn textBoxStyleValue
            EndGetEndProperty
#End Region

#Region "Event definition"
        < _
        Category("Action"), _
        Description("Raised when the user clicks the button.") _
        > _
        Public Custom Event Submit As EventHandler
            AddHandler(ByVal value As EventHandler)
                Events.AddHandler(EventSubmitKey, value)
            EndAddHandlerRemoveHandler(ByVal value As EventHandler)
                Events.RemoveHandler(EventSubmitKey, value)
            EndRemoveHandlerRaiseEvent(ByVal sender AsObject, _
                ByVal e As System.EventArgs)
                CType(Events(EventSubmitKey), _
                    EventHandler).Invoke(sender, e)
            EndRaiseEventEndEvent
        ' The method that raises the Submit event.ProtectedOverridableSub OnSubmit(ByVal e As EventArgs)
            Dim submitHandler As EventHandler = _
                CType(Events(EventSubmitKey), EventHandler)
            If submitHandler IsNotNothingThen
                submitHandler(Me, e)
            EndIfEndSub
        ' Handles the Click event of the Button and raises        ' the Submit event.PrivateSub submitButton_Click(ByVal source AsObject, _
            ByVal e As EventArgs)
            OnSubmit(EventArgs.Empty)
        EndSub
#End Region

#Region "Overridden methods"ProtectedOverridesSub CreateChildControls()
            Controls.Clear()

            nameLabel = New Label()

            nameTextBox = New TextBox()
            nameTextBox.ID = "nameTextBox"

            nameValidator = New RequiredFieldValidator()
            nameValidator.ID = "validator1"
            nameValidator.ControlToValidate = nameTextBox.ID
            nameValidator.Text = "*"
            nameValidator.Display = ValidatorDisplay.Static

            emailLabel = New Label()

            emailTextBox = New TextBox()
            emailTextBox.ID = "emailTextBox"

            emailValidator = New RequiredFieldValidator()
            emailValidator.ID = "validator2"
            emailValidator.ControlToValidate = emailTextBox.ID
            emailValidator.Text = "*"
            emailValidator.Display = ValidatorDisplay.Static

            submitButton = New Button()
            submitButton.ID = "button1"AddHandler submitButton.Click, _
                AddressOf submitButton_Click

            Me.Controls.Add(nameLabel)
            Me.Controls.Add(nameTextBox)
            Me.Controls.Add(nameValidator)
            Me.Controls.Add(emailLabel)
            Me.Controls.Add(emailTextBox)
            Me.Controls.Add(emailValidator)
            Me.Controls.Add(submitButton)
        EndSubProtectedOverridesSub Render(ByVal writer As HtmlTextWriter)
            AddAttributesToRender(writer)

            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, _
                "1", False)
            writer.RenderBeginTag(HtmlTextWriterTag.Table)

            If buttonStyleValue IsNotNothingThen
                submitButton.ApplyStyle(buttonStyleValue)
            EndIfIf textBoxStyleValue IsNotNothingThen
                nameTextBox.ApplyStyle(textBoxStyleValue)
                emailTextBox.ApplyStyle(textBoxStyleValue)
            EndIf

            writer.RenderBeginTag(HtmlTextWriterTag.Tr)
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            nameLabel.RenderControl(writer)
            writer.RenderEndTag()  ' Renders the </td> tag.
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            nameTextBox.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            nameValidator.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderEndTag()  'closing Tr

            writer.RenderBeginTag(HtmlTextWriterTag.Tr)
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            emailLabel.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            emailTextBox.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            emailValidator.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderEndTag()  'closing Tr

            writer.RenderBeginTag(HtmlTextWriterTag.Tr)
            writer.AddAttribute(HtmlTextWriterAttribute.Colspan, _
                "2", False)
            writer.AddAttribute(HtmlTextWriterAttribute.Align, _
                "right", False)
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            submitButton.RenderControl(writer)
            writer.RenderEndTag()  'closing Td
            writer.RenderBeginTag(HtmlTextWriterTag.Td)
            writer.Write("&nbsp")
            writer.RenderEndTag()  'closing Td
            writer.RenderEndTag()  'closing Tr

            writer.RenderEndTag()  'closing Table
        EndSubProtectedOverridesSub RecreateChildControls()
            EnsureChildControls()
        EndSub

#End Region

#Region "Custom state management"ProtectedOverridesSub LoadViewState( _
            ByVal savedState AsObject)

            If savedState is NothingThenMyBase.LoadViewState(Nothing)
                ReturnElseDim t As Triplet = TryCast(savedState, Triplet)

                If t IsNotNothingThen                    ' Always invoke LoadViewState on the base class even if                     ' the saved state is null.MyBase.LoadViewState(t.First)

                    If t.Second IsNotNothingThenCType(buttonStyleValue, _
                            IStateManager).LoadViewState(t.Second)
                    EndIfIf t.Third IsNotNothingThenCType(textBoxStyleValue, _
                            IStateManager).LoadViewState(t.Third)
                    EndIfElseThrowNew ArgumentException("Invalid view state .")
                EndIfEndIfEndSubProtectedOverridesFunction SaveViewState() AsObjectDim baseState AsObject = MyBase.SaveViewState
            Dim buttonStyleState AsObject = NothingDim textBoxStyleState AsObject = NothingIf buttonStyleValue IsNotNothingThen
                buttonStyleState = CType(buttonStyleValue, _
                    IStateManager).SaveViewState
            EndIfIf textBoxStyleValue IsNotNothingThen
                textBoxStyleState = CType(textBoxStyleValue, _
                    IStateManager).SaveViewState
            EndIfReturnNew Triplet(baseState, buttonStyleState, _
                textBoxStyleState)
        EndFunctionProtectedOverridesSub TrackViewState()
            MyBase.TrackViewState()
            If buttonStyleValue IsNotNothingThenCType(buttonStyleValue, IStateManager).TrackViewState()
            EndIfIf textBoxStyleValue IsNotNothingThenCType(textBoxStyleValue, IStateManager).TrackViewState()
            EndIfEndSub
#End Region
    EndClassEndNamespace

// StyledRegister.csusing System;
using System.ComponentModel;
using System.Drawing;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls
{
    [
    AspNetHostingPermission(SecurityAction.Demand,
        Level = AspNetHostingPermissionLevel.Minimal),
    AspNetHostingPermission(SecurityAction.InheritanceDemand, 
        Level=AspNetHostingPermissionLevel.Minimal),
    DefaultEvent("Submit"),
    DefaultProperty("ButtonText"),
    ToolboxData(
        "<{0}:StyledRegister runat=\"server\"> </{0}:StyledRegister>"),
    ]
    publicclass StyledRegister : CompositeControl
    {
        private Button submitButton;
        private TextBox nameTextBox;
        private Label nameLabel;
        private TextBox emailTextBox;
        private Label emailLabel;
        private RequiredFieldValidator _emailValidator;
        private RequiredFieldValidator _nameValidator;
        private Style _buttonStyle;
        private Style _textBoxStyle;

        privatestaticreadonlyobject EventSubmitKey = newobject();

        #region Properties delegated to child controls
        [
        Bindable(true),
        Category("Appearance"),
        DefaultValue(""),
        Description("The text to display on the button.")
        ]
        publicstring ButtonText
        {
            get
            {
                EnsureChildControls();
                return submitButton.Text;
            }
            set
            {
                EnsureChildControls();
                submitButton.Text = value;
            }
        }

        [
        Bindable(true),
        Category("Default"),
        DefaultValue(""),
        Description("The user name.")
        ]
        publicstring Name
        {
            get
            {
                EnsureChildControls();
                return nameTextBox.Text;
            }
            set
            {
                EnsureChildControls();
                nameTextBox.Text = value;
            }
        }

        [
        Bindable(true),
        Category("Appearance"),
        DefaultValue(""),
        Description(
            "The error message of the name validator.")
        ]
        publicstring NameErrorMessage
        {
            get
            {
                EnsureChildControls();
                return _nameValidator.ErrorMessage;
            }
            set
            {
                EnsureChildControls();
                _nameValidator.ErrorMessage = value;
                _nameValidator.ToolTip = value;
            }
        }

        [
        Bindable(true),
        Category("Appearance"),
        DefaultValue(""),
        Description("The text for the name label.")
        ]
        publicstring NameLabelText
        {
            get
            {
                EnsureChildControls();
                return nameLabel.Text;
            }
            set
            {
                EnsureChildControls();
                nameLabel.Text = value;
            }
        }

        [
        Bindable(true),
        Category("Default"),
        DefaultValue(""),
        Description("The e-mail address.")
        ]
        publicstring Email
        {
            get
            {
                EnsureChildControls();
                return emailTextBox.Text;
            }
            set
            {
                EnsureChildControls();
                emailTextBox.Text = value;
            }
        }

        [
        Bindable(true),
        Category("Appearance"),
        DefaultValue(""),
        Description(
            "Error message of the e-mail validator.")
        ]
        publicstring EmailErrorMessage
        {
            get
            {
                EnsureChildControls();
                return _emailValidator.ErrorMessage;
            }
            set
            {
                EnsureChildControls();
                _emailValidator.ErrorMessage = value;
                _emailValidator.ToolTip = value;
            }
        }

        [
        Bindable(true),
        Category("Appearance"),
        DefaultValue(""),
        Description("The text for the e-mail label.")
        ]
        publicstring EmailLabelText
        {
            get
            {
                EnsureChildControls();
                return emailLabel.Text;
            }
            set
            {
                EnsureChildControls();
                emailLabel.Text = value;

            }
        }
        #endregion

        #region Typed Style properties
        [
        Category("Styles"),
        DefaultValue(null),
        DesignerSerializationVisibility(
            DesignerSerializationVisibility.Content),
        PersistenceMode(PersistenceMode.InnerProperty),
        Description(
            "The strongly typed style for the Button child control.")
        ]
        publicvirtual Style ButtonStyle
        {
            get
            {
                if (_buttonStyle == null)
                {
                    _buttonStyle = new Style();
                    if (IsTrackingViewState)
                    {
                        ((IStateManager)_buttonStyle).TrackViewState();
                    }
                }
                return _buttonStyle;
            }
        }

        [
        Category("Styles"),
        DefaultValue(null),
        DesignerSerializationVisibility(
            DesignerSerializationVisibility.Content),
        PersistenceMode(PersistenceMode.InnerProperty),
        Description(
            "The strongly typed style for the TextBox child control.")
        ]
        publicvirtual Style TextBoxStyle
        {
            get
            {
                if (_textBoxStyle == null)
                {
                    _textBoxStyle = new Style();
                    if (IsTrackingViewState)
                    {
                        ((IStateManager)_textBoxStyle).TrackViewState();
                    }
                }
                return _textBoxStyle;
            }
        }
        #endregion

        #region Event definition
        // The Submit event.
        [
        Category("Action"),
        Description("Raised when the user clicks the button")
        ]
        publicevent EventHandler Submit
        {
            add
            {
                Events.AddHandler(EventSubmitKey, value);
            }
            remove
            {
                Events.RemoveHandler(EventSubmitKey, value);
            }
        }

        // The method that raises theSubmit event.protectedvirtualvoid OnSubmit(EventArgs e)
        {
            EventHandler SubmitHandler =
                (EventHandler)Events[EventSubmitKey];
            if (SubmitHandler != null)
            {
                SubmitHandler(this, e);
            }
        }

        // Handles the Click event of the Button and raises// the Submit event.privatevoid _button_Click(object source, EventArgs e)
        {
            OnSubmit(EventArgs.Empty);
        }
        #endregion

        #region Overridden methods

        protectedoverridevoid RecreateChildControls()
        {
            EnsureChildControls();
        }


        protectedoverridevoid CreateChildControls()
        {
            Controls.Clear();

            nameLabel = new Label();

            nameTextBox = new TextBox();
            nameTextBox.ID = "nameTextBox";

            _nameValidator = new RequiredFieldValidator();
            _nameValidator.ID = "validator1";
            _nameValidator.ControlToValidate = nameTextBox.ID;
            _nameValidator.Text = "*";
            _nameValidator.Display = ValidatorDisplay.Static;

            emailLabel = new Label();

            emailTextBox = new TextBox();
            emailTextBox.ID = "emailTextBox";

            _emailValidator = new RequiredFieldValidator();
            _emailValidator.ID = "validator2";
            _emailValidator.ControlToValidate = emailTextBox.ID;
            _emailValidator.Text = "*";
            _emailValidator.Display = ValidatorDisplay.Static;

            submitButton = new Button();
            submitButton.ID = "button1";
            submitButton.Click += new EventHandler(_button_Click);

            this.Controls.Add(nameLabel);
            this.Controls.Add(nameTextBox);
            this.Controls.Add(_nameValidator);
            this.Controls.Add(emailLabel);
            this.Controls.Add(emailTextBox);
            this.Controls.Add(_emailValidator);
            this.Controls.Add(submitButton);
        }

        protectedoverridevoid Render(HtmlTextWriter writer)
        {
            AddAttributesToRender(writer);

            writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding,
                "1", false);
            writer.RenderBeginTag(HtmlTextWriterTag.Table);

            if (_buttonStyle != null)
            {
                submitButton.ApplyStyle(ButtonStyle);
            }

            if (_textBoxStyle != null)
            {
                nameTextBox.ApplyStyle(TextBoxStyle);
                emailTextBox.ApplyStyle(TextBoxStyle);
            }

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            nameLabel.RenderControl(writer);
            writer.RenderEndTag();  // Closing td.
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            nameTextBox.RenderControl(writer);
            writer.RenderEndTag();  //Closing td.
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            _nameValidator.RenderControl(writer);
            writer.RenderEndTag();  //Closing td.
            writer.RenderEndTag();  //Closing tr.

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            emailLabel.RenderControl(writer);
            writer.RenderEndTag();  //Closing td.
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            emailTextBox.RenderControl(writer);
            writer.RenderEndTag();  //Closing td.
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            _emailValidator.RenderControl(writer);
            writer.RenderEndTag();  //Closing td.
            writer.RenderEndTag();  //Closing tr.

            writer.RenderBeginTag(HtmlTextWriterTag.Tr);
            writer.AddAttribute(HtmlTextWriterAttribute.Colspan,
                "2", false);
            writer.AddAttribute(HtmlTextWriterAttribute.Align,
                "right", false);
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            submitButton.RenderControl(writer);
            writer.RenderEndTag();  //closing td.
            writer.RenderBeginTag(HtmlTextWriterTag.Td);
            writer.Write("&nbsp;");
            writer.RenderEndTag();  //closing td.
            writer.RenderEndTag();  //closing tr.

            writer.RenderEndTag();  //closing table.
        }
        #endregion

        #region Custom state management
        protectedoverridevoid LoadViewState(object savedState)
        {
            if (savedState == null)
            {
                base.LoadViewState(null);
                return;
            }
            else 
            {
                Triplet t = savedState as Triplet;

                if (t != null)
                {
                    // Always invoke LoadViewState on the base class even if // the saved state is null.base.LoadViewState(t.First);

                    if ((t.Second) != null)
                    {
                        ((IStateManager)ButtonStyle).LoadViewState(t.Second);
                    }

                    if ((t.Third) != null)
                    {
                        ((IStateManager)TextBoxStyle).LoadViewState(t.Third);
                    }
                }
                else
                {
                    thrownew ArgumentException("Invalid view state .");
                }
            }
        }

        protectedoverrideobject SaveViewState()
        {
            object baseState = base.SaveViewState();
            object buttonStyleState = null;
            object textBoxStyleState = null;

            if (_buttonStyle != null)
            {
                buttonStyleState =
                    ((IStateManager)_buttonStyle).SaveViewState();
            }

            if (_textBoxStyle != null)
            {
                textBoxStyleState =
                    ((IStateManager)_textBoxStyle).SaveViewState();
            }

            returnnew Triplet(baseState,
                buttonStyleState, textBoxStyleState);

        }

        protectedoverridevoid TrackViewState()
        {
            base.TrackViewState();
            if (_buttonStyle != null)
            {
                ((IStateManager)_buttonStyle).TrackViewState();
            }
            if (_textBoxStyle != null)
            {
                ((IStateManager)_textBoxStyle).TrackViewState();
            }
        }
        #endregion
    }
}

Code Discussion

The StyledRegister control demonstrates the following main steps in implementing typed styles for child controls:

Defining properties of type Style or of types derived from Style.
Implementing state management for the style properties.
Applying styles to child controls.

Because the Style type implements the IStateManager interface, the pattern for defining a property of type Style is identical to that described in Custom Property State Management Example. You define a typed style property as a read-only property stored in a private field. In the property's accessor, you create a new Style instance only if the field corresponding to the property is null (Nothing in Visual Basic). If the control has started state tracking, you call the TrackViewState method of the newly created Style instance. The ButtonStyle and TextBoxStyle properties of StyledRegister are defined using this technique.

Similarly, the implementation of the state-management methods in StyledRegister is identical to that described in Custom Property State Management Example. In the overridden TrackViewState method of your control, you call the TrackViewState method on the base class and the TrackViewState method on each style property. In the overridden SaveViewState method of your control, you call SaveViewState on the base class and SaveViewState on each style property. The state you return from SaveViewState represents the combined state of the base class and the style properties. For ease of retrieval in the LoadViewState method, the StyledRegister control uses a Triplet object to save the combined state. The LoadViewState method performs the reverse of the SaveViewState method and loads state into the base class and into the typed styles on postback.

The last step in implementing a typed style is to apply styles to child controls. The StyledRegister control performs this step in the render phase, after view state is saved, so that state corresponding to typed styles is not saved in the view state of the child controls. If typed styles were applied to child controls when state tracking was on, these styles would be saved in the view state of the child controls. This would be inefficient, since typed style properties manage their own state. The following code excerpt from the Render method of the StyledRegister control shows the implementation pattern for applying styles in the render phase:

protected override void Render(HtmlTextWriter writer)
{
    // Add code here to set up rendering.    
    if (_buttonStyle != null)
    {
        _button.ApplyStyle(ButtonStyle);
    }

    if (_textBoxStyle != null)
    {
        _nameTextBox.ApplyStyle(TextBoxStyle);
        _emailTextBox.ApplyStyle(TextBoxStyle);
    }
    // Add code here to continue rendering.
}

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
    ' Add code here to set up rendering.    
    If buttonStyleValue IsNot Nothing Then
        submitButton.ApplyStyle(buttonStyleValue)
    End If

    If textBoxStyleValue IsNot Nothing Then
        nameTextBox.ApplyStyle(textBoxStyleValue)
        emailTextBox.ApplyStyle(textBoxStyleValue)
    End If
    ' Add code here to continue rendering.
End Sub

Test Page for the StyledRegister Control

The following example shows an .aspx page that uses the StyledRegister control. In the Submit event handler, you would add code to enter the registration data into a database or write a cookie on the user's computer. In a production application, you would also need to check for script injection attacks. For more information, see Script Exploits Overview.

<%@ Page Language="VB"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    Sub Page_Load(ByVal sender AsObject, ByVal e As EventArgs)
        Label1.Visible = FalseEndSubSub StyledRegister_Submit(ByVal sender AsObject, _
        ByVal e As EventArgs)
        Label1.Text = String.Format( _
            "Thank you, {0}! You are registered.", _
            StyledRegister1.Name)
        Label1.Visible = True
        StyledRegister1.Visible = FalseEndSub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="Head1" runat="server">
    <title>
      StyledRegister Control Test Page
    </title>
  </head>
  <body>
    <form id="form1" runat="server">
      <aspSample:StyledRegister ButtonText="Register" 
        OnSubmit="StyledRegister_Submit" ID="StyledRegister1"
        Runat="server" NameLabelText="Name:" EmailLabelText="Email:" 
        EmailErrorMessage="You must enter your e-mail address."
        NameErrorMessage="You must enter your name." 
        BorderStyle="Solid" BorderWidth="1px" BackColor="#E0E0E0">
        <TextBoxStyle Font-Names="Arial" BorderStyle="Solid" 
          ForeColor="#804000"></TextBoxStyle>
        <ButtonStyle Font-Names="Arial" BorderStyle="Outset" 
          BackColor="Silver"></ButtonStyle>
      </aspSample:StyledRegister>
      <br />
      <asp:Label ID="Label1" Runat="server" Text="Label">
      </asp:Label>
      <asp:ValidationSummary ID="ValidationSummary1" 
        Runat="server" DisplayMode="List" />
    </form>
  </body>
</html>

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  void Page_Load(object sender, EventArgs e)
  {
    Label1.Visible = false;
  }
  void StyledRegister_Submit(object sender, EventArgs e)
  {
    Label1.Text = String.Format("Thank you, {0}! You are registered.", 
      StyledRegister1.Name);
    Label1.Visible = true;
    StyledRegister1.Visible = false;
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head id="Head1" runat="server">
    <title>
      StyledRegister Control Test Page
    </title>
  </head>
  <body>
    <form id="form1" runat="server">
      <aspSample:StyledRegister ButtonText="Register" 
        OnSubmit="StyledRegister_Submit" ID="StyledRegister1"
        Runat="server" NameLabelText="Name:" EmailLabelText="Email:" 
        EmailErrorMessage="You must enter your e-mail address."
        NameErrorMessage="You must enter your name." 
        BorderStyle="Solid" BorderWidth="1px" BackColor="#E0E0E0">
        <TextBoxStyle Font-Names="Arial" BorderStyle="Solid" 
          ForeColor="#804000"></TextBoxStyle>
        <ButtonStyle Font-Names="Arial" BorderStyle="Outset" 
          BackColor="Silver"></ButtonStyle>
      </aspSample:StyledRegister>
      <br />
      <asp:Label ID="Label1" Runat="server" Text="Label">
      </asp:Label>
      <asp:ValidationSummary ID="ValidationSummary1" 
        Runat="server" DisplayMode="List" />
    </form>
  </body>
</html>

Building and Using the Example

For information about compiling and using the custom control examples, see Building the Custom Server Control Examples.

Typed Styles for Child Controls Example

Code Listing for the StyledRegister Control

Code Discussion

Test Page for the StyledRegister Control

Building and Using the Example

See Also

Concepts

Other Resources

Additional resources