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è)置樣式方法.
2.了解WebControl.BackColor和Style.BackColor(1)和(2)是差不多的.但(3)則不同,(3)的定義方法有通用性,你可以定義一種樣式,然后利用控件的ApplyStyle方法來引用樣式.給樣式編程提供了方面
WebControl類定義了通用的樣式.(1)和(2)使用的樣式屬性為
(3)則不同,使用的為
3.自定義樣式屬性
剛開始就講了
style類為通用的頂級樣式類,但需求是會(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類的樣式屬性集合.
看了下面效果后請?jiān)倩仡^再理解這句話.
看下面自定義控件代碼,真是簡單的不的了
示例三
namespace CustomComponents
{
public class ImageLabel3 : Label
{
protected override Style CreateControlStyle()
{
return new TableStyle(ViewState);
}
}
}
再看默認(rèn)label控件與其的對比,因?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)換.如下對比
默認(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).我們再來測試一下.看下面示例(還是采用我們第一講的例子)
下面只給出定義樣式屬性的代碼,其他的類似.
使用此控件
<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)的東西.
4.自定義類型化樣式屬性如果樣式屬性無法滿足你需求,則你可以通過自定義類型化樣式來實(shí)現(xiàn).
什么是自定義類型化樣式?就是該類從style類派生,對其進(jìn)行修改和擴(kuò)充(書上就這么寫了...我就這么理解了-_-)
如Table控件,一方面控件自身定義的樣式屬性,另一方面又定義了TableStyle類.你可以在使用控件樣式屬性和TableStyle類中進(jìn)行選擇.
但TableStyle類具有通用性,具有一定的靈活性.好了下面我們又要開始看代碼了.當(dāng)然從簡單開始
(1)簡單呈現(xiàn)樣式屬性需要說明的注意點(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; }
}
} 讓我們來測試一下,你會(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
好了,再次編譯測試一下,效果也出來了.
這里再寫一點(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)于對樣式的理解基本的東西就先寫這么多吧.大家看完了再回去看看,注意步驟就可以了.重在理解.
好久沒寫了發(fā)現(xiàn)自己寫的又挺長的,寫的好累呀...希望對大家有幫助吧.
