65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET: 主题

lonewolf3082
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.67/5 (7投票s)

2008年6月5日

CPOL

4分钟阅读

viewsIcon

126969

downloadIcon

3483

使用 ASP.NET 中的主题。

引言

使用主题是一种很酷且简单的方法，可以在一个页面或整个网站中创建一致的外观和感觉。通过使用主题，您可以轻松地使用 .NET Framework 附带的预定义外观来自定义服务器控件，或者您可以创建自己的主题以获得您自己的外观。

主题

主题是应对在为服务器控件创建布局并在整个应用程序中赋予它们相同外观和感觉时面临的问题的一种方法，而且所需的工作量尽可能少。默认或全局主题包含在框架内的特殊文件夹中，并且可以在源文件以及类文件中声明。自定义主题保存在 ASP.NET 应用程序内的预定义“App_Themes”文件夹中，从而更轻松地根据您的需求进行管理和使用。主题的关键部分是具有 .skin 扩展名的皮肤文件。除了皮肤文件，主题还可以由样式表 .css 文件以及图像组成，以提供对网站布局的额外支持。

皮肤

皮肤文件具有 .skin 文件扩展名，并包含单个控件的属性设置，例如 Button、Label、TextBox 或 Calendar。控件皮肤设置就像控件标记本身一样，但仅包含您要作为主题一部分设置的属性。

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

您在 Theme 文件夹中创建 .skin 文件。一个 .skin 文件可以包含一个或多个控件类型的一个或多个控件皮肤。您可以为每个控件在单独的文件中定义皮肤，或者在一个文件中定义一个主题的所有皮肤。

控件皮肤有两种类型：默认皮肤和命名皮肤

  • 应用主题到页面时，默认皮肤会自动应用于所有同类型的控件。如果控件皮肤没有 SkinID 属性，则该控件皮肤是默认皮肤。例如，如果您为 Calendar 控件创建默认皮肤，则该控件皮肤将应用于使用该主题的页面上的所有 Calendar 控件。（默认皮肤根据控件类型精确匹配，因此 Button 控件皮肤适用于所有 Button 控件，但不适用于 LinkButton 控件或派生自 Button 对象的控件。）
  • 命名皮肤是具有设置的 SkinID 属性的控件皮肤。命名皮肤不会按类型自动应用于控件。相反，您可以通过设置控件的 SkinID 属性来显式地将命名皮肤应用于控件。创建命名皮肤允许您为应用程序中相同控件的不同实例设置不同的皮肤。

全局主题

.NET Framework 的安装路径下存储了内置的默认主题

%SystemRoot%\Microsoft.NET\Framework\VX.X.XXXX\ ASP.NETClientFiles\Themes\

标记为 vX.X.XXXX 的子目录的实际名称会根据 ASP.NET 的版本而变化。在此路径中定义的主题对运行在该计算机上的所有应用程序可见。您还可以通过将其保存在上述目录的 \Themes\ 文件夹的子文件夹中来创建自己的全局主题。

创建页面主题

  1. 在解决方案资源管理器中，右键单击网站名称，然后指向添加 ASP.NET，然后单击主题。
  2. Visual Studio 将自动创建一个 App_Themes 文件夹。
  3. 创建 App_Themes 文件夹的子文件夹并相应命名。
  4. 根据需要添加皮肤、级联样式表和图像。

向页面主题添加皮肤文件

  1. 在解决方案资源管理器中，右键单击主题名称，然后单击添加新项。
  2. 在添加新项对话框中，单击皮肤文件。
  3. 在名称框中输入 .skin 文件的名称。
  4. 在 .skin 文件中，使用声明性语法添加控件定义，仅包含要为主题设置的属性。定义必须包含 runat="server" 属性，并且不得包含 ID="" 属性。
<asp:Button runat="server" 
  BackColor="black"
  ForeColor="green"
  Font-Name="Arial"
 Font-Size="10pt" />

您可以在主题文件夹中创建任意数量的 .skin 文件，但通常每个控件只创建一个。每个控件只能定义一个默认皮肤。如果您需要更多，请在皮肤的控件声明中使用 SkinID 属性为同一个控件创建命名皮肤。

<asp:Label runat="server" ForeColor="#585880" 
   Font-Size="0.7em" Font-Names="Verdana"
   SkinID="LabelHeader" />

<asp:Label runat="server" ForeColor="#585980" 
   Font-Size="0.6em" Font-Names="Arial"
   SkinID="LabelFooter" />

向主题添加级联样式表与添加皮肤相同，只是在添加新项对话框中，您选择样式表。

将主题应用于网站

  1. 在应用程序的 web.config 文件中，将 <pages> 元素设置为主题名称，可以是页面主题或全局主题。
    2. <configuration> 
<system.web>
<pages theme="ThemeName" />
</system.web>
</configuration>

    或者

  2. 将样式表主题设置为从属于本地控件属性，而是设置 styleSheetTheme 属性。
    3. <configuration>
<system.web>
<pages styleSheetTheme="ThemeName" />
</system.web>
</configuration>

将主题应用于单个页面

将 @Page 指令的 Theme 或 StyleSheetTheme 属性设置为主题名称。

<%@ Page Theme="ThemeName" %>
    <%@ Page StyleSheetTheme="ThemeName" %>

将命名皮肤应用于控件

设置控件的 SkinID 属性。

<asp:Calendar runat="server" ID="DateSelector" SkinID="LargeCalendar" />

结论

总而言之，希望这些信息对您有所帮助。主题是一种快速轻松地在网站中创建一致外观和感觉的绝佳方式。

© . All rights reserved.