zoukankan      html  css  js  c++  java
  • Study Notes ASP.Net 之Theme & Skin

     

    基本概念:

    Theme Skin用以定义页面中各个控件的显示样式,如字体大小,前/后景色等等。

    一个Theme可以包括多个Skin,一个Skin可以定义多个控件的样式。

     

    目的:

    使得页面样式的制作可以与页面制作分工进行。

    使得页面的布局、样式集中管理,方便修改。

     

    使用:

    目录结构:

    如果一个Web应用有用到Theme(应用级别的Theme,下面会讲到全局级的Theme),则在该Web应用的根目录下有个名为 App_Themes”的子目录,而每个Theme都是”App_Themes”的一个子目录。

    每个Skin都是Theme目录中的一个后缀名为.skin的文件。

     

    Theme的使用级别:

    全局Theme: 

    ASP.Net的安装目录(通常是%WINDIR% \Microsoft.NET \Framework \<version>\)下,建立名为”Theme”的子目录,并在其下建立各个全局Theme目录。

    全局Theme对于整个机器上的所有Web应用都可见。

     

    应用级的Theme

    目录结构中说到的,建立在Web应用根目录下的”App_Themes”目录下。

    应用级的Theme只对当前Web应用可见。

     

    Theme的引用:

    页面引用:

    Web页面中用<%@ Page Theme="..." %>设定使用哪个Theme。选中的Theme在该页面有效。

     

    配置引用:

    Web应用的配置文件中,用<pages theme="..."/> 设定使用哪个Theme。设定的Theme对于整个Web应用有效。

     

    动态引用:

    在页面的Page_PreInit()中,为Page.Theme 设定一个可见的Theme名称。

     

    页面样式应用的优先级

    一共有4种方式设定页面的样式:CSSStyleSheetTheme(Tutorial上说这是Server-Side Style, 我不是很明白它的含义),各个控件自己设定的样式属性,Theme。如果设定有冲突,系统会按照Theme -> 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。

    只有一个例外: 控件可以通过设定EnableTheming="False" 使Theme的设定无效。当设定无效后,系统会按照 控件各自属性 -> StyleSheetTheme -> CSS来设定页面样式。

     注:根据Tutorial,一个Theme中可以有多个CSS文件,只要在<head /> 中用<link rel="stylesheet" href="…"/> 来指定使用哪个CSS文件。但是我在使用中发现,如果页面使用了Theme,则指定CSS无效,系统会按照字典顺序使用文件名靠后的那个CSS文件。

     

    Skin的引用:

    Skin文件中可以指定SkinID,也可以不指定;如果没有指定,则认为似当前Theme中该类型控件的默认Skin,如:

    <asp:label runat="server" font-bold="true" forecolor="orange" />

    <asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />

     

    如果页面中不指定SkinID,就是使用选中的Theme中的该类型控件的对应的默认Skin;也可以在页面中指定使用哪个Skin,如:

    <asp:Label ID="Label1" runat="server" Text="Hello 1" />

    <asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" />

     

    注意:

    1) 在同一个Theme中,对于同一种类型的控件,只能有一个默认Skin定义;相似的,同一个Theme中,对于同一种类型的控件,一个SkinID也只能有一个Skin定义

     2) Skin的文件名对于系统选择Skin没有任何用处,系统只是根据Skin所属的Theme,Skin文件中定义的控件类型,SkinID来选择Skin。所以Skin的划分可以根据控件类型(如:Label, Button等等),也可以根据样式类型(如:Classic, Modern等等),完全似取决于开发者的个人喜好。

     

     

    Theme封装模板:

    Theme可以用来封装模板,便于一次性替代整个模块。例如使用以下的Skin文件,就可以在页面中只使用一行代码来定义一个完整的登录界面:

    <asp:Login ID="Login1" runat="server"/>


    Skin文件内容:

    <asp:Login runat="server">
      
    <LayoutTemplate>
        
    <i>Please log in to this site:</i><br /><br />
        
    <table border="0" cellpadding="10" bgcolor="beige">
          
    <tr>
            
    <td>
              
    <asp:Label Font-Bold="true"  AssociatedControlID="UserName" ID="UserNameLabel" runat="server">User Name:</asp:Label>
              
    <br />
              
    <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
              
    <asp:RequiredFieldValidator ControlToValidate="UserName" ErrorMessage="User Name is required."
                ID
    ="UserNameRequired" runat="server" ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
          
    </tr>
          
    <tr>
            
    <td>
              
    <asp:Label Font-Bold="true" AssociatedControlID="Password" ID="PasswordLabel" runat="server">Password:</asp:Label>
              
    <br />
              
    <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
              
    <asp:RequiredFieldValidator ControlToValidate="Password" ErrorMessage="Password is required."
                ID
    ="PasswordRequired" runat="server" ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
            
    </td>
          
    </tr>
          
    <tr>
            
    <td>
              
    <asp:Button CommandName="Login" ID="LoginButton" runat="server" Text="Log In" ValidationGroup="Login1" />
            
    </td>
          
    </tr>
        
    </table>
        
    <br />
        
    <asp:Literal EnableViewState="False" ID="FailureText" runat="server"></asp:Literal>
      
    </LayoutTemplate>
    </asp:Login>




    但是我认为
    ThemeSkin的主要目的在于将页面的样式/布局与页面分开,便于分工,修改;而不是作为Web Control在多个页面中复用的模块,所以应注意使用Theme的封装模板功能。

  • 相关阅读:
    leetcode(85)最大矩形
    红黑树
    查询学生成绩表中大于60分的每一个成绩的人数
    聚合函数以及SQL中的一些小知识
    Oracle的JDBC
    StringBuffer的reverse方法
    查询时报第一页没有数据,第二页有数据的异常
    普通人如何从平庸到优秀,在到卓越
    HDMI、DVI、VGA等这些接口
    显卡上的VGA接口和高清接口有什么区别?
  • 原文地址:https://www.cnblogs.com/cheese/p/223668.html
Copyright © 2011-2022 走看看