如何使我的应用程序“可换肤”？
是否有一些标准方法可以使我的应用程序可换肤？
我所说的“可换肤”是指应用程序支持多种皮肤的能力。
我在这里并不针对任何特定平台。 只是想知道是否有任何使应用程序可换肤的一般准则。
看起来 Web 应用程序的换肤相对容易。 桌面应用程序怎么样？
Is there some standard way to make my applications skinnable?
By "skinnable" I mean the ability of the application to support multiple skins.
I am not targeting any particular platform here. Just want to know if there are any general guidelines for making applications skinnable.
It looks like skinning web applications is relatively easy. What about desktop applications?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
皮肤只是另一个抽象层次（YALOA！）。
如果您阅读了 MVC 设计模式，那么您将了解许多需要的原则。
表示层（或皮肤）只需要做一些事情：
在普通程序中，这种抽象是通过将文本框连接到与其相关的方法和对象的代码，以及根据程序命令更改显示的代码来完成的。
如果您想添加换肤功能，您需要采用该功能并使其无需再次编译代码即可完成。
例如，查看 XUL 并了解它是如何完成的。 您会发现很多皮肤项目使用 XML 来描述皮肤的各种“面孔”（它播放音乐，或组织 MP3 播放器皮肤的库），然后描述每个控件的位置以及它的数据和方法。应附在程序中。
看起来可能很难，直到你这样做，然后你意识到它就像你之前处理过的任何其他抽象级别一样（从带有 goto 的程序，到控制结构，到函数，到结构，到类和对象，到 JIT）编译器等）。
最初的学习曲线并不简单，但是做一些项目，你会发现它并不难。
-亚当
Skins are just Yet Another Level Of Abstraction (YALOA!).
If you read up on the MVC design pattern then you'll understand many of the principles needed.
The presentation layer (or skin) only has to do a few things:
In a normal program this abstraction is done by having code which connects the text boxes to the methods and objects they are related to, and having code which changes the display based on the program commands.
If you want to add skinning you need to take that ability and make it so that can be done without compiling the code again.
Check out, for instance, XUL and see how it's done there. You'll find a lot of skinning projects use XML to describe the various 'faces' of the skin (it playing music, or organizing the library for an MP3 player skin), and then where each control is located and what data and methods it should be attached to in the program.
It can seem hard until you do it, then you realize it's just like any other level of abstraction you've dealt with before (from a program with gotos, to control structures, to functions, to structures, to classes and objects, to JIT compilers, etc).
The initial learning curve isn't trivial, but do a few projects and you'll find it's not hard.
-Adam
将所有样式保存在单独的 CSS 文件中
远离任何内联样式
Keep all your styles in a separate CSS file(s)
Stay away from any inline styling
这实际上取决于您希望应用程序的“可换肤”程度。 让用户配置颜色和图像比让他们隐藏/删除组件甚至编写自己的组件要容易得多。
在大多数情况下，您可能可以编写某种提供颜色和图像的资源提供程序，而不是将它们硬编码到源文件中。 所以，这：
会变成这样：
然后，您所要做的就是更改 ResourceManager 类中的映射，并且所有客户端都将保持一致。 如果您想实时执行此操作，更改任何 ResourceManager 的映射可能会向其客户端发送一个事件并通知它们某些内容已发生更改。 然后客户可以根据需要重新绘制其组件。
It really depends on how "skinnable" you want your apps to be. Letting the user configure colors and images is going to be a lot easier than letting them hide/remove components or even write their own components.
For most cases, you can probably get away with writing some kind of Resource Provider that serves up colors and images instead of hardcoding them in your source file. So, this:
Would become something like:
Then, all you have to do is change the mappings in your ResourceManager class and all clients will be consistent. If you want to do this in real-time, changing any of the ResourceManager's mappings will probably send out an event to its clients and notify them that something has changed. Then the clients can redraw their components if they want to.
实现因平台而异，但这里有一些一般的跨平台注意事项：
这些只是需要注意的一些事项。 您的实施将根据 Web 客户端和胖客户端的不同以及您的功能要求而有所不同。 HTH。
Implementation varies by platform, but here are a few general cross-platform considerations:
These are just a few things to be aware of. Your implementation will vary between web and fat client, and by your feature requirements. HTH.
基本原理是CSS在网页中使用的原理。
您无需指定内容的格式（颜色/字体/布局[在某种程度上]），而只需描述内容的类型。
举一个网络示例，在博客页面的内容中，您可以将不同的部分标记为：
等。
该条目可能由几个小节组成，例如“标题”、“正文”和“时间戳” 。
然后，在其他地方，您有一个样式表，它指定每种元素的所有属性、大小、对齐方式、颜色、背景、字体等。在渲染页面或在 UI 中绘制/初始化组件时，您总是查阅当前样式表来查看了这些属性。
然后，剥皮以及编辑您的设计就会变得更加容易。 您只需创建一个不同的样式表并根据您的热量内容调整值即可。
编辑：
要记住的一个关键点是通用样式（如 CSS 中的类）和特定样式（如 CSS 中的 ID）之间的区别。 您希望能够唯一地将布局中的某些项目（例如标题）识别为可以应用唯一样式的单个可识别项目，而其他项目（例如博客中的条目或网站中的字段）数据库视图）都希望具有相同的样式。
The basic principle is that used by CSS in web pages.
Rather than ever specifying the formatting (colour / font / layout[to some extent]) of your content, you simply describe what kind of content it is.
To give a web example, in the content for a blog page you might mark different sections as being an:
etc.
The Entry might be made of severl subsections such as "heading", "body" and "timestamp".
Then, elsewhere you have a stylesheet which specifies all the properties of each kind of element, size, alignment, colour, background, font etc. When rendering the page or srawing / initialising the componatns in your UI you always consult the current stylesheet to look up these properties.
Then, skinning, and indeed editing your design, becomes MUCH easier. You simple create a different stylesheet and tweak the values to your heat's content.
Edit:
One key point to remember is the distinction between a general style (like classes in CSS) and a specific style (like ID's in CSS). You want to be able to uniquely identify some items in your layout, such as the heading, as being a single identifiable item that you can apply a unique style to, whereas other items (such as an entry in a blog, or a field in a database view) will all want to have the same style.
每个平台/技术都不同。
对于 WPF，请查看 Josh Smith 所说的结构蒙皮：http://www. codeproject.com/KB/WPF/podder2.aspx
It's different for each platform/technology.
For WPF, take a look at what Josh Smith calls structural skinning: http://www.codeproject.com/KB/WPF/podder2.aspx
这应该相对容易，请按照以下步骤操作：
如需了解更多信息，请访问 css zen 花园 获取创意。
This should be relatively easy, follow these steps:
For more information visit css zen garden for ideas.
你不应该。 或者至少你应该问问自己这是否真的是正确的决定。
换肤违反了 UI 设计准则。 它让用户感到“震惊”，因为您的皮肤应用程序的运行方式和外观与他们使用的所有其他应用程序完全不同。 命令快捷键之类的东西将不一致，并且会降低生产力。 它将不太方便残疾人使用，因为屏幕阅读器将很难理解它。
不剥皮的理由有很多。 如果您只是想让您的应用程序在视觉上与众不同，那么在我看来这是一个糟糕的理由。 您将使您的应用程序更难使用，并且人们不太可能超过试用期。
话虽如此，有些类别的应用程序基本上需要换肤，例如媒体播放器和沉浸式全屏游戏。 但是，如果您的应用程序不属于很大程度上强制要求进行换肤的类别，那么我会认真考虑寻找其他方法来使您的应用程序比竞争对手更好。
You shouldn't. Or at least you should ask yourself if it's really the right decision.
Skinning breaks the UI design guidelines. It "jars" the user because your skinned app operates and looks totally different from all the other apps their using. Things like command shortcut keys won't be consistent and they'll lose productivity. It will be less handicapped accessible because screen readers will have a harder time understanding it.
There are a ton of reasons NOT to skin. If you just want to make your application visually distinct, that's a poor reason in my opinion. You will make your app harder to use and less likely that people will ever go beyond the trial period.
Having said all that, there are some classes of apps where skinning is basically expected, such as media players and imersive full screen games. But if your app isn't in a class where skinning is largely mandated, I would seriously consider finding other ways to make your app better than your competition.
根据您希望挖掘的深度，您可以选择使用“格式化”框架（例如 Java 的 PLAF、Web 的 CSS）或完全解耦的多层架构。
如果你想定义一个可插拔的皮肤，你需要从一开始就考虑到这一点。 表示层除了 API 之外对业务逻辑一无所知，反之亦然。
Depending on how deep you wish to dig, you can opt to use a 'formatting' framework (e.g. Java's PLAF, the web's CSS), or an entirely decoupled multiple tier architecture.
If you want to define a pluggable skin, you need to consider that from the very beginning. The presentation layer knows nothing about the business logic but it's API and vice versa.
似乎这里大多数人都提到 CSS，好像它是唯一的换肤选项。
Windows Media Player（以及 Winamp、AFAIR）使用 XML 以及图像（如果需要）来定义皮肤。
XML 引用挂钩、事件等并处理事物的外观和反应。 我不确定他们如何处理后端，但加载给定的皮肤实际上就像找到适当的 XML 文件、加载图像然后将它们放置在需要的位置一样简单。
XML 还使您能够更好地控制您可以执行的操作（即创建新组件、更改组件大小等）。
XML 与 CSS 相结合可以为桌面或 Web 应用程序的换肤引擎带来美妙的结果。
It seems most of the people here refer to CSS, as if its the only skinning option.
Windows Media Player (and Winamp, AFAIR) use XML as well as images (if neccesary) to define a skin.
The XML references hooks, events, etc. and handles how things look and react. I'm not sure about how they handle the back end, but loading a given skin is really as simply as locating the appropriate XML file, loading the images then placing them where they need to go.
XML also gives you far more control over what you can do (i.e. create new components, change component sizes, etc.).
XML combined with CSS could give wonderful results for a skinning engine of a desktop or web application.