[翻译]在asp.net 2.0中使用主题
介绍
主题用来为web页面定义视觉样式.主题有一系列元素组成:skins,Css,images还有其他资源.主体可以应用在程序,页面或服务器控件级别.
我们可以创建主题通过在解决方案中添加App_Themes文件夹.我们也可以通过添加skin文件达到目的.
应用主题
在一个页面中应用主题
主题是页面类的一个属性,我们可以以不同的方法设置.一旦设定了主题,页面会保证页面中所有的控件将按照主题中定义的样式呈现.
在整个程序中应用主题
我们可以在web.confi中设置程序级别的主题.
在一个服务器上的所有程序中应用主题
我们可以通过machine.config指定所有程序的主题
移除主题
移除服务器控件中的主题
无论主题设置为程序级别还是页面级别,我们可以设置控件自己的样式.
移除页面中的主题
但是我们可以让页面中的特定服务器控件应用主题
主题和样式表主题
页面也可以直接包含样式表主题,并可以将主题设置成样式表主题.
创建主题
我们可以创建多个主题,主题文件夹的元素可以能是一下内容:
一个skin文件
CSS文件
图片
创建一个skin
skin使我们能够修改任何asp.net页面中应用主题的服务器控件的属性.主题可以和CSS或图片一起工作.我们可以用单一的皮肤创建一个主题,skin的扩展名永远是.skin.
如上所示,我们需要在skin文件中定义服务器控件的样式.
将CSS文件包含到主题中
我们用skin文件仅仅能为服务器空间安提供样式,但是asp.net页面是由html控件,html或test.实现他们的样式需要用到在主题文件夹中的CSS文件.我们点击主题文件夹选择添加新项来创建CSS文件.当我们同时使用skin和css时,skin将具有较高的优先级.
定义多skin选项
在skin中,我们可以创建同种服务器控件的多种样式.我们使用skinID属性来区别不同的定义.
在上面的代码中,第一个TextBox控件没有SkinID表示他将用于TextBox的缺省样式.
让程序自动使用主题
在上面的代码中,样式被定义在设计阶段,但是我们能让程序自动使用主题.
自动分派页面的主题
自动分派控件的skin
主题中的图片
主题使我们能够将实际的图片混合到样式的定义中.许多控件用图片来呈现更好的视觉效果.我们要在主题文件夹中创建图片文件夹.
当上面的代码到达客户端时,浏览器自动从App_Themes/ myTheme /Images 文件夹读取请求的图片.(当myTheme是选中的主题时)
总结
主题是 asp.net 2.0中强有力的特性.主题使我们能够只一次定义控件的表现形式,而可以在整个程序中应用.这个改进提高了站点的可维护性和避免不必要的为共享样式而进行的代码复制.
主题用来为web页面定义视觉样式.主题有一系列元素组成:skins,Css,images还有其他资源.主体可以应用在程序,页面或服务器控件级别.
我们可以创建主题通过在解决方案中添加App_Themes文件夹.我们也可以通过添加skin文件达到目的.
应用主题
在一个页面中应用主题
主题是页面类的一个属性,我们可以以不同的方法设置.一旦设定了主题,页面会保证页面中所有的控件将按照主题中定义的样式呈现.
<% Page Language="C#" Theme="myTheme" %>
在整个程序中应用主题
我们可以在web.confi中设置程序级别的主题.
<configuration>
<system.web>
<pages theme=”myTheme”/>
</system.web>
</configuration>
<system.web>
<pages theme=”myTheme”/>
</system.web>
</configuration>
在一个服务器上的所有程序中应用主题
我们可以通过machine.config指定所有程序的主题
<pages buffer="true" enableSessionState="true"
enableViewState="true" enableViewStateMac="true"
autoEventWireup="true" validateRequest="true"
enablePersonalization="false" theme=" myTheme " >
</pages>
enableViewState="true" enableViewStateMac="true"
autoEventWireup="true" validateRequest="true"
enablePersonalization="false" theme=" myTheme " >
</pages>
移除主题
移除服务器控件中的主题
无论主题设置为程序级别还是页面级别,我们可以设置控件自己的样式.
<asp:Textbox ID="txtTest" Runat="server" BackColor="White" ForeColor="Black" EnableTheming="false" />
移除页面中的主题
<% Page Language="C#" EnableTheming="false"
但是我们可以让页面中的特定服务器控件应用主题
<asp:Textbox ID="txtTest" Runat="server" EnableTheming="true" Theme="myTheme"/>
主题和样式表主题
页面也可以直接包含样式表主题,并可以将主题设置成样式表主题.
<% Page Language="C#" StylesheetTheme ="myTheme" %>
样式表主题属性和主题属性一样的工作将一个主题应用到页面.不同点在于,当页面包含一个特别的服务器控件的属性被局部的设置,当我们用主题属性时,那些属性将被主题重写.但是如果我们用样式表属性设置主题,服务器控件的局部属性将不会重写.创建主题
我们可以创建多个主题,主题文件夹的元素可以能是一下内容:
一个skin文件
CSS文件
图片
创建一个skin
skin使我们能够修改任何asp.net页面中应用主题的服务器控件的属性.主题可以和CSS或图片一起工作.我们可以用单一的皮肤创建一个主题,skin的扩展名永远是.skin.
<asp:Label Runat="server" ForeColor="Red" Font-Names="Verdana" Font-Size="X-Small"/> <asp:Textbox Runat="server ForeColor="Red"
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="Yellow" Font-Bold="True" />
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px" BorderColor="Yellow" Font-Bold="True" />
如上所示,我们需要在skin文件中定义服务器控件的样式.
将CSS文件包含到主题中
我们用skin文件仅仅能为服务器空间安提供样式,但是asp.net页面是由html控件,html或test.实现他们的样式需要用到在主题文件夹中的CSS文件.我们点击主题文件夹选择添加新项来创建CSS文件.当我们同时使用skin和css时,skin将具有较高的优先级.
定义多skin选项
在skin中,我们可以创建同种服务器控件的多种样式.我们使用skinID属性来区别不同的定义.
<asp:Textbox Runat="server" ForeColor="Blue"
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px"
BorderColor="Red"
Font-Bold="True" />
<asp:Textbox Runat="server" ForeColor="Red"
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Dotted"
BorderWidth="5px" BorderColor="Blue"
Font-Bold="False" SkinID="txtDotted"/>
<asp:Textbox Runat="server"
ForeColor="Yellow" Font-Names="Arial" Font-Size="X-Large" BorderStyle="Dashed"
BorderWidth="1px" BorderColor="Red"
Font-Bold="False" SkinID="txtDashed"/>
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Solid" BorderWidth="1px"
BorderColor="Red"
Font-Bold="True" />
<asp:Textbox Runat="server" ForeColor="Red"
Font-Names="Verdana" Font-Size="X-Small" BorderStyle="Dotted"
BorderWidth="5px" BorderColor="Blue"
Font-Bold="False" SkinID="txtDotted"/>
<asp:Textbox Runat="server"
ForeColor="Yellow" Font-Names="Arial" Font-Size="X-Large" BorderStyle="Dashed"
BorderWidth="1px" BorderColor="Red"
Font-Bold="False" SkinID="txtDashed"/>
在上面的代码中,第一个TextBox控件没有SkinID表示他将用于TextBox的缺省样式.
<% Page Language=“C#" Theme ="myTheme" %>
<html>
<body>
<form id="frmThemeTest" runat="server">
<p>
<asp:TextBox ID="txtThemeTest1"
Runat="server">TextBox1</asp:TextBox>
<p>
<asp:TextBox ID="txtThemeTest2"
Runat="server" SkinID=" txtDotted “> TextBox1</asp:TextBox>
<p>
<asp:TextBox ID="txtThemeTest3"
Runat="server" SkinID=" txtDashed"> TextBox1</asp:TextBox>
</body>
</html>
<html>
<body>
<form id="frmThemeTest" runat="server">
<p>
<asp:TextBox ID="txtThemeTest1"
Runat="server">TextBox1</asp:TextBox>
<p>
<asp:TextBox ID="txtThemeTest2"
Runat="server" SkinID=" txtDotted “> TextBox1</asp:TextBox>
<p>
<asp:TextBox ID="txtThemeTest3"
Runat="server" SkinID=" txtDashed"> TextBox1</asp:TextBox>
</body>
</html>
让程序自动使用主题
在上面的代码中,样式被定义在设计阶段,但是我们能让程序自动使用主题.
自动分派页面的主题
<script runat ="server">
Protected void Page_PreInit(object sender,
System.EventArgs e)
{
Page.Theme=Request.QueryString[“AppliedTheme"];
}
</script>
Protected void Page_PreInit(object sender,
System.EventArgs e)
{
Page.Theme=Request.QueryString[“AppliedTheme"];
}
</script>
自动分派控件的skin
<script runat ="server">
Protected void Page_PreInit(object sender,
System.EventArgs e)
{
txtThemeTest.SkinID="txtDashed"
}
</script>
Protected void Page_PreInit(object sender,
System.EventArgs e)
{
txtThemeTest.SkinID="txtDashed"
}
</script>
主题中的图片
主题使我们能够将实际的图片混合到样式的定义中.许多控件用图片来呈现更好的视觉效果.我们要在主题文件夹中创建图片文件夹.
<asp:image ID="Image1" runat="server" Imageurl="Images/testImage.jpg" />
当上面的代码到达客户端时,浏览器自动从App_Themes/ myTheme /Images 文件夹读取请求的图片.(当myTheme是选中的主题时)
总结
主题是 asp.net 2.0中强有力的特性.主题使我们能够只一次定义控件的表现形式,而可以在整个程序中应用.这个改进提高了站点的可维护性和避免不必要的为共享样式而进行的代码复制.