主题和外观

    技术2025-02-16  17

    本文摘要:

    1:外观

    2:级联样式表

    3:主题图形和其他资源

    4:主题的应用范围

    4.1:页面主题

    4.2:全局主题

    4.3:禁用 ASP.NET 主题

    4.4:以编程方式应用 ASP.NET 主题

    4.4.1:以编程方式应用页面主题

    4.4.2:以编程方式应用样式表主题

    4.4.3:以编程方式应用控件外观

    5:主题与级联样式表异同

     

    1:外观

    外观文件具有文件扩展名 .skin,它包含各个控件(例如,ButtonLabelTextBox Calendar 控件)的属性设置。控件外观设置类似于控件标记本身,但只包含您要作为主题的一部分来设置的属性。例如,下面是 Button 控件的控件外观:

    <asp:button runat="server" BackColor="lightblue" ForeColor="black" />

    在主题文件夹中创建 .skin 文件。一个 .skin 文件可以包含一个或多个控件类型的一个或多个控件外观。可以为每个控件在单独的文件中定义外观,也可以在一个文件中定义所有主题的外观。

    有两种类型的控件外观 -"默认外观""已命名外观"

    当向页应用主题时,默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID 属性,则是默认外观。例如,如果为 Calendar 控件创建一个默认外观,则该控件外观适用于使用本主题的页面上的所有 Calendar 控件。(默认外观严格按控件类型来匹配,因此 Button 控件外观适用于所有 Button 控件,但不适用于 LinkButton 控件或从 Button 对象派生的控件。) 已命名外观是设置了 SkinID 属性的控件外观。已命名外观不会自动按类型应用于控件。而应当通过设置控件的 SkinID 属性将已命名外观显式应用于控件。通过创建已命名外观,可以为应用程序中同一控件的不同实例设置不同的外观。

     

    2:级联样式表

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

     

    3:主题图形和其他资源

    主题还可以包含图形和其他资源,例如脚本文件或声音文件。例如,页面主题的一部分可能包括 TreeView 控件的外观。您可以在主题中包括用于表示展开按钮和折叠按钮的图形。

    通常,主题的资源文件与该主题的外观文件位于同一个文件夹中,但它们也可以位于 Web 应用程序中的其他地方,例如,主题文件夹的某个子文件夹中。若要引用主题文件夹的某个子文件夹中的资源文件,请使用类似于该 Image 控件外观中显示的路径:

    <asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

    也可以将资源文件存储在主题文件夹以外的位置。如果使用波形符 (~) 语法来引用资源文件,Web 应用程序将自动查找相应的图像。例如,如果您将主题的资源放在应用程序的某个子文件夹中,则可以使用格式为 ~/子文件夹/文件名.ext 的路径来引用这些资源文件,如下面的示例所示。

    <asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

     

    4:主题的应用范围

    在应用程序的 Web.config 文件中,将 <pages> 元素设置为全局主题或页面主题的主题名称,如下面的示例所示:

    <configuration>

    <system.web>

    <pages theme="ThemeName" />

    </system.web>

    </configuration>

    要将主题设置为样式表主题并作为本地控件设置的从属设置,应改为设置 styleSheetTheme 属性:

    <configuration>

    <system.web>

    <pages styleSheetTheme="Themename" />

    </system.web>

    </configuration>

    Web.config 文件中的主题设置会应用于该应用程序中的所有 ASP.NET 网页。Web.config 文件中的主题设置遵循常规的配置层次结构约定。例如,要仅对一部分页应用某主题,可以将这些页与它们自己的 Web.config 文件放在一个文件夹中,或者在根 Web.config 文件中创建一个 <location> 元素以指定文件夹。有关详细信息,请参见 配置特定文件和子目录

    对控件应用外观

    主题中定义的外观应用于已应用该主题的应用程序或页中的所有控件实例。在某些情况下,您可能希望对单个控件应用一组特定属性。这可以通过创建命名外观(.skin 文件中设置了 SkinID 属性的一项),然后按 ID 将它应用于各个控件来实现。设置控件的 SkinID 属性,如下面的示例所示:

    <asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />

     

    4.1:页面主题

    页面主题是一个主题文件夹,其中包含控件外观、样式表、图形文件和其他资源,该文件夹是作为网站中的 /App_Themes 文件夹的子文件夹创建的。每个主题都是 /App_Themes 文件夹的一个不同的子文件夹。

    @ Page 指令的 Theme StyleSheetTheme 属性设置为要使用的主题的名称,如下面的示例所示:

    <%@ Page Theme="ThemeName" %>

    <%@ Page StyleSheetTheme="ThemeName" %>

     

    4.2:全局主题

    全局主题是可以应用于服务器上的所有网站的主题。当您维护同一个服务器上的多个网站时,可以使用全局主题定义域的整体外观。

    全局主题与页面主题类似,因为它们都包括属性设置、样式表设置和图形。但是,全局主题存储在对 Web 服务器具有全局性质的名为 Themes 的文件夹中。服务器上的任何网站以及任何网站中的任何页面都可以引用全局主题。

     

    4.3:禁用 ASP.NET 主题

    禁用页的主题,将 @ Page 指令的 EnableTheming 属性设置为 false,如下例所示:

    <%@ Page EnableTheming="false" %>

    禁用控件的主题,将控件的 EnableTheming 属性设置为 false,如下例所示:

    <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />

     

    4.4:以编程方式应用 ASP.NET 主题

    4.4.1:以编程方式应用页面主题

    在页面的 PreInit 方法的处理程序中,设置页面的 Theme 属性。下面的示例演示如何根据查询字符串中传递的值按条件设置页面主题。

    protected void Page_PreInit(object sender, EventArgs e)

    {

    switch (Request.QueryString["theme"])

    {

    case "Blue":

    Page.Theme = "BlueTheme";

    break;

    case "Pink":

    Page.Theme = "PinkTheme";

    break;

    }

    }

     

    4.4.2:以编程方式应用样式表主题

    在页面的代码中,重写 StyleSheetTheme 属性,然后在 get 访问器中返回样式表主题的名称。下面的代码示例演示如何将名为 BlueTheme 的主题设置为某个页面的样式表主题:

    public override String StyleSheetTheme

    {

    get { return "BlueTheme"; }

    }

     

    4.4.3:以编程方式应用控件外观

    在页面的 PreInit 方法的处理程序中,设置控件的 SkinID 属性。下面的代码示例演示如何设置 Calendar 件的 SkinID 属性。此示例假定已经设置了页面主题。

    void Page_PreInit(object sender, EventArgs e)

    {

    Calendar1.SkinID = "CustomSkin";

    }

     

    5:主题与级联样式表异同

    主题与级联样式表类似,因为主题和样式表均定义一组可以应用于任何页的公共属性。但是,主题与样式表在下列方面不同:

    主题可以定义控件或页的许多属性,而不仅仅是样式属性。例如,使用主题,可以指定 TreeView 控件的图形GridView 控件的模板布局,等等。 主题可以包括图形。 主题级联的方式与样式表不同。默认情况下,页面的 Theme 属性所引用主题中定义的任何属性值会重写控件上以声明方式设置的属性值,除非您使用 StyleSheetTheme 属性显式应用主题。有关更多信息, 每页只能应用一个主题。不能向一页应用多个主题,这与样式表不同,样式表可以向一页应用多个样式表。

     

    转自:http://www.cnblogs.com/luminji/archive/2010/11/17/1879705.html

    最新回复(0)