利用Themes我们可以很容易的更改控件、页面的风格,而不需要修改我们的代码和页面文件。Themes文件被单独的放在1个App_Themes文件夹下面,与你的程序是完全分开的。
二、怎么使用Themes和Skins:
先看个非常简单的实例:
App_Themes\default\1.skin文件代码:
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx:文件代码:
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Page with Example Theme Applied</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />
</form>
</body>
</html>
可以看到我们在default.aspx并没有写如何的控制style的代码,但运行取发现label上的字都变成了粗体红色了,这就是1个最基本的theme例子。
App_Themes文件夹:
App_Themes文件夹位于程序的根目录下,App_Themes下必须是Theme名称的子文件夹,子文件夹中可以包含多个.skin和.css文件。建立2个Theme,名称分别为default和default2:
使用themes
1、在1个页面中应用Theme:
如果想在某1个页面中应用Theme,直接在aspx文件中修改<%@ Page Theme="..." %>,比如你想这个页面应用default2 theme,设置<%@ Page Theme="default2" %>就OK
2、在所有页面应用同1个Theme:
如果要在所有页面上使用相同的Theme,在web.config中的<system.web>节点下加上句<pages theme="..."/>
3、让控件不应用Theme:
第1个例子中我们看到了2个Label的风格都变了,就是说.skin文件中的风格在页面上所有Label都起作用了。但有时我们希望某1个Label不应用.skin中的风格,这时你只需设置Label的EnableTheming属性为false的时候就可以了。
也许你还想不同的label显示不同的风格,你只需设置label的SkinID属性就可以,见下面的实例:
App_Themes\default\1.skin
<asp:label runat="server" font-bold="true" forecolor="Red" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
deafult.aspx
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Page with Example Theme Applied</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br />
<asp:Label ID="Label3" runat="server" Text="Hello 3" /><br />
</form>
</body>
</html>
运行后就会发现2个label显示的风格不一样了。
4、其他方法:
前面已经说了在aspx文件头使用 <%@ Page Theme="..." %> 来使用theme,而用这个方法应用theme中的风格将会覆盖你写在aspx中的控件属性style。比如:
App_Themes\default\1.skin
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />
<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />
</form>
</body>
</html>
运行结果,所有的label的forecolor都为red。
而使用<%@ Page StyleSheetTheme="..." %>应用theme就不会覆盖你在aspx文件中写的属性style:
控件应用style属性的顺序如下:
a、StyleSheetTheme引用的风格
b、代码设定的控件属性(覆盖StyleSheetTheme)
c、Theme引用的风格(覆盖前面2个)
theme中包含CSS:
theme中也可以使用.css文件,当你把.css文件放在1个theme目录下后,在用到了这个theme的页面中自动会应用你的.css的
三、后台代码轻松为网站换府肤
前面讲的都是在aspx文件或web.config中应用theme,而在blog这样的每个用户都有不同的skin的网站中用上面的方法来实现换skin显然是不方便的。
下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况,theme必须在page被请求的最早期就应用上,所以我们必须在Page_PreInit事件中写代码,代码很简单,就1句:
Page.Theme = "...";
这里我们只要从数据库中去读取每个用户设置的不同theme名就可以轻松实现每个用户都有不同的skin了。
相关推荐
在网页设计领域,“网站换肤”通常指的是通过更改网站的主题(Themes)和皮肤(Skins)来实现网站界面的个性化和风格化。这一功能使得网站能够在不改变基础代码结构的情况下,快速地调整其外观和感觉,为用户提供...
### ASP.NET 2.0中轻松实现网站换肤 #### 一、概述 在Web开发过程中,为了提高用户体验,很多网站提供了多种主题风格供用户选择。ASP.NET 2.0提供了一种简单的方法来实现这一功能,即通过使用**Themes**和**Skins*...
- **主题(themes.css)**:用于实现换肤功能的核心样式文件。 2. **data目录**:存储测试接口数据,通常采用JSON格式,用于模拟前后端数据交互。 3. **Framework目录**:存放前端框架相关的文件。 4. **JS目录**...
使用依赖属性(DependencyProperty)可以实现视图模型与视图之间的数据绑定,从而实现换肤状态的持久化。创建一个依赖属性,如`CurrentTheme`,并将其绑定到UI元素,以便在用户选择新主题时自动更新。 5. **控制...
2. 使用CSS变量(CSS Custom Properties):CSS变量可以在JavaScript中动态修改,从而实现换肤功能。通过定义一组变量代表主题颜色、字体等,然后在JS中改变这些变量的值,页面样式会随之更新。 3. 主题JSON文件:将...
ASP.NET 2.0 提供了一种强大的机制,即 Themes 和 Skins,使得开发者能够轻松地为网站实现换肤功能,无需对代码或页面文件进行大量修改。网站换肤不仅提升了用户体验,还允许设计师自由地调整网站外观,满足不同用户...
如果你的应用需要兼容低版本的Android系统,需要引入这个库,同时可以利用它提供的`Theme.AppCompat`系列主题来实现换肤。 6. **JavaApk源码说明.txt**: 这个文件可能是对源码的详细解释,包括具体实现细节、注意...
6. **实现换肤功能的Demo**:在实际项目中,你可以创建一个下拉菜单或按钮,列出所有可用的皮肤,用户点击后调用`changeSkin`函数进行切换。在提供的"jqueryEasyui换肤技术"压缩包中,应该包含了这样的示例代码和...
Vue + Scss 动态切换主题颜色实现换肤的示例代码主要讲解了如何使用Vue框架配合Scss预处理器来实现前端主题动态切换的功能。这个过程主要通过修改HTML元素的data-theme属性值,使用Scss变量来根据不同主题应用不同的...
本文将深入探讨如何在Android中实现换肤功能,并基于提供的"Android换肤demo"进行详细讲解。 首先,我们要理解Android换肤的基本原理。通常,换肤涉及到替换UI元素的颜色、图片和其他视觉元素。在Android中,我们...
**WPF 动态换肤技术详解** 在Windows Presentation Foundation(WPF)应用程序开发中,动态换肤是一项增强...通过研究`SkinnableApp.sln`解决方案文件和`themes`目录下的资源文件,可以深入理解这项技术的具体实现。
本文将深入探讨如何通过修改资源文件实现WPF应用的换肤功能。 首先,理解WPF中的资源和资源字典至关重要。资源在WPF中是可重用的设计元素,如颜色、样式、模板等,它们被存储在资源字典中,可以在应用程序的各个...
我们可以为控件如Button、TextBox等定义一套默认的样式,然后在需要时切换不同的样式实现换肤。 2. **主题和皮肤**: - 主题是UI的一组统一外观,而皮肤是主题的具体实现,通常包含一组颜色、图像和样式。在我们的...
为了实现换肤,我们需要创建一个动态加载资源的机制,例如使用自定义的Resources类,它可以加载指定主题的资源文件。 2. **主题设计**:在Android中,可以使用Styles和Themes来定义UI的主题。Styles定义了单个组件...
实现网页的皮肤更换 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0036)...
通过分析这个项目,我们可以理解如何在实际应用中实现换肤功能,同时学习到主题和样式的灵活运用,以及如何在运行时动态地改变应用的视觉表现。 四、注意事项 1. 动态换肤可能导致布局重绘,注意性能优化。 2. 避免...
在Android中,主题(Themes)和样式(Styles)是实现换肤的核心。主题是全局的,应用于整个应用程序,而样式则可以局部应用到特定的视图或者Activity。通过修改`res/values/styles.xml`文件中的定义,可以改变控件...
在安卓(Android)平台上,为应用实现换肤功能是一项常见的需求,这能够提供更好的用户体验,让用户根据个人喜好自定义应用的外观。这个“安卓Android源码——换肤.zip”文件很可能是提供了一套完整的源代码示例,...