ASP.NET定义主题和外观

ASP.NET定义主题和外观

定义  

　　主题由一组元素组成：外观、级联样式表 （CSS）、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。

　　 外观

　　外观文件具有文件扩展名 .skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含您要作为主题的一部分来设置的属性。

　　有两种类型的控件外观 -“默认外观”和“已命名外观”：

　　当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID 属性，则是默认外观。已命名外观是设置了 SkindID属性的控件外观。

　　 级联样式表

　　主题还可以包含级联样式表（。css 文件）。将 .css 文件放在主题文件夹中时，样式表自动作为主题的一部分加以应用。使用文件扩展名 .css 在主题文件夹中定义样式表。

　　 主题图形和其他资源

　　主题还可以包含图形和其他资源，例如脚本文件或声音文件。

　　 例子

　　1、 首先选择网站项目名称→右键单击→添加新项

　　2.系统会建立一个app_themes文件夹，并在里面建立一个皮肤文件夹sampleTheme，并在里面建立一个皮肤文件sampleTheme.skin.

　　3.在皮肤文件夹sampleTheme中添加一个Label.skin文件和Calendar.skin文件。

　　4.文件内容如下：

　　Label.skin

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

 

　　Calendar.skin：

< asp:Calendar  runat ="server"  
    BackColor ="#FFFFCC"  
    BorderColor ="#FFCC66"  
    BorderWidth ="1px"  
    DayNameFormat ="FirstLetter"  
    Font-Names ="Verdana"  
    Font-Size ="8pt"  
    ForeColor ="#663399"  
    Height ="200px"  
    ShowGridLines ="True"  
    Width ="220px" >
    
     < SelectedDayStyle  BackColor ="#CCCCFF"  Font-Bold ="True"  />
     < SelectorStyle  BackColor ="#FFCC66"  />
     < OtherMonthDayStyle  ForeColor ="#CC9966"  />
     < TodayDayStyle  BackColor ="#FFCC66"  ForeColor ="White"  />
     < NextPrevStyle  Font-Size ="9pt"  ForeColor ="#FFFFCC"  />
     < DayHeaderStyle  BackColor ="#FFCC66"  Font-Bold ="True"  Height ="1px"  />
     < TitleStyle  BackColor ="#990000"  Font-Bold ="True"  Font-Size ="9pt"  ForeColor ="#FFFFCC"  />
</ asp:Calendar >

< asp:Calendar  SkinID ="Simple"  runat ="server"  
    BackColor ="White"  
    BorderColor ="#999999"  
    CellPadding ="4"  
    DayNameFormat ="FirstLetter"  
    Font-Names ="Verdana"  
    Font-Size ="8pt"  
    ForeColor ="Black"  
    Height ="180px"  
    Width ="200px" >
    
     < SelectedDayStyle  BackColor ="#666666"  Font-Bold ="True"  ForeColor ="White"  />
     < SelectorStyle  BackColor ="#CCCCCC"  />
     < WeekendDayStyle  BackColor ="#FFFFCC"  />
     < OtherMonthDayStyle  ForeColor ="#808080"  />
     < TodayDayStyle  BackColor ="#CCCCCC"  ForeColor ="Black"  />
     < NextPrevStyle  VerticalAlign ="Bottom"  />
     < DayHeaderStyle  BackColor ="#CCCCCC"  Font-Bold ="True"  Font-Size ="7pt"  />
     < TitleStyle  BackColor ="#999999"  BorderColor ="Black"  Font-Bold ="True"  />
</ asp:Calendar >

 

　　在“源”视图中，向 @ Page 指令添加下面的属性：

<% ... @ Page Theme="sampleTheme" ...  %> 

 

　　在页面中添加2个caleder和2个lable控件

       

  < asp:Calendar  ID ="Calendar1"  runat ="server" ></ asp:Calendar >

         < asp:Calendar  ID ="Calendar2"  runat ="server"  SkinID ="Simple" ></ asp:Calendar >

         < asp:Label  ID ="Label2"  runat ="server"  Text ="Label" ></ asp:Label >

         < asp:Label  ID ="Label1"  runat ="server"  Text ="Label"  SkinID ="Blue" ></ asp:Label >

 

　　 运行程序

　　注意：

　　1、如果主题是通过设置 @Page 指令或配置的 <pages/> 节的 Theme 属性 （attribute） 应用的，则主题中的外观属性 （property） 将重写页中目标控件的同名属性 （property）。

　　2、通过将 @Page 指令或配置的 <pages/> 节的 StyleSheetTheme 属性设置为主题的名称，可以将主题定义作为服务器端样式来应用。主题属性用作 StyleSheetTheme 时，可能被页中的控件重写。

　　3、 StyleSheetTheme 应在应用程序开发过程中应用，它作为从页中提取样式信息的手段，使应用程序的行为可独立于应用程序的外观进行维护。对应用程序应用 StyleSheetTheme 后，您可能还希望应用 Theme.如果对应用程序既应用 Theme 又应用 StyleSheetTheme，则按以下顺序应用控件的属性：

　　首先应用 StyleSheetTheme 属性

　　应用页中的控件属性（重写 StyleSheetTheme）

　　最后应用 Theme 属性（重写控件属性和 StyleSheetTheme）

　　4、在皮肤文件里面可以针对同一个控件设置多个皮肤风格，使用skinid来区分不同风格，并在aspx页面文件的控件中使用skinid来引用不同皮肤风格。

　　5.以编程方式应用页面主题

　　在页面的 PreInit方法的处理程序中，设置页面的 Theme属性。

　　下面的代码示例演示如何根据查询字符串中传递的值按条件设置页面主题。

　　为应用程序指定和禁用主题

Protected  void  Page_PreInit( object  sender, EventArgs e)

... {

    switch (Request.QueryString["theme"])

    ...{

        case "Blue":

            <b>Page.Theme = "BlueTheme";</b>

            break;

        case "Pink":

            <b>Page.Theme = "PinkTheme";</b>

            break;

    }

}

　　6.

　　将 @ Page 指令的 EnableTheming 属性设置为 false，

  <% ... @ Page EnableTheming="false"  %>

 

　　7.对网站应用主题

　　每个应用程序中都包括多个页面，并且为了保证和谐统一的用户界面，我们可以让所有页面使用同一主题。如果为在每个页头都设置相同的Theme属性值，那么非常麻烦。为了快速地为整个应用程序的所有页面设置相同的主题，可以设置Web.Config文件的<pages>配置节内容。

   

< configuration >  < system .web >  < pages  theme ="sampleTheme"  />  </ system.web >  </ configuration >