应用主题 Theme and Skin

1、BasicBlue和SmokeAndGlass这两个自带的主题在bate版本已经取消了，要用主题就得自己创建主题。
（1）在web站点的根目录下“添加ASP.NET文件夹”--App_Themes
（2）在App_Themes创建“主题”文件夹（OrangeTheme、RedTheme、YellowTheme等等，可以多个）展开如图1：

（3）可以把主题应用于整个站点、某个单独的页面、某类控件、某一个控件，也可以允许用户选择要使用的主题。
<1>把主题OrangeTheme应用于整个站点,在web.config添加如下代码：

    < system .web >

       < pages  theme ="OrangeTheme"   />

     </ system.web >  
    <!--
　　如果想用主题RedTheme可以把OrangeTheme改为RedTheme就可以了
      
     -->   

<2>把主题OrangeTheme应用于某个单独的页面OrangePage.aspx,就在OrangePage.aspx代码最上做个修改就可以：

<% ... @ Page Theme="OrangeTheme"  %>
< html >
< head  id ="Head1"  runat ="server" >
     < title > Orange Page </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >

    Enter your name:
     < br  />
     < asp:TextBox
         ID ="txtName"  
        Runat ="Server"   />

     < br  />< br  />

     < asp:Button
         ID ="btnSubmit"  
        Text ="Submit Name"  
        Runat ="Server"   />
      < br  />< br  />
　　这个是OrangePage.aspx的代码，要注意它的最上面的变化．
     </ form >
</ body >
</ html >

<3>把主题OrangeTheme应用于某类控件（如GridView），在OrangeTheme文件夹添加GridView.Skin文件，只要运用到OrangeTheme主题的页面里的GridView都由GridView.Skin文件设置外观。

<4>把主题OrangeTheme应用于某一个控件（如textbox1、textbox2、textbox3等等各有不同的外观），可以通过TextBox.Skin和SkinnedTextBoxes.aspx两个文件来说明：
TextBox.Skin代码如下：

< asp:TextBox
     BackColor ="Green"
    Runat ="Server"   />
    
< asp:TextBox
     SkinID ="BlueTextBox"
    BackColor ="Blue"
    Runat ="Server"   />
    
< asp:TextBox
     SkinID ="RedTextBox"
    BackColor ="Red"
    Runat ="Server"   />   

SkinnedTextBoxes.aspx代码如下：

<% ... @ Page Theme="OrangeTheme"  %>
< html >
< head  id ="Head1"  runat ="server" >
     < title > Skinned TextBoxes </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >

     < asp:TextBox
         id ="TextBox1"
        Runat ="Server"   />

     < br  />

     < asp:TextBox
         id ="TextBox2"
        SkinID ="BlueTextBox"
        Runat ="Server"   />

     < br  />

     < asp:TextBox
         id ="TextBox3"
        SkinID ="RedTextBox"
        Runat ="Server"   />
         < br  />
         < br  />
        Default Skins vs. Named Skins（可以用SkinID对某个textbox指定特定的Skin外观）

     </ form >
</ body >
</ html >

 

<5>可以允许用户选择要使用的主题,我们知道在App_Themes下有三个主题文件夹（OrangeTheme、RedTheme、YellowTheme）。可以通过RedTheme里的DropDownList.Skin、YellowTheme里的DropDownList.Skin两个文件夹  对DynamicTheme.aspx的设置外观来说明：
RedTheme／DropDownList.Skin：

< asp:DropDownList 
    BackColor ="Red"  
   Runat ="Server"   />

YellowTheme／DropDownList.Skin：

< asp:DropDownList 
    BackColor ="Yellow"  
   Runat ="Server"   />
< asp:TextBox 
    BackColor ="Orange"  
   ForeColor ="DarkGreen"  
   Runat ="Server"   />

DynamicTheme.aspx：

 

<% ... @ Page Language="C#"  %>
< script  runat ="server" > ...
    void Page_PreInit(object sender, EventArgs e)
    ...{
        Page.Theme = Request["dropTheme"];
    }
</ script >
< html >
< head  id ="Head1"  runat ="server" >
     < title > Dynamic Theme </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
    
     < asp:DropDownList
         id ="dropTheme"
        AutoPostBack ="true"
        Runat ="Server" >
         < asp:ListItem  Text ="YellowTheme"   />
         < asp:ListItem  Text ="RedTheme"   />
     </ asp:DropDownList >
         < br  />
         < br  />
         < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >< br  />
         < br  />
        用户可以在线选择主题

     </ form >
</ body >
</ html >

<6>主题与css结合应用，通过Hover.css和Menu.aspx来说明：
Hover.css：

A:hover
{...} {
    color: orange;
}

Menu.aspx：

<% ... @ Page Theme="OrangeTheme"  %>
< html >
< head  id ="Head1"  runat ="server" >
     < title > Menu </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >

     < a  href ="Home.aspx" > Home </ a >
     < br  />
     < a  href ="Products.aspx" > Products </ a >
     < br  />
     < a  href ="Services.aspx" > Services </ a >
         < br  />
        css 应用
    

     </ form >
</ body >
</ html >

<7>主题与StyleSheetTheme结合应用,通过StyleSheetThemedTextBox.aspx文件说明：

<% ... @ Page StyleSheetTheme="OrangeTheme"  %>
< html >
< head  id ="Head1"  runat ="server" >
     < title > Style Sheet Themed TextBox </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >

     < b > First Name: </ b >
     < asp:TextBox
         ID ="txtFirstName"
        Runat ="Server"   />
        
     < br  />< br  />

     < b > Last Name: </ b >
     < asp:TextBox
         ID ="txtLastName"
        BackColor ="Yellow"
        Runat ="Server"   />
        
     < br  />< br  />
    
     < asp:Button  ID ="Button1"
        Text ="Submit"
        Runat ="Server"   />
  < br  />< br  />
 StyleSheetTheme can be overloaded
     </ form >
</ body >
</ html >

 

2、值得注意

<1>、在前面“管理用户”我们已经知道不同权限的用户有不同的web.config文件，我们可以在各自的web.config文件中设置不同的主题。
<2>、限制：
（1）you cannot set the TextBox control's AutoPostBack property in a Skin file

（2） you cannot use skins with the Repeater control, the Literal control, or the LoginView 　control. You also cannot use skins with User Controls (however, a skin can apply to the controls contained in a User control).

（3）有包含<head runat="server">的网页才能应用到css的设置。
（4）同一Theme文件夹下，两个不同的Skin文件，不可以同时对同一个控件如textbox创建初始值，只能一个创建初始值，另一个利用Skinid创建多个textbox主题。

如FormControls.skin和TextBox.Skin对SkinnedTextBoxes.aspx的影响（TextBox.Skin和SkinnedTextBoxes.aspx的代码上面已经有了），FormControls.skin代码如下：

 

<% ... --
本来是这样的
<asp:TextBox 
   BackColor="Orange" 
   ForeColor="DarkGreen" 
   Runat="Server" />

<asp:Button 
   BackColor="Orange" 
   ForeColor="DarkGreen"
   Font-Bold="True"
   Runat="Server" />
不过要改为下面的代码，才不会冲突！！！

-- %>





< asp:Button 
    BackColor ="Orange"  
   ForeColor ="DarkGreen"
   Font-Bold ="True"
   Runat ="Server"   />

 

3、参考：
感谢Stephen Walther的帮助，具体请看：
http://msdn2.microsoft.com/en-us/library/ms379601(VS.80).aspx