• ASP.NET加载主题和皮肤样式的各种方式


    一、加载主题(皮肤、样式表)的多种方式

    除了在页面指令中采用Theme或者StylesheetTheme为单个页面加载主题外,还可以通过配置文件为多个页面批量加载主题,另外,还可以通过改变页面的Theme属性值动态加载主题,或者通过改变控件的SkinID属性值动态加载主题中的皮肤,或者通过改变控件的CssClass属性值动态加载主题中的样式表。

    1、通过修改配置文件为多个页面批量加载主题

    在配置文件里添加Theme或者StyleSheetTheme属性

    <configuration>  

    <system.web>    

    <!—<pages theme=”Theme_XP”/>-->

        <pages styleSheetTheme="Theme_XP"/>    

    </system.web> </configuration>

    此时配置文件目录下的所有页面都会自动加载改主题,但记得去掉Page指令里的Theme或者StyleSheetTheme属性,否则会重写配置文件的里的对应属性。 

    2、通过改变页面的Theme属性值动态加载主题

    在页面的PreInit事件中可以动态加载主题,此时皮肤文件和样式表文件会同时被加载,但在该事件中不能够调用页面的控件,因为在此事件中,页面控件还未初始化。

    <%@ Page Language="C#" Theme="DynamicTheme" %>

    …… <a href="DynamicTheme.aspx?theme=XP">Theme_XP </a>

    <a href="DynamicTheme.aspx?theme=Win7">Theme_Win7 </a>

    …… protected void Page_PreInit(object sender, EventArgs e)

    {     Theme = "Theme_XP";     if (Request["theme"] != null)    

    {         switch (Request["theme"])      

       {             case "XP":                

    Theme = "Theme_XP";              

       break;        

        case "Win7":             

        Theme = "Theme_Win7";         

            break;        

    }    

    }

    }

    3、通过改变控件的SkinID属性值动态加载主题中的皮肤

    除了在页面的PreInit事件中动态加载主题外,还可以在PreInit事件中选择加载主题中的皮肤,但皮肤只能是命名皮肤。

    <%@ Page Language="C#" Theme="DynamicCSS" %>

    …… <a href="showdynamicskin.aspx?skin=professional">Professional</a>

    <a href="showdynamicskin.aspx?skin=colorful">Colorful</a>

    …… protected void Page_PreInit(object sender, EventArgs e)

    {     if (Request["skin"] != null)   

       {         switch (Request["skin"])       

      {             case "professional":              

       grdMovies.SkinID = "Professional";              

       break;           

      case "colorful":             

        grdMovies.SkinID = "Colorful";         

            break;         }

        }

    }

    4、通过改变控件的CssClass属性值动态加载主题中的样式表

    除了动态加载主题外,还可以选择加载主题中的样式表。 样式表文件:App_ThemesDynamicCSSGridView.CSS

    .Professional td {     padding:4px;     color:#333333;     background-color:#F7F6F3; }

    .Professional .Header th {     padding:4px;     background-color:#5D7B9D;     font-weight:bold;     color:White; }

    .Professional .Alternating td {     background-color:White;     color:#284775; }

    .Colorful td {     padding:4px;     color:#333333;     background-color:#FFFBD6; }

    .Colorful .Header th {     padding:4px;     background-color:#990000;     font-weight:bold;     color:White; }

    .Colorful .Alternating td {     background-color:White; }

    <%@ Page Language="C#" Theme="DynamicCSS" %>

    …… <asp:GridView id="grdMovies" Runat="server" DataSourceID="srcMovies" GridLines="none" HeaderStyle-CssClass="Header" AlternatingRowStyle-CssClass="Alternating"/>

    <asp:DropDownList id="ddlCssClass" Runat="server">

    <asp:ListItem Text="Professional" /> <asp:ListItem Text="Colorful" /> </asp:DropDownList>

    …… protected void btnSubmit_Click(object sender, EventArgs e)

    {     grdMovies.CssClass = ddlCssClass.SelectedItem.Text; }

    二、禁用主题(皮肤、样式表)

    当加载主题到页面后,因为某些原因需要禁用某个页面的主题,或者说禁用某个控件的主题,此时我们可以采用设置Theme或者StyleSheetTheme为空来完成。而设置EnableTheming为False禁用的只是主题中的皮肤。

    禁用主题:设置Theme或者StyleSheetTheme为空来完成,或者创建一个空的主题文件,然后关联它。

    禁用主题中的皮肤:当以Theme方式加载主题时,我们可以设置控件或者页面的EnableThemeing为False禁用主题中的皮肤。

    三、Theme和StyleSheetTheme的异同

    两者都可用来加载指定的主题,当主题中不包含皮肤文件时,两者效果一样,当主题中包含皮肤文件时,两者因优先级不一样会产生不一样的效果,优先级依次为:StyleSheetTheme->Page->Theme,后面的会重写前面的相同部分。

    皮肤文件:App_ThemesTheme1TextBox.skin

    <%--TextBox默认皮肤--%>

    <asp:TextBox runat="server" BackColor="Red"/>  

    <%--TextBox命名皮肤1--%>

    <asp:TextBox runat="server" BackColor="Yellow" SkinId="txtName"/>

    <%--TextBox命名皮肤2--%>

    <asp:TextBox runat="server" BackColor="Blue" SkinId="txtAge"/>

    1、页面以Theme方式加载主题

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1"  Theme="Theme1"%>

    …… <form>  

       <div>   

      <asp:TextBox ID="TextBox1" runat="server" BackColor="Black"></asp:TextBox>    

    <asp:TextBox ID="TextBox2 " runat="server" SkinID="txtName" BackColor="Black"></asp:TextBox>  

       <asp:TextBox ID="TextBox3" runat="server" SkinID="txtAge"></asp:TextBox>    

    </div>

    </form>

    页面运行后的效果及生成的部分html代码如下,显然,主题中的皮肤文件TextBox.skin重写了页面中三个TextBox控件的相关皮肤属性BackColor,最终其值依次变成了Red,Bule,Yellow。 1

    <input name="TextBox1" type="text" id="TextBox1" style="background-color:Red;" />

    <input name="TextBox2" type="text" id="TextBox2" style="background-color:Yellow;" /> 

    <input name="TextBox3" type="text" id="TextBox3" style="background-color:Blue;" /> 

    2、页面以StylesheetTheme方式加载主题

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" StylesheetTheme="Theme1"%>

    …… <form>     <div>    

    <asp:TextBox ID="TextBox1" runat="server" BackColor="Black"></asp:TextBox>    

    <asp:TextBox ID="TextBox2 " runat="server" SkinID="txtName" BackColor="Black"></asp:TextBox>    

    <asp:TextBox ID="TextBox3" runat="server" SkinID="txtAge"></asp:TextBox>     </div> </form>

    页面运行后的效果及生成的部分html代码如下,显然,页面中前两个TextBox控件的相关皮肤属性BackColor重写了主题中的皮肤文件TextBox.skin,最终其值依次变成了Black,Black,Blue。 1

    <input name="TextBox1" type="text" id="TextBox1" style="background-color:Black;" />

    <input name="TextBox2" type="text" id="TextBox2" style="background-color:Black;" /> 

    <input name="TextBox3" type="text" id="TextBox3" style="background-color:Blue;" />

  • 相关阅读:
    ScrollView反弹效果的实现
    Unity 3D本地公布WebPlayer版时&quot;Failed to download data file&quot;解决方式
    win7休眠的开启与关闭方法命令行操作和图文结合的鼠标操作
    使用Javascript D3创建属于你的涂鸦作品
    android获取自己定义控件位置坐标,屏幕尺寸,标题栏,状态栏高度
    [Python]Use Flask-Admin with PostgreSQL
    [LeetCode] Best Time to Buy and Sell Stock
    spring实战五之Bean的自动检测
    FireBug使用总结
    javascript的window.onload()方法和jQuery的$(document).ready()的对比
  • 原文地址:https://www.cnblogs.com/xiohao/p/3356449.html
Copyright © 2020-2023  润新知