在ASP.NET WEB控件中应用样式(Style)

asp.net|web|控件

翻译: T.T (TPoI)

在这编文章中, 我将告诉你如何使用.NET FRAMEWORK类库中的WEB类来为WEB服务器控件创建和应用样式(Style).

System.Web.UI.WebControls.Style 类

Style类定义在System.Web.UI.WebControls名字空间, 用来描叙一个WEB服务器控件的样式. 该类的属性可以设置WEB服务器控件的外观, 或者多个WEB服务器控件使用一个通用的外观. 你可以通过这些属性来改变背景色, 前景色, 边框宽度, 边框样式和WEB服务器控件大小. 表1为Style类的属性

表1. Style类的属性

BackColor 获取或设置 Web 服务器控件的背景色
BorderColor 获取或设置 Web 服务器控件的边框颜色
BorderStyle 获取或设置 Web 服务器控件的边框样式
BorderWidth 获取或设置 Web 服务器控件的边框宽度
CssClass 获取或设置由 Web 服务器控件在客户端呈现的 CSS 类 Font 获取与 Web 服务器控件关联的字体属性
ForeColor 获取或设置 Web 服务器控件的前景色(通常是文本颜色)
Height 获取或设置 Web 服务器控件的高度
Width 获取或设置 Web 服务器控件的宽度

System.Web.UI.WebControls.WebControl.ApplyStyle 方法

ApplyStyle方法是把你之前所设置的样式应用到一个Web服务器控件中去. 下面有一小段代码:

WebControl ctrl;
Style s;
// 设置Style的属性
………
// 应用Style
ctrl.ApplyStyle(s);

例子

现在我将用一个例子来讲解如何在WEB服务器控件中应用样式. 在Visual Studio.NET中建立一个WEB应用程序, 在Form中添加3个控件, Button, TextBox, ListBox. 给ListBox中添加一些items(使用Collection属性). 请看图一

现在再创建2个新的方法, CreateStyle和SetControlStyle. CreateStyle方法有7个参数, 为背景色,前景色等传递值. 这个方法返回一个Style的对象

// 这个方法创建一个新的样式

CreateStyle(Color backClr, Color foreClr, int borderWidth, string fntName, int fntSize, bool fntBold, bool fntItalic)
{
Style s = new Style();
s.BackColor = backClr;
s.ForeColor = foreClr;
s.BorderWidth = borderWidth;
s.Font.Name = fntName;
s.Font.Size = fntSize;
s.Font.Bold = fntBold;
s.Font.Italic = fntItalic;
return s;
}

// 这个方法将样式应用到一个WEB服务器控件中
private void SetControlStyle(System.Web.UI.WebControls.WebControl ctrl, Style s)
{
ctrl.ApplyStyle(s);
}

现在将创建按钮的click event

private void Button1_Click(object sender, System.EventArgs e)
{
Style st = CreateStyle(Color.Green, Color.Yellow, 3, "Verdana", 10, true, true);
SetControlStyle(TextBox1, st);
st = CreateStyle(Color.Red, Color.Black, 2, "Verdana", 12, true, true);
SetControlStyle(SetStyleBtn, st);
st = CreateStyle(Color.Blue, Color.Yellow, 2, "Verdana", 12, true, true);
SetControlStyle(ListBox1, st);
}

时间: 2024-08-03 18:37:17

在ASP.NET WEB控件中应用样式(Style)的相关文章

Asp.net Web控件自定义类属性(经验篇)

asp.net|web|控件 做控件设计时,我们往往需要用自己定义的类来做为控件的属性, 但是,很不幸的是,IDE并不能预先知道新类别的诞生,因此,我们需要 有TypeConverter来做个转换,把自己定义的对象转换为字符串显示到控件 的属性页中,把属性页中的字符串(颜色在aspx中的体现也是字符串,如: #eef008)转换为自定义类.           TypeConverter实现步骤可以有以下两种方式:           一:套用系统定义的TypeConverter类,对自定义属性

在Web用户控件中引用样式表中样式的方法_实用技巧

如何在Web用户控件中引用样式表中的样式 复制代码 代码如下: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="gl1.ascx.cs" Inherits="admin_gl1" EnableTheming="True" %> < link href="../App_Themes/qiantai.css&quo

asp.net 用户控件中图片及样式问题_实用技巧

比如,头尾用户控件.这时候控件里的图片,及css 样式就会出现问题.不同位置的文件引用同一个位置的用户控件,这时候用户控件的图片及css样式路径发生错乱. 1.如果用户控件中有服务器控件需要引用图片地址,比如ImageButton,这时候你只要按照用户控件的位置写好引用图片的链接地址就行,也就是服务器控件可以智能解析出它的确切位置 2.如果是插入图片,按照用户控件所在文件夹位置写出图片链接地址,是不行的.比如:图片文件是:/images/dian.gif . /index.aspx 和/memb

在自定义web控件中绑定页面中的Repeater数据控件

问题描述 我在web自定义控件中这么做的,但是数据绑定不了Repeaterrpt=(Repeater)this.Parent.FindControl("rptname");rpt.DataSource=DT;rpt.DataBind();//绑定数据控件请问如何解决 解决方案 解决方案二:help

如何将Table Web控件中的数据导成Excel????---急!急!急!急!急!

问题描述 我用Table服务器控件绑定数据然后在客户端将Table中的数据已Excel导出结果打开看没任何数据,郁闷!请高手们帮我看看怎么回事!!下面是我导成Excel的代码://定义文档类型.字符编码Response.Clear();Response.Buffer=true;Response.Charset="GB2312";//下面这行很重要,attachment参数表示作为附件下载,您可以改成online在线打开//filename=FileFlow.xls指定输出文件的名称,注

Asp.Net Web控件 (五)(可分页Repeater的使用)

在上一节中的示例中使用url分页,使用也是非常简单. 这一节将讲述其他属性,包括如何使用postback分页.其实控件在默认情况下市使用postback分页的 . 下面示例是使用postback分页: cs的代码: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { bindData(); } } void bindData() { PageRepeater1.FromSection = DbSess

Asp.Net Web控件 (一)(上传控件)

这个控件就是对 cloudgamer 的 仿163网盘无刷新多文件上传系统 封装,使我们使用更加简单方便. 先来看效果: <hxj:UploadControl ID="uploadfile" runat="server" MaxFileNumbers="5" AllowExtensions="jpg,gif" /> <asp:Button ID="Button1" runat="

asp.net reportview控件中列属性如何在不同行中显示

问题描述 比如说一个表table1中的列比较多,做在报表中把列全部列出来的话不够宽,想分成若干行来显示,如何实现?如图所示.另外,报表的表控件如何合并纵向单元格?如图中合并姓名那个单元格.图中表名为person,列名有姓名,籍贯,年龄,婚否,学历,政治面貌,毕业院校,民族和爱好 解决方案 本帖最后由 beleson 于 2012-06-11 22:53:38 编辑解决方案二:没人会吗?自己顶一下

asp.net GridView控件中实现全选的解决方案_实用技巧

第一种:利用客户端控件实现 JS: 复制代码 代码如下: <script type="text/javascript"> function checkAll() { var checklist=document.getElementsByTagName("input"); for(var i=0;i<checklist.length;i++) { if(checklist[i].type=="checkbox") { check