用户界面设计的新思路

软件开发过程中,用户界面的设计往往是一个挑战。对于非图形设计师来说,要创造出既美观又实用的界面尤为困难。本文将探讨一种新的方法,旨在将用户界面设计从业务逻辑中分离出来,以便更有效地开发出既美观又实用的应用程序。

在开发OpenHTPC项目时,一直在思考如何让应用程序看起来更加炫酷。由于不是图形设计师,知道自己永远不可能设计出真正“酷”的图形。这引发了一个有趣的老问题:是否有办法完全将图形用户界面的设计从业务逻辑的设计中分离出来?

作为一个自信的软件架构师,认为可以更好地完成这项工作。最终,设计了这个名为OpenTheme的项目。在这个项目中,尝试了一些新技术,并最终有机会在这个项目中表达对软件设计和实现的看法。

使用教程

目前,这仍然是一个初步的Alpha版本。因此,一些设计仍然可能会发生变化。要理解这个设计,最好的方法是从用户的角度阅读教程

但是,这个版本已经足够稳定。可以使用ThemeEditor来设计整个ThemePack。在代码中,只需使用以下代码即可加载ThemePack。

public ThemePack LoadThemePack(string fileName) { ThemePack tp = ThemePack.FromXml(fileName, null); return tp; }

以下是遍历ThemePack中包含的主题的示例:

foreach (Theme curTheme in tp) { // 处理每个主题 }

以下是从主题中获取顶级页面的示例:

ThemeObject themeObj = curTheme.GetThemeObject(ID);

以下是使用Graphics绘制ThemeObject的示例:

themeObj.SetBounds(...); themeObj.RecalculateLayout(g); themeObj.Invalidate(g);

有趣的点

一个主题是一系列具有布局管理器的分层图形(带有alpha透明度)。系统提供了一组“原子”组件,如图像(OpenThemePictureBox)、文本(OpenThemeTextBox)、颜色块(OpenThemeColorBox)。这些组件可以在其边界内包含子组件。子组件可能包含其他子组件。

系统还提供了一些更复杂的组件,这些组件具有自定义代码来确定其子组件的边界,以实现更复杂的布局管理。这些被称为“容器”组件。

程序员可以轻松实现自己的“原子”组件和“容器”组件。例如,系统提供了一个按钮组件,以支持具有绝对任意用户设计的外观和感觉的按钮。以下是该按钮在不同状态下的外观和感觉:

  • 禁用
  • 启用
  • 活动
  • 聚焦
  • 切换

另一个例子是水平滚动条。逻辑已经完成,可以定义任何流行的组件(如按钮、单选按钮、滚动条、菜单等),并具有完全用户定义的外观和感觉,适用于全屏或窗口化应用程序。

该系统非常轻量级。核心部分只有2000多行代码,并且仅依赖于一些非常基本的GDI+函数和XML库。它甚至不依赖于Windows Forms类。预计它将很快被移植到Linux平台和.Net Compact Framework,几乎不需要或不需要任何修改。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485