MIT License

技术解读

以下内容由 GitRead 中文社区 编辑团队基于项目 README 与官方资料整理, 结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

ModernFlyouts 开源项目技术深度剖析

项目背景与痛点

ModernFlyouts 是一个基于 Fluent Design 的替换方案,用以取代 Windows 上原有的 Metro 设计风格的飞出菜单(Flyouts)。在现有的 Windows 设计体系中,Metro 风格的 UI 虽然简洁,但在视觉效果和交互反馈上已经显得略显过时。ModernFlyouts 无疑解决了这一痛点,通过全新的 Fluent Design 方案,为 Windows 系统带来了更加现代化、流畅且一致的用户界面体验。

ModernFlyouts 主要针对那些希望提升系统界面现代感,但又不想全面更换系统界面的用户。这些用户可能已经习惯了 Windows 的操作习惯,但对现有的界面质感和动效并不满意。ModernFlyouts 提供了一种低成本、低风险的方案,用户可以通过简单的安装来享受更为现代的设计体验,同时也无需担心与系统的其他部分产生兼容性问题。

核心技术揭秘

ModernFlyouts 的实现主要依赖于以下关键技术栈和设计模式:

  • WPF (Windows Presentation Framework): ModernFlyouts 采用 WPF 框架进行构建,这为开发复杂且动态的用户界面提供了良好的支持。
  • Fluent Design: 作为 ModernFlyouts 的核心设计理念,Fluent Design 具有柔和的边缘、下沉色差效果、渐变阴影、基于透明的界面、运动中的景深等设计元素,为用户界面带来更丰富的视觉层次和动效体验。
  • 自定义控件: 为了实现高复杂度的用户界面效果,ModernFlyouts 需要大量的自定义控件支持。这包括但不限于 Flyouts(飞出菜单)、Toast Notifications(通知弹窗)、以及其他设计规范中描述的元素。

为了更好地理解 ModernFlyouts 的技术架构,下图展示了一个简化的数据流图,帮助我们了解数据和操作在各组件之间的流动:

graph TD A[用户交互] --> B[事件处理] B -->|"处理消息"| C[控件逻辑] C -->|"更新界面"| D[UI 渲染] D -->|"反馈用户"| E[视觉效果]

其中:

  • 用户交互(A)触发事件处理(B),事件处理包括消息的解析和路由。
  • 控件逻辑(C)根据事件处理结果更新系统的状态。
  • UI 渲染(D)依据当前状态进行布局和视觉呈现。
  • 视觉效果(E)最终反馈给用户。

ModernFlyouts 的实现复杂性主要在于如何在 WPF 中实现 Fluent Design 的无缝整合。这包括了材质渲染、动态阴影、光照效果和真实的物理动画等细节,需要对 WPF 的渲染管道有深入理解。

功能亮点与差异

ModernFlyouts 的最大亮点在于它对于 Fluent Design 的极致追求。它不仅保留了 WPF 的所有功能和易用性,还拉高了 Windows 界面的视觉标准。尽管市面上有其他类似的 Fluent Design 应用,但 ModernFlyouts 在实现细节和用户体验上具有不错的表现。此外,ModernFlyouts 拥有强大的社区支持,这意味着开发者可以轻松扩展和定制它,以适应自身项目的需求。

应用场景与落地建议

ModernFlyouts 适用于那些希望给 Windows 界面带来更多现代化元素的个人用户或企业项目。它特别适合那些需要给传统应用带来视觉冲击力,同时又不想重新编写整个应用的场景。

在实际生产环境使用 ModernFlyouts 时,需要注意以下几点:

  • 稳定性: 虽然开源项目往往能在社区的帮助下处理大多数问题,但仍需要定期监测以确保没有安全漏洞或兼容性问题出现。
  • 扩展性: 可通过扩展自定义控件或修改现有实现来满足特定业务需求,但这也意味着需要对 WPF 和 Fluent Design 深入了解。
  • 性能: 在某些低端设备上,复杂的动画和视觉特效可能会影响系统性能,从而影响使用体验,建议在部署前进行性能测试。

综合评价

优点

  • 紧跟最新设计趋势: ModernFlyouts 采用了 Fluent Design 等前瞻设计风格,为用户带来前沿的视觉体验。
  • 社区驱动: 由于项目是开源且活跃的社区支持,用户可以找到丰富的定制和扩展功能。
  • 现代感强烈: 它完全重塑了 Winfolk 的视觉表现,适用于那些希望增强用户界面现代感的应用。

缺点

  • 复杂性: 作为一款基于 WPF 的 Fluent Design 控件库,它的学习成本相对较高,需要对底层框架有一定的把握。
  • 性能问题: 复杂的视觉动画在一些配置较低的机器上可能会表现不佳,影响系统的整体流畅性。
  • 兼容性: 某些情况下,ModernFlyouts 的自定义控件可能会与系统其他部分产生兼容性问题,需要注意测试和调试。

总体来看,ModernFlyouts 是一款非常强大的替换方案,适用于那些希望提升 Windows 系统界面现代感的开发者和设计师。通过深入理解和灵活运用,可以在现代 UI 布局中获得不错的效果。

关于

GitHub 原始描述(英文)

A modern Fluent Design replacement for the old Metro themed flyouts present in Windows.

描述取自 GitHub 官方 API,保持仓库作者书写的原文。

简要分析

热度分
4456
价值分
2459
活跃状态
归档

语言占比

C
C#
C++

Release

README

ModernFlyouts

An open source, modern, Fluent Design-based set of flyouts for Windows.

Microsoft Store Github All Releases GitHub release Telegram Discord

Overview • Features • System Requirements • Installation • Connect with us • Contributing • Screenshots

Overview 👀

Default Flyout | ModernFlyouts

Overview

This application aims to provide a Fluent Design System based replacement for the old, built-in, Metro Design based Audio/Airplane mode/Brightness flyouts in Windows (which haven’t been updated since Windows 8) which are shown while pressing the media or volume keys or even the brightness keys (may be absent on Desktop PCs) or when airplane/flight mode is toggled.

In case of Windows 11, this application will have the same UI but will provide additional features and customizability compared to the built-in redesigned flyouts.

This project has its roots in the app AudioFlyout by ADeltaX. With additional implementations for “Airplane mode”, “Brightness” and “LockKeys” (includes Insert key, Caps, Num & Scroll lock keys) flyouts, this project stands as a complete replacement for the built-in flyouts.

Note : The built-in flyout will not be permanently affected. It will be hidden temporarily while this application is running. So, no reason to fear breaking your system. For more information on how to recover the original flyouts, check out this How To page.

Users are provided the freedom to choose between the Windows built-in flyouts or modern flyouts from ModernFlyouts or neither of them.

It is impossible to have a flyout for the keyboard backlight brightness or the function (Fn) key because they are not passed as keys but as hardware signals (which the OEMs decide). Any OS can receive those signals if they have the required driver.

Please check out the Wiki for additional information, guides and how-tos.


Features ✨

  • Fluent Design based UI.
  • Supports Light and Dark mode.
  • Redesigned Volume + Media, Brightness and Airplane mode flyouts.
  • Media Controls have support for (not all app support the whole feature set. More on this)
    • Shuffle,
    • Repeat,
    • Stop
    • and Timeline Info.
  • Additional flyouts Lock keys and Insert/Overtype.
  • Each module can be disabled individually.
  • Fully customizable layout settings, i.e.
    • Auto or Manual Placement mode,
    • Flyout Alignment,
    • Flyout content stacking direction.
  • Flyout’s TopBar can be pinned, unpinned or hidden.
  • Flyout is Draggable and autosaves the position. It also has feature for default position. (Check out the settings)
  • Supports multi-monitor setup and users can select which monitor to show the flyout on.
  • Smooth Animations & Transitions.
  • Opacity of the background of flyouts can be changed.
  • Timeout of flyouts is customizable.

System Requirements 🖥️

  • Windows 11
  • Windows 10 1809 and above

older versions such as v0.3 and below support Windows 10 1803 downlevel till Windows 8, however v0.4 and above won’t.


Installation ⬇️

Modern Flyouts is available for you to install via Microsoft Store, GitHub, winget and Chocolatey.

All the distribution methods mentioned above are supported, however installing the app from the Microsoft Store is recommended as it is easier to install and will automatically remain up to date.

Microsoft Store

Microsoft Store

GitHub

  1. Go to the latest release on the Releases page.
  2. Download the latest *.msixbundle file and the [latest available] .cer file from the assets.
  3. Install the certificate into the Trusted People directory.
  4. Install the downloaded *.msixbundle file and launch the app from the Start Menu.

winget

please note that due to how winget processes package updates, updates may take longer to be released to winget.

winget install --id=ModernFlyouts.ModernFlyouts -e

Chocolatey

ModernFlyouts is unofficially available to install via Chocolatey here, however as this is not maintained by us we can not verify its security or its update status.


Connect with us 🌐

You can join our Discord Server or Telegram Group to connect with us. By doing so, we can have off-topic conversations, news about this app, development previews and providing & collecting feedback.


Contributing 🤝

This project welcomes all types of contributions such help planning, design, documentation, finding bugs are ways everyone can help on top of coding features/bug fixes. We are excited to work with the community to make this project reach its goals and beyond.

We ask that before you start to work on a feature/bug fix that you would like to see happen, please read the Contributor’s Guide. We will be happy to work with you to figure out the best approach, provide guidance and mentorship throughout the feature development, and help avoid any wasted or duplicate effort.

For guidance on developing for ModernFlyouts, please read the developer guide for a detailed breakdown. This includes how to setup your computer to build and run the app.


NOTES 🗒️

Credits

First of all, we must thank our good friend ADeltaX for one of his marvelous works AudioFlyout. Since the project was stale for a while and it lacked support for brightness and airplane mode flyouts, this project was born. He not only let us use his source code but also helped us improve this app. And he still supports us 😄. I must admit that this project wouldn’t be here how it is without ADeltaX. Our heartful thanks to him ❤.

We must also say a big thanks to our contributors for helping us with some important bug fixes, adding features and localization.

Our Team

  • ShankarBUS - Ex-Maintainer/co-owner & Developer.
  • ADeltaX - Developer of innovative solutions to circumvent microsoft rubbish
  • FireCubeStudios - Developer/Maintainer.
  • Samuel12321 - Maintainer/co-owner of this repository and application publisher (including Microsoft Store).
  • PrakharB5 - Repository Maintainer.

Dependencies and References


Beta Builds 🚧

The ability to signup for beta builds has been temporarily disabled while we work on a better way to release and manage them. Beta builds will still occasionally be available to download fron the releases tab on github. Thank to everyone who help us test new releases and find bugs before they go public.


Screenshots 📷

Screenshots are temporarily removed 😅. They will be restored during v1.0 release cycle.

评论

暂无评论