ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性淺析
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性是怎么樣的呢？首先讓我們來看看，位于WebControls命名空間的style類為頂級(jí)樣式類.大部分標(biāo)準(zhǔn)控件都擁有其樣式屬性.
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性1.下面為設(shè)置樣式方法
(1)你可以直接設(shè)置控件樣式
Button1.BackColor = System.Drawing.Color.Red;
(2)通過獲取web控件的樣式集合來設(shè)置
Button1.ControlStyle.BackColor = System.Drawing.Color.Red;
(3)通過設(shè)置樣式類,利用WebControl類的ApplyStyle方法來復(fù)制非空樣式,并改寫現(xiàn)有樣式
- myStyle.BackColor = System.Drawing.Color.Red;
- Button1.ApplyStyle(myStyle);
(4)一直定義樣式表屬性,不使用控件屬性,與定義HTML樣式相同.
style="background-color: red"
下面引出話題,為什么要使用樣式?大家知道定義樣式可以使用統(tǒng)一風(fēng)格,定義好的樣式,可以重復(fù)使用.再回來看上面設(shè)置樣式方法.
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性2.了解WebControl.BackColor和Style.BackColor
(1)和(2)是差不多的.但(3)則不同,(3)的定義方法有通用性,你可以定義一種樣式,然后利用控件的ApplyStyle方法來引用樣式.給樣式編程提供了方面
WebControl類定義了通用的樣式.(1)和(2)使用的樣式屬性為
WebControl.BackColor
(3)則不同,使用的為
Style.BackColor
3.自定義樣式屬性
剛開始就講了style類為通用的頂級(jí)樣式類,但需求是會(huì)發(fā)生變化的. 好了,下面真正開始編碼了.
下面以改寫label控件為例子
(1)改寫樣式屬性,讓其默認(rèn)背景為紅色,相信大家一定看的懂
示例一
- namespace CustomComponents
- {
- [ToolboxData(@"﹤{0}:ImageLabel1
- BackColor='Red'
- runat='server'﹥﹤/{0}:ImageLabel1﹥")
- ]
- public class ImageLabel1 : Label
- {
- public override string Text
- {
- get { return ViewState["Text"] != null ? (string)ViewState["Text"] : base.ID; }
- set { ViewState["Text"] = value; }
- }
- public override System.Drawing.Color BackColor
- {
- get
- {
- return base.BackColor = System.Drawing.Color.Red;
- }
- set
- {
- base.BackColor = value;
- }
- }
- }
- }
控件初始效果為下圖
(2)為label新增一個(gè)背景圖片的屬性,重寫了一下AddAttributesToRender方法,添加一個(gè)樣式屬性,AddAttributesToRender方法以前為大家講過,這里不多講了.
示例二
- namespace CustomComponents
- {
- public class ImageLabel2 : Label
- {
- [BrowsableAttribute(true)]
- [DescriptionAttribute("背景")]
- [CategoryAttribute("Appearance")]
- public virtual String ImageUrl
- {
- get { return ViewState["imageUrl"] != null ? (string)ViewState["imageUrl"] : ""; }
- set { ViewState["imageUrl"] = value; }
- }
- override protected void AddAttributesToRender(HtmlTextWriter writer)
- {
- writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ImageUrl);
- base.AddAttributesToRender(writer);
- }
- }
- }
使用控件效果如下
(3)上面示例二中我們定義了背景樣式,其實(shí).net已經(jīng)為我們把工作做好了
從style類派生了很多樣式類,擴(kuò)展了style類的屬性,滿足不同控件樣式的需求.
WebControl類中有一個(gè)CreateControlStyle 方法,其返回為一個(gè)樣式集合.其默認(rèn)情況下實(shí)現(xiàn)如下
- protected override Style CreateControlStyle()
- {
- return new Style(ViewState);
- }
我們可以通過改寫此方法來使控件擁有style派生類的功能,改寫后如下,讓label控件擁有TableStyle類的樣式
- protected override Style CreateControlStyle()
- {
- return new TableStyle(ViewState);
- }
注意點(diǎn):默認(rèn)情況下,當(dāng)label控件使用ApplyStyle復(fù)制除style之外的樣式屬性集合,將只返回默認(rèn)style類的樣式屬性集合.
看了下面效果后請(qǐng)?jiān)倩仡^再理解這句話.
看下面自定義控件代碼,真是簡(jiǎn)單的不的了
示例三
- namespace CustomComponents
- {
- public class ImageLabel3 : Label
- {
- protected override Style CreateControlStyle()
- {
- return new TableStyle(ViewState);
- }
- }
- }
再看默認(rèn)label控件與其的對(duì)比,因?yàn)闆]有給控件定義樣式屬性,所以只能通過編程的方式來定義樣式,如下
示例四
- protected void Page_Load(object sender, EventArgs e)
- {
- //默認(rèn)label控件
- TableStyle a = new TableStyle();
- a.BackImageUrl = "images4.bmp";
- a.BackColor = System.Drawing.Color.Red;
- Label1.ApplyStyle(a);
- //自定義控件
- ImageLabel3_1.ApplyStyle(a);
- }
看一下,使用的效果,看到下面效果再來理解下我上面說的注意點(diǎn)吧.我想這樣會(huì)理解的更深刻.
(4)使用派生樣式類,定義控件樣式屬性.示例四中說過了,沒有定義控件樣式屬性,只改寫了CreateControlStyle方法.那就意味了你定義的控件樣式屬性可以直接使用TableStyle類中的屬性,但默認(rèn)情況下的樣式屬性為style類中屬性,所以需要強(qiáng)行轉(zhuǎn)換.如下對(duì)比
默認(rèn)情況下
- public override Color BackColor
- {
- get
- {
- return ((Style)ControlStyle).BackColor;
- }
- set
- {
- ((Style)ControlStyle).BackColor = value;
- }
- }
定義TableStyle樣式屬性,必須轉(zhuǎn)換為TableStyle類型
- public virtual string BackImageUrl
- {
- get { return ((TableStyle)ControlStyle).BackImageUrl; }
- set { ((TableStyle)ControlStyle).BackImageUrl = value; }
- }
好了,講清楚上面這一點(diǎn).我們?cè)賮頊y(cè)試一下.看下面示例(還是采用我們第一講的例子)
下面只給出定義樣式屬性的代碼,其他的類似.
控件樣式#region 控件樣式
- protected override Style CreateControlStyle()
- {
- return new TableStyle(ViewState);
- }
- [BrowsableAttribute(true)]
- [DescriptionAttribute("網(wǎng)格線")]
- [CategoryAttribute("Appearance")]
- public virtual GridLines GridLines
- {
- get { return ((TableStyle)ControlStyle).GridLines; }
- set { ((TableStyle)ControlStyle).GridLines = value; }
- }
- [BrowsableAttribute(true)]
- [DescriptionAttribute("單元格間距")]
- [CategoryAttribute("Appearance")]
- public virtual int CellSpacing
- {
- get { return ((TableStyle)ControlStyle).CellSpacing; }
- set { ((TableStyle)ControlStyle).CellSpacing = value; }
- }
- [BrowsableAttribute(true)]
- [DescriptionAttribute("單元格邊距")]
- [CategoryAttribute("Appearance")]
- public virtual int CellPadding
- {
- get { return ((TableStyle)ControlStyle).CellPadding; }
- set { ((TableStyle)ControlStyle).CellPadding = value; }
- }
- [BrowsableAttribute(true)]
- [DescriptionAttribute("表水平對(duì)齊")]
- [CategoryAttribute("Appearance")]
- public virtual HorizontalAlign HorizontalAlign
- {
- get { return ((TableStyle)ControlStyle).HorizontalAlign; }
- set { ((TableStyle)ControlStyle).HorizontalAlign = value; }
- }
- [BrowsableAttribute(true)]
- [DescriptionAttribute("表背景圖片")]
- [CategoryAttribute("Appearance")]
- public virtual string BackImageUrl
- {
- get { return ((TableStyle)ControlStyle).BackImageUrl; }
- set { ((TableStyle)ControlStyle).BackImageUrl = value; }
- }
- #endregion
使用此控件
- ﹤custom:CreditCardForm6 BackColor="Black" ForeColor="White" runat="server" ID="example"
- Font-Bold="true" Font-Italic="true" GridLines="None" CellSpacing="5"
- BackImageUrl="images4.bmp" Font-Size="Larger"
- BorderColor="Yellow" BorderWidth="20px" BorderStyle="Ridge" HorizontalAlign="NotSet" EnableViewState="False" /﹥
效果如下
好了,上面的基礎(chǔ)講完了.希望大家能夠有所理解.下面還我們要講一個(gè)重點(diǎn)的東西.
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性4.自定義類型化樣式屬性
如果樣式屬性無法滿足你需求,則你可以通過自定義類型化樣式來實(shí)現(xiàn).
什么是自定義類型化樣式?就是該類從style類派生,對(duì)其進(jìn)行修改和擴(kuò)充(書上就這么寫了...我就這么理解了-_-)
如Table控件,一方面控件自身定義的樣式屬性,另一方面又定義了TableStyle類.你可以在使用控件樣式屬性和TableStyle類中進(jìn)行選擇.
但TableStyle類具有通用性,具有一定的靈活性.好了下面我們又要開始看代碼了.當(dāng)然從簡(jiǎn)單開始
(1)簡(jiǎn)單呈現(xiàn)樣式屬性
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性需要說明的注意點(diǎn)如下
1.重寫LabelStyle(StateBag viewState)構(gòu)造函數(shù)
2.樣式屬性需用視圖狀態(tài)來聲明
3.Style類的重載的AddAttributesToRender方法需用兩個(gè)參數(shù)的方法
AddAttributesToRender(HtmlTextWriter writer, WebControl owner)
示例5 自定義類型化樣式:LabelStyle類
- public class LabelStyle :Style
- {
- public LabelStyle() { }
- public LabelStyle(StateBag viewState) : base(viewState) { }
- public virtual String ImageUrl
- {
- get { return ViewState["imageUrl"] != null ? (string)ViewState["imageUrl"] : ""; }
- set { ViewState["imageUrl"] = value; }
- }
- public override void AddAttributesToRender(HtmlTextWriter writer, WebControl owner)
- {
- writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, ImageUrl);
- base.AddAttributesToRender(writer, owner);
- }
- }
下面再來看控件實(shí)現(xiàn)方法,注意此處CreateControlStyle方法返回為自己定義的LabelStyle(ViewState)
示例6
- public class ImageLabel4 : Label
- {
- protected override Style CreateControlStyle()
- {
- return new LabelStyle(ViewState);
- }
- [Bindable(true),
- Category("Appearance"),
- DefaultValue(""),
- Description("背景圖片")
- ]
- public virtual String ImageUrl
- {
- get { return ((LabelStyle)ControlStyle).ImageUrl; }
- set { ((LabelStyle)ControlStyle).ImageUrl = value; }
- }
- }
讓我們來測(cè)試一下,你會(huì)發(fā)現(xiàn)界面上并未呈現(xiàn)背景圖片,給控件加一個(gè)屬性CssClass=""以后效果就出來了,如下
讓我們來思考為什么在未定義CssClass=""屬性時(shí)無法呈現(xiàn)自定義屬性.
Style類有一個(gè)IsEmpty屬性用來判斷已在的視圖狀態(tài)中是否定義了樣式屬性,
默認(rèn)情況下為true,當(dāng)定義了樣式屬性后,則為false.CssClass屬性為空時(shí),默認(rèn)情況下即認(rèn)為定義了樣式屬性,只不過樣式屬性個(gè)數(shù)為0.
若要在默認(rèn)情況下呈現(xiàn)自定義樣式屬性則需重寫IsEmpty屬性.如下,只要判斷自定義的樣式屬性視圖狀態(tài)是否為空即可.
示例7
- //判斷視圖狀態(tài)是否為空
- internal bool IsSet(string key)
- {
- return ViewState[key] != null;
- }
- /**//// ﹤summary﹥
- /// 是否定義樣式元素
- /// ﹤/summary﹥
- public override bool IsEmpty
- {
- get
- {
- return base.IsEmpty && !IsSet("imageUrl");
- }
- }
(2)使用編程
下面我們以編程方式,給控件添加自定義樣式屬性.
發(fā)現(xiàn)BackColor屬性能夠呈現(xiàn)但I(xiàn)mageUrl 無法呈現(xiàn),那說明我們剛才自定義的類就失去意義了,也說明我們還未重寫某個(gè)方法.
- LabelStyle a = new LabelStyle();
- a.ImageUrl = "images4.bmp";
- a.BackColor = System.Drawing.Color.Red;
- ImageLabel4_1.ApplyStyle(a);
Style類有三個(gè)操作樣式的方法,復(fù)制,合并和清除樣式.WebControl類也一樣.重寫一下,我們的目的就達(dá)到了.看下面代碼
示例8
方法#region 方法
- /**//// ﹤summary﹥
- /// 復(fù)制樣式
- /// ﹤/summary﹥
- /// ﹤param name=""﹥﹤/param﹥
- public override void CopyFrom(Style s)
- {
- if (s == null)
- return;
- base.CopyFrom(s);
- LabelStyle ls = s as LabelStyle;
- if (ls == null || ls.IsEmpty)
- return;
- if (ls.IsSet("imageUrl"))
- this.ImageUrl = ls.ImageUrl;
- }
- /**//// ﹤summary﹥
- /// 整合樣式
- /// ﹤/summary﹥
- /// ﹤param name="s"﹥﹤/param﹥
- public override void MergeWith(Style s)
- {
- if (s == null)
- return;
- if (IsEmpty)
- {
- CopyFrom(s);
- return;
- }
- LabelStyle ls = s as LabelStyle;
- if (ls == null || ls.IsEmpty)
- return;
- if (ls.IsSet("imageUrl") && !IsSet("imageUrl"))
- this.ImageUrl = ls.ImageUrl;
- }
- /**//// ﹤summary﹥
- /// 清除樣式
- /// ﹤/summary﹥
- public override void Reset()
- {
- base.Reset();
- if (IsEmpty)
- return;
- if (IsSet("imageUrl"))
- ViewState.Remove("imageUrl");
- }
- #endregion
好了,再次編譯測(cè)試一下,效果也出來了.
這里再寫一點(diǎn).再呈現(xiàn)的時(shí)候可以重寫另一個(gè)方法來代替AddAttributesToRender方法,如下
- protected override void FillStyleAttributes(CssStyleCollection attributes, IUrlResolutionService urlResolver)
- {
- base.FillStyleAttributes(attributes, urlResolver);
- attributes.Add(HtmlTextWriterStyle.BackgroundImage, ImageUrl);
- }
關(guān)于對(duì)樣式的理解基本的東西就先寫這么多吧.大家看完了再回去看看,注意步驟就可以了.重在理解.
好久沒寫了發(fā)現(xiàn)自己寫的又挺長(zhǎng)的,寫的好累呀...希望對(duì)大家有幫助吧.
ASP.NET控件開發(fā)基礎(chǔ)之自定義控件樣式屬性的基本情況就向你介紹到這里，希望對(duì)你有所幫助。
【編輯推薦】
