在 ASP.NET2.0 下製作自訂可視控制項

自訂可視控制項，由 <div> 標籤作為模板產生。

  屬性：

    Text:控制項顯示的文字內容
    Href:控制項顯示的文字的超連結位址
    Target:控制項顯示超連結的目標框架
    StyleBackGround:控制項背景樣式
    StyleMouseOut:控制項滑鼠離開後樣式
    StyleMouseOver:控制項滑鼠移上後樣式
    StyleLine:控制項分隔線樣式
    DisplayPipe:控制項是否顯示分隔字元"|"
    Width:控制項寬度
   
  用途：
 
    作為類似連結或按鈕標籤，構成導覽列菜單條使用。
   
  功能：
 
    顯示提示文字，可設定連結，可以響應滑鼠覆蓋/離開事件，變換控制面板。可以顯示或隱藏分割符。 

代碼:

App_Code/SelfControls.cs:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace SelfControls
{
    public class MainControl : System.Web.UI.WebControls.WebControl
    {
        #region 定義變數及其預設值
        private string text = "";
        private string href = "";
        private string target = "_self";
        private string stylebackground = "";
        private string stylemouseout = "";
        private string stylemouseover = "";
        private string styleline = "";
        private bool displayPipe = true;
        #endregion

        #region 建構函式
        public MainControl(): base(HtmlTextWriterTag.Div)
        {

        }
        #endregion

        #region 定義屬性

        //控制項顯示的文字內容
        public string Text
        {
            get
            {
                return text;
            }

            set
            {
                text = value;
            }
        }

        //控制項顯示的文字的超連結位址
        public string Href
        {
            get
            {
                return href;
            }

            set
            {
                href = value;
            }
        }

        //控制項顯示超連結的目標框架
        public string Target
        {
            get
            {
                return target;
            }
            set
            {
                target = value;
            }
        }
       
        //控制項背景樣式
        public string StyleBackGround
        {
            get
            {
                return stylebackground;
            }
            set
            {
                stylebackground = value;
            }
        }

        //控制項滑鼠離開後樣式
        public string StyleMouseOut
        {
            get
            {
                return stylemouseout;
            }
            set
            {
                stylemouseout = value;
            }
        }

        //控制項滑鼠移上後樣式
        public string StyleMouseOver
        {
            get
            {
                return stylemouseover;
            }
            set
            {
                stylemouseover = value;
            }
        }

        //控制項分隔線樣式
        public string StyleLine
        {
            get
            {
                return styleline;
            }
            set
            {
                styleline = value;
            }
        }       

        //控制項是否顯示分隔字元"|"
        public bool DisplayPipe
        {
            get
            {
                return displayPipe;
            }

            set
            {
                displayPipe = value;
            }
        }

        //控制項寬度
        public override Unit Width
        {
            get
            {
                return base.Width;
            }
            set
            {
                base.Width = value;
            }
        }
        #endregion

        ///將自訂樣式寫到 HTTP 輸出資料流中:
        protected override void AddAttributesToRender(HtmlTextWriter output)
        {
            output.Write("<!-自訂控制項樣本-->");
            output.AddAttribute(HtmlTextWriterAttribute.Class, StyleBackGround);
            output.AddStyleAttribute("width", Width.ToString());

            base.AddAttributesToRender(output);
        }

        /// 呈現控制項的方法 RenderContents
        protected override void RenderContents(HtmlTextWriter output)
        {
            //定義樣式
            output.AddStyleAttribute(HtmlTextWriterStyle.Width, "10px");
            output.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "12px");
            output.AddStyleAttribute(HtmlTextWriterStyle.FontFamily, "宋體");
            output.RenderBeginTag(HtmlTextWriterTag.Span);

            output.AddAttribute(HtmlTextWriterAttribute.Class, StyleMouseOut);
            output.AddAttribute("onmouseout", "this.className='" + StyleMouseOut + "'");
            output.AddAttribute("onmouseover", "this.className='" + StyleMouseOver + "'");
            output.AddAttribute(HtmlTextWriterAttribute.Href, Href);
            output.AddAttribute(HtmlTextWriterAttribute.Target, Target);
            output.RenderBeginTag(HtmlTextWriterTag.A);

            output.Write(text);
            output.RenderEndTag();
            output.RenderEndTag();

            //定義分隔字元及樣式
            if (DisplayPipe)
            {
                output.AddAttribute(HtmlTextWriterAttribute.Class, StyleLine);
                output.RenderBeginTag(HtmlTextWriterTag.Span);
                output.Write("|");
                output.RenderEndTag();
            }
            else
            {
                output.RenderBeginTag(HtmlTextWriterTag.Span);
                output.Write("&nbsp;");
                output.RenderEndTag();
            }

            //使用預設邏輯來呈現子控制項
            base.RenderContents(output);
        }
    }
}

調用樣本:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Top" %>
<%@ Register TagPrefix="SelfControl" Namespace="SelfControls" %>
<%@ OutputCache Duration="1000" VaryByParam="None" %>
<html>
<head>
    <title></title>
    <LINK REL='stylesheet' TYPE='text/css' HREF='styles/style.css'></LINK>
    <LINK REL='stylesheet' TYPE='text/css' HREF='styles/SelfControl.css'></LINK>
</head>

<body leftmargin="0" topmargin="0">

<table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td width="100%">
            <table height="22" cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr>
                    <td bgcolor="#4b92d9" width="30%" height="22"><span style="font-size:12px; color: #ffffff;">自訂控制項測試頁面</span></td>
                    <td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')" width="35%"> </td>
                    <td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6', endColorStr='#1E77D3', gradientType='1')" width="35%"> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table id="Table5" width0="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <SelfControl:MainControl ID="CustomControl1" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="測試首頁"
       Href="bott.aspx">
     </SelfControl:MainControl>
   </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol2" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="電腦學習網"
       Href="http://www.why100000.com/" />
  </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol3" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="電腦《問吧》"
       Href="http://bbs.why100000.com" />
  </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol4" runat="server"
       StyleBackGround="BlueBackGround"
       StyleMouseOut="BlueStyleOut"
       StyleMouseOver="BlueStyleOver"
       StyleLine="BlueLine"
       DisplayPipe="false"
       Target="_blank"
       Text="網路學院"
       Href="http://edu.why100000.com/edu" />
  </td>
  <td width="100%" bgcolor="#f1f1f1"></td> 
</tr>
</table>

</body>
</html>