当前位置：首页 > 在ASP.NET 2.0中使用样式、主题和皮肤

在ASP.NET 2.0中使用样式、主题和皮肤

点击次数:1100  更新日期:2010-12-26
\n

ASP.NET 2.0的主题和皮肤特性使你能够把样式和布局信息存放到一组独立的文件中，总称为主题（Theme）。接下来我们可以把这个主题应用到任何站点，用于改变该站点内的页面和控件的外观和感觉。通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样式。主题也可以在开发者之间共享。

　　ASP.NET包含了大量的用于定制应用程序的页面和控件的外观和感觉的特性。控件支持使用Style（样式）对象模型来设置格式属性（例如字体、边框、背景和前景颜色、宽度、高度等等）。控件也支持使用样式表（CSS）来单独设置控件的样式。你可以用控件属性或CSS来定义控件的样式信息，或者把这些定义信息存放到单独的一组文件中（称为主题），然后把它应用到程序的所有或部分页面上。单独的控件样式是用主题的皮肤（Skin）属性来指定的。

　　本文用大量的示例演示了在ASP.NET 2.0中如何使用样式、主题和皮肤特性。

　　给控件应用样式

　　Web用户界面是非常灵活的，不同的Web站点的外观和感觉是截然不同的。目前广泛采用的样式表（CSS）在很大程度上就是负责处理Web上遇到的丰富的设计需求的。ASP.NET的HTML服务器控件和Web服务器控件都被设计成优先支持CSS样式表。这一部分讨论如何在服务器控件上使用样式，并演示了它们所提供的Web窗体的外观和感觉的非常细微的控制。

　　给HTML控件应用样式

　　标准的HTML标记通过style属性来支持CSS，我们可以用分号隔离的属性/值对（pair）来设置它。所有的ASP.NET HTML服务器控件都可以采用标准HTML标记的方式来接受样式。下面的例子演示了大量的应用到HTML服务器控件的样式。在源代码中你可以看到，这些样式都是在控件显示的时候传递给浏览器的。


\n

\n


\n
＜span style=”font: 12pt verdana; color:orange;font-weight:700″ runat=”server”＞
This is some literal text inside a styled span control＜/span＞
＜p＞＜font face=”verdana”＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button style=”font: 8pt verdana;background-color:lightgreen;border-color:black;width:100″ runat=”server”＞Click me!＜/button＞

　　CSS还定义了class属性，你可以把它设置为文档中＜style＞…＜/style＞内包含的CSS样式定义。Class属性使你能够一次定义样式，在多个服务器标记上使用，避免了样式的重复定义。HTML服务器控件的style属性可以用这种方式来设置，如下所示：


\n

\n


\n
＜style＞
.spanstyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}

.buttonstyle
{
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100
}
……
＜/style＞

＜span class=”spanstyle” runat=”server”＞
This is some literal text inside a styled span control
＜/span＞
＜p＞＜font face=”verdana”＞＜h4＞Styled Button＜/h4＞＜/font＞＜p＞
＜button class=”buttonstyle” runat=”server”＞Click me!＜/button＞

　　在分析ASP.NET页面的时候，在System.Web.UI.HtmlControls.HtmlControl类中，样式信息被填充到CssStyleCollection类型的Style属性。这个属性本质上是一个字典，它把控件的样式暴露为每个样式属性键的按字符串索引的值集合。例如，你可以使用下面的代码设置和检索HtmlInputText服务器控件的width样式属性：


\n

\n


\n
＜script language=”VB” runat=”server” ＞
Sub Page_Load(Sender As Object, E As EventArgs)
MyText.Style(“width”) = “90px”
Response.Write(MyText.Style(“width”))
End Sub
＜/script＞

＜input type=”text” id=”MyText” runat=”server”/＞

　　下面的例子显示了如何编程使用Style集合属性来控制HTML服务器控件的样式：


\n

\n


\n
＜script language=”VB” runat=”server”＞
Sub Page_Load(Src As Object, E As EventArgs)
Message.InnerHtml &= “＜h5＞Accessing Styles…＜/h5＞”
Message.InnerHtml &= “The color of the span is: ” & MySpan.Style(“color”) & “＜br＞”
Message.InnerHtml &= “The width of the textbox is: ” & MyText.Style(“width”) & “＜p＞”
Message.InnerHtml &= “MySelect’s style collection is: ＜br＞＜br＞”
Dim Keys As IEnumerator
Keys = MySelect.Style.Keys.GetEnumerator()
Do While (Keys.MoveNext())
Dim Key As String
Key = CStr(Keys.Current)
Message.InnerHtml &= “＜li＞  ”
Message.InnerHtml &= Key & “=” & MySelect.Style(Key) & “＜br＞”
Loop
End Sub

Sub Submit_Click(Src As Object, E As EventArgs)
Message.InnerHtml &= “＜h5＞Modifying Styles…＜/h5＞”
MySpan.Style(“color”) = ColorSelect.Value
MyText.Style(“width”) = “600″
Message.InnerHtml &= “The color of the span is: ” & MySpan.Style(“color”) & “＜br＞”
Message.InnerHtml &= “The width of the textbox is: ” & MyText.Style(“width”)
End Sub
＜/script＞
给Web服务器控件应用样式

　　Web 服务器控件添加了几个用于设置样式的强类型属性（例如背景色、前景色、字体名称和大小、宽度、高度等等），从而为样式提供了更多层次的支持。这些样式属性表现了HTML中可用的样式行为的子集，并表现为System.Web.UI.WebControls.WebControl基类直接暴露的”平面”属性。使用这些属性的优势在于，在开发工具（例如微软Visual Studio .NET）中，它们提供了编译时的类型检测和语句编译。

　　下面的例子显示了一个应用了几种样式的WebCalendar控件。请注意，当设置的属性是类类型（class type）的时候（例如字体），你必须使用子属性语法PropertyName-SubPropertyName（属性－子属性）：


\n

\n


\n
＜ASP:Calendar runat=”server”
BackColor=”Beige”
ForeColor=”Brown”
BorderWidth=”3″
……
/＞

　　System.Web.UI.WebControls名字空间包含了Style基类，它封装了公用的样式属性（其它的样式类，例如TableStyle和TableItemStyle都继承自这个基类）。为了指定控件的各个显示元素，大多数Web服务器控件都暴露了这个类型属性。例如，WebCalendar暴露和很多样式属性：DayStyle、WeekendDayStyle、TodayDayStyle、SelectedDayStyle、OtherMonthDayStyle和NextPrevStyle。你可以使用子属性语法PropertyName-SubPropertyName来设置这些样式的属性，如下面的例子所示：


\n

\n


\n
＜ASP:Calendar runat=”server”
……
DayStyle-Width=”50px”
DayStyle-Height=”50px”

TodayDayStyle-BorderWidth=”3″
WeekEndDayStyle-BackColor=”palegoldenrod”
WeekEndDayStyle-Width=”50px”
WeekEndDayStyle-Height=”50px”
SelectedDayStyle-BorderColor=”firebrick”
SelectedDayStyle-BorderWidth=”3″
OtherMonthDayStyle-Width=”50px”
OtherMonthDayStyle-Height=”50px”
/＞

　　下面的语法有稍微的不同，它允许你把Style属性声明为Web服务器控件标记内嵌套的子元素：


\n

\n


\n
＜ASP:Calendar … runat=”server”＞
＜TitleStyle BorderColor=”darkolivegreen” BorderWidth=”3″ BackColor=”olivedrab” Height=”50px” /＞
＜/ASP:Calendar＞

　　下面的例子显示了一种替代语法，但是它的功能与前面的语法是一样的。


\n

\n


\n
＜ASP:Calendar id=”MyCalendar” runat=”server”
……
＞
＜TitleStyle BorderColor=”darkolivegreen” BorderWidth=”3″ BackColor=”olivedrab” Height=”50px” /＞
＜DayHeaderStyle BorderColor=”darkolivegreen” BorderWidth=”3″ BackColor=”olivedrab” ForeColor=”black” Height=”20px” /＞
＜WeekEndDayStyle BackColor=”palegoldenrod” Width=”50px” Height=”50px” /＞
＜DayStyle Width=”50px” Height=”50px” /＞
＜TodayDayStyle BorderWidth=”3″ /＞
＜SelectedDayStyle BorderColor=”firebrick” BorderWidth=”3″ /＞
＜OtherMonthDayStyle Width=”50px” Height=”50px” /＞
＜/ASP:Calendar＞

　　使用HTML服务器控件的时候，你可以使用CSS类定义给Web服务器控件应用样式。WebControl基类暴露了一个叫做CssClass的字符串属性，用于设置样式类：


\n

\n


\n
＜style＞
.calstyle { font-size:12pt; font-family:Tahoma,Arial; }
＜/style＞

＜ASP:Calendar CssClass=”calstyle” runat=”server”
……
/＞

　　如果某个服务器控件上设置的属性没有与该控件的强类型属性相对应，那个该属性和值就被填充到控件的Attributes集合中。在默认情况下，服务器控件会把这些属性不作更改地呈现在HTML中，并返回给作出请求的浏览器客户端。这意味着，我们可以直接设置Web服务器控件的样式和类属性，而不必使用强类型的属性。尽管它要求我们理解控件的实际显示过程，但是它也是应用样式的一个灵活的途径。对于标准的输入控件，这样的操作用处很大，如下面的例子所示：


\n

\n


\n
＜ASP:TextBox runat=”server” class=”beige” style=”font-weight:700;”/＞
＜ASP:TextBox TextMode=”Password” runat=”server” class=”beige”/＞
＜ASP:DropDownList class=”beige” runat=”server”＞
＜ASP:ListItem＞Default Desktop＜/ASP:ListItem＞
＜ASP:ListItem＞My Stock Portfolio＜/ASP:ListItem＞
＜ASP:ListItem＞My Contact List＜/ASP:ListItem＞
＜/ASP:DropDownList＞
＜ASP:Button Text=”Submit” runat=”server” class=”beige”/＞

　　我们也可以使用WebControl基类的ApplyStyle方法来编程设置Web服务器控件的样式，如下面的代码所示：


\n

\n


\n
＜script language=”VB” runat=”server”＞
Sub Page_Load(Src As Object, E As EventArgs)
Dim MyStyle As New Style
MyStyle.BorderColor = Color.Black
MyStyle.BorderStyle = BorderStyle.Dashed
MyStyle.BorderWidth = New Unit(1)

MyLogin.ApplyStyle (MyStyle)
MyPassword.ApplyStyle (MyStyle)
MySubmit.ApplyStyle (MyStyle)
End Sub
＜/script＞

Login: ＜ASP:TextBox id=”MyLogin” runat=”server” /＞/＜p/＞
Password: ＜ASP:TextBox id=”MyPassword” TextMode=”Password” runat=”server” /＞
View: ＜ASP:DropDownList id=”MySelect” runat=”server”＞ … ＜/ASP:DropDownList＞
利用主题来定制站点

　　前面的部分演示了几种通过设置控件自身的样式属性来指定控件样式的方法。例如，我们看看如下的页面（代码），在这个页面上的各个控件上都应用了很多样式设置。


\n

\n


\n
＜asp:Label ID=”Label1″ runat=”server” Text=”Hello 1″ Font-Bold=”true” ForeColor=”orange” /＞＜br /＞

＜asp:Calendar BackColor=”White” BorderColor=”Black” BorderStyle=”Solid” CellSpacing=”1″ Font-Names=”Verdana” Font-Size=”9pt” ForeColor=”Black” Height=”250px” ID=”Calendar1″ NextPrevFormat=”ShortMonth” runat=”server” Width=”330px”＞
＜SelectedDayStyle BackColor=”#333399″ ForeColor=”White” /＞
＜OtherMonthDayStyle ForeColor=”#999999″ /＞
＜TodayDayStyle BackColor=”#999999″ ForeColor=”White” /＞
＜DayStyle BackColor=”#CCCCCC” /＞
＜NextPrevStyle Font-Bold=”True” Font-Size=”8pt” ForeColor=”White” /＞
＜DayHeaderStyle Font-Bold=”True” Font-Size=”8pt” ForeColor=”#333333″ Height=”8pt” /＞
＜TitleStyle BackColor=”#333399″ BorderStyle=”Solid” Font-Bold=”True” Font-Size=”12pt”
ForeColor=”White” Height=”12pt” /＞
＜/asp:Calendar＞

　　作为在各个控件上指定样式的补充，ASP.NET 2.0引入了”主题”的概念，它提供了一种定义站点的控件和页面的样式设置的简单途径，而且它与应用程序的页面是分离的。主题的优势在于，你在设计站点的时候不用考虑它的样式，在将来应用样式的时候，不必更新页面或应用程序代码。你还可以从外部获取定制的主题，然后应用到自己的应用程序上。主题的优势是，样式设置都存储在一个单独的位置，它的维护与应用程序是分离的。

　　下面的例子演示了一个带有主题的页面。请注意，这个页面本身没有包含任何样式信息。主题在运行时自动地把样式属性应用到页面的控件上。


\n

\n


\n
＜%@ Page Language=”VB” Theme=”ExampleTheme” %＞

＜asp:Label ID=”Label1″ runat=”server” Text=”Hello 1″ /＞＜br /＞
＜asp:Calendar ID=”Calendar1″ runat=”server”/＞
＜asp:GridView ID=”GridView1″ AutoGenerateColumns=”False” DataSourceID=”SqlDataSource1″ DataKeyNames=”au_id” runat=”server”＞
……
＜/asp:GridView＞
＜asp:SqlDataSource ConnectionString=”＜% ConnectionStrings:Pubs %＞” ID=”SqlDataSource1″ runat=”server” SelectCommand=”SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]“＞
＜/asp:SqlDataSource＞

　　App_Themes文件夹

　　主题位于应用程序根目录的App_Themes文件夹中。主题由一个为主题命名的子目录和这个子目录下的一个或多个皮肤文件（带有.skin扩展名）组成。主题还可以包含CSS文件和/或存放静态文件（例如图像）的子目录。下图显示了定义了两个主题的App_Themes目录，分别叫做”Default”和”White”，每个主题包含一个皮肤文件和一个CSS文件。


\n

\n


\n

\n

\n