modernflyouts-community/modernflyouts

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

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

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

Overview 👀

Default Flyout | ModernFlyouts

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.

Please check out this document for support regarding your media player/browser.

---

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

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

• NAudio
• ModernWpf (Inspired the name ModernFlyouts)
• Hardcodet.NotifyIcon.Wpf

---

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.

modernflyouts's Issues

System panels do not work after uninstalling the application.

Just got a very vague and worrying review on MS Store "System panels do not work after uninstalling the application."
Have asked the user to provide more information.

Add Animation when changing the slider

Hi,
First of all, this is an Amazing App!! But, when I change the volume of the device using my keyboard, the transition is quite staccato: There is no transition between the position of the slider. It would be amazing if you could add a sliding keyframe animation in between the two positions. For reference, this is a video of the slider progressing:
https://we.tl/t-39YRFW1cMb
I know this isn't a very good description, but I tried my best.

Settings window doesn't remember size and position

Monochrome tray icon

@ShankarBUS, can we use a monochrome color tray icon for the system tray? It would look better and feel consistent with other system tray icons.

Due to being colored, the icon is not properly visible. We can keep the start menu icon colored but the tray icon be monochrome.
Have a look at the QuickLook icon in the pic above.

clr_exception_system.overflowexception_80131516_modernflyouts.exe!unknown

Microsoft Partner centre app analytics has revealed that this is the second most common bug:
clr_exception_system.overflowexception_80131516_modernflyouts.exe!unknown
stackTrace.txt
Bug occurred on OS build: 10.0.19041.508

@ShankarBUS Any ideas what might be causing this?

ModernFlyouts stopped working.

When trying to reduce volume through keyboard shortcut, the app crashed.

I got this from reliability monitor -

Recommended behaviour modification when no audio output device is connected

When no audio output device is connected, and the volume is muted or changed via keys ModernFlyouts displays the last volume before device was unplugged, which doesn't change if the increase/ decrease or mute keys are pressed.
If the user doesn't realise the speaker has disconnected, it makes it seem like ModernFlyouts has frozen.

It may be better if this behaviour is modified so when no audio device is connected and the volume keys are pressed, the flyout displays "No connected Audio device" or something similar.

Transition animations

Hey, can you add some nice transition animations between tracks? And sometimes it flickers when I change songs, at least for Spotify, didn't test anything else.

Explanation / clarification for run at startup behaviour option

Inform user that the run at startup setting only triggers opening of settings app - does not affect weather Modern Flyouts will be applied after computer is restarted.

i think it is currently a bit ambiguous, and some users may turn it on, believing it necessary for the app to work after reboot

Enable smooth scroll in Settings app

Please enable smooth scrolling in the settings app of Modern-Flyouts. Currently, its jaggy and not smooth. Or you can redesign it to reduce the need for scrolling.

Bug: Volume slider is not shown

Have recently noticed that after a while modern flyouts does not show volume slider as volume is being changed via keys. Just displays the second popup with what is playing.

Small request - Change the animation of LockKeys flyout

The animation of LockKeys flyout is different from flyouts of Sound and Brightness. While Sound and Brightness flyouts come into view by fading in from top, while LockKeys come in by fading in from bottom. Can you please change this animation? It might be a small fix. Or did you intend it to be that way?

Feature: Ability to hide/ disable the media control widget

The user may want the media widget not to be displayed so that the flyout is less intrusive and takes up less space. I think the ability to disable it would be nice.

Settings UI bugging out

Sometimes Settings UI just freezes upon opening.

Bug: App not running at startup (Store app only)

Although the settings option is enabled, the app isn't running on startup. It neither shows up in the Task Manager Start tab nor in the Run registry key.

App Version : 0.3.0 (Microsoft Store)
OS Version: 19041.450

Double tap on tray icon opens blank window

When we double tap on app's tray icon, it opens a blank settings window which is completely unresponsive. Please fix this.

Trying to delete the "comma" in flyout postion crashes the app

When trying to change the coordinates, when trying to delete the comma with a backspace, it crashes the app.

It would be better to either fix this issue or create separate boxes for the same.

Option to change the duration of flyout being visible

Please add a feature to be able to change the duration for which the flyout appears after summoning it.

Proposal: Explore future migration to WinUI

Will allow additional features such as acrylic.

Microsoft Store

Thank you so much for the great app.
The only improvement i can think of is to allow the app to keep its self up to date. This could be done either by including a Built in updater, or the better solution might be to distribute as a MISX package and upload it to the store.

Show which app is playing media in the audio flyout

Looks like there's a perfect gap for it! :p

i have no idea if its possible but would be really neat :D

"Dark-grey" out unavailable options in media flyout

Many a times, features like shuffle, repeat, stop, etc. are not available for an app. In that case, I would request you to please change the color of disabled options to be a different and look more dark-greyish.

In this, the options for next and previous are not available. But they look almost same to play/pause button.

Please fix this.

Change images in ReadMe

Hi, I have a request to merge many of the images in the ReadMe.md file to stay less cluttered.
For example, images of Aeroplane mode with/without TopBar can be merged.

It could result to be more clean.

And also, the images in MS Store are not updated to the current one and still have the old pictures. Do update them.

Feature: Flyout for function key enabled / disabled

Playback status not updating properly.

Whenever I am playing some music, the playback status comes properly in system volume flyout, but not for Modern Flyouts. It sometimes hangs on the same thing and does not update. Relaunching fixes this issue but I have to adjust the flyout position again and again to my likes.

Please see to it.

Is there a way to setup keyboard shortcuts for volume and brightness?

I'm using windows and i just realised there are no default volume/brightness flyouts for desktop, which is weird, i thought it'd be the same as in laptops, but i couldn't find the shortcut to activate them anywhere. so i was wondering if there was a way to set up something like this.

Proposal|Question: Use JumpList instead of Tray/Notification Area Icon?

We are currently using the Tray/Notification Area Icon as a place to interact with the apps settings or to terminate it.

The Tray/Notification Area has been there since the initial stages of Windows OS and were a great way for background apps to interact with users without any additional windows opening.

But they are now considered as obsolete or old tech and UWP apps are already using different APIs to compete with the tray icon (such as JumpList, live tiles and toast notifications & etc.)

Since by plan we are eventually moving to MSIX, it will be an opportunity for us to do the same "Modern methods" that UWP apps do.

For context :

Current method using tray icon for hosting the menu

MS Edge Dev's context menu containing jump list tasks for opening new windows

This issue is not only a proposal but a question for users about what they think. And to travel the path which they favour.

Also the Tray/Notification Area won't be visible in Tablet mode. So the proposed method will be a modern and viable alternative.

There are still some issues surrounding this topic :
Proposal: Have WinUI Desktop support the UWP Jumplist API
Proposal: System tray icon for WinUI 3 Desktop (Win32 and .NET Core)

Bug when opening settings

When opening settings by right-clicking on notification icon and selecting Settings, sometimes the page opens like this -

And there is no animation on even the minimize, close button when hovered by mouse. Please see to this issue.

Add support for Dopamine music player for Windows

Please add support for stop, repeat, shuffle, timeline info for the app Dopamine music player.

Link - https://github.com/digimezzo/dopamine-windows

Proper installer

Title.

Cant build MSIX package for non x86

Sems like one of the new dependencies only targets x86.
Causing error:
There was a mismatch between the processor architecture of the project being built "MSIL" and the processor architecture of the reference

Clicking on playing music should open app

Clicking on the album art or name of the currently playing song should open up the app where the music is playing. I use this feature all the time with the regular Windows flyout, so having this be reimplemented if possible would be appreciated.

Feature: Acrylic sidebar and reveal effect for settings app

I think this would look great, similar to the sidebar in the windows 10 settings app.
Obviously low priority.

Accent color in flyout doesn't change with system accent color.

Restarting fixes the issue.

The Window's default flyout and ModernFlyouts are appearing simultaneously sometimes.

I have noticed several times that both the systemflyout and modernflyout is appearing together sometimes.

Please see to this issue.

Store Images

We need better images for MS Store:

The images need to have the labels in the image and preferably show windows original vs Modern flyouts.

There can only be 10 screenshots with the following requirements:

• 1366 x 768 pixels or larger recommended
• Supports 4K images (3840 x 2160)
• Max upload 10 files
• Landscape or portrait
• Accepted file types: .png
• Less than 50 MB

Additionally there are other features the store allows which i haven't used yet but we can decide to make:

Banner for store page (which they call superhero art):
Requirements:
16:9 Super hero art appears at the top of your Store listing (or after any trailers finish playing) for customers on Windows 10, version 1607 or later (which includes Xbox). Learn more
Must not include the product's title
Required if you want one of your trailers to appear at the top of the Store listing
Accepted file types: .png
Less than 50 MB

A Trailer:
Requirements:
Trailers are only shown to customers on Windows 10, version 1607 or later (including Xbox)
Max upload 15 trailers
Each trailer must include one video, a title and a thumbnail
Video file types: .mp4 (recommended), .mov
Thumbnail files must be .png files, 1920 x1080 pixels
Title character limit: 255
Do not include IARC age rating info
Learn more about trailer requirements

Grey out the volume bar when muted.

When the volume is muted through keyboard shortcut, it only shows the leftmost icon as muted.
Instead, we can grey out the volume bar and number but not the dragger to make it look different from when not muted. It would help in visiblity.

Proposal: Make the flyout remember the last position

Currently the flyout doesn't remember the position which the users set after a restart, it resets to default position instead.

[Suggestion] Add flyout Lock-keys button "Insert"

I think everyone understands me

Move thumbnail to left of media flyout

This is a pre-emptive request, but I believe that Microsoft will move the cover/album art image/thumbnail to the left as Google has done this on Android and will soon do so on Chrome, and therefore Edge.

random rant that you shouldn't read

it's funny that chrome's global media controls (GMC) get updated more frequently than windows' system media transport controls (SMTC).
the GMC goes unchanged in edge too and yet only edge has a bug where the icon of a button doesn't change until you move your cursor away from it. lol.
still can't seek in the GMC or SMTC >:(
i really think google just saw ios and thought "ooh nice", especially with the "seamless media transfer"

Add transparency to flyouts

The native "flyouts"/pop-ups in Windows 10 are a bit transparent and I've come to miss that using ModernFlyouts.

Bug: ModernFlyouts gets hidden behind other topmost windows and not shown in Lockscreen

@TharukaN97,

When i use volume up/down , Brightness up/down when watching video in Fullscreen or While playing a game in Fullscreen, Modern Flyouts overlay not appearing top of full screen video / game.

@Sebastian1896,

When the Start Menu is present the flyout gets lost behind. The windows default one is always on top in any moment.

@validatedev,

I cannot see any popup for brightness, caps lock, etc. while the Windows lock screen is activated.

Start menu app Jumplist menu not working.

I tried right-clicking on the ModerFlyouts app icon (MS-Store version) and choosing Settings. I get the workingin background cursor but nothing opens. Opening settings through tray icon works. Please fix this.

Bug: Audio flyout is not shown when the volume is changed through means other than media keys

Description of the bug :

The audio part of ModernFlyouts is not shown/triggered when the volume is changed through a knob/dial in a USB speaker or headphones (wireless or wired), it will only shown the corresponding media keys are pressed. The old flyout is shown in that case.

Expected Behavior :
The audio part of ModernFlyouts should be shown when the volume is also changed through means other than media keys

Additional context
Source - reddit comments :

1. "... One odd thing, if I use the volume keys on my keyboard, I get your volume control, but if I use the knob on my USB speaker I get the regular Windows one." - u/Froggypwns : source

2. "Same here with my Surface Headphones dial. The modern flyout shows up with the keys, but not with the dial on my headphones. ..." - u/RealTeesh2257 : source

Bug: Media Sessions are not updating in Windows 10 2004

Description of the bug :

Starting from Windows 10 2004 the GlobalSystemMediaTransportControlsSessionManager is broken and the GlobalSystemMediaTransportControlsSessionManager.SessionsChanged event is not firing properly.

Meaning that the session controls won't be upated whenever an app opens/closes (e.g. Test yourself with Groove Music) & etc.
This makes the session controls (which is a very important feature of this app) useless. But the built-in flyout works somehow.

Source :
Manual verification and from our collaborator @ADeltaX (in ADeltaX/AudioFlyout#12)

Also I heard that GSMTC as WinRT api is broken in 19041.x (doesn't get notified when an app closes SMTC (e.g. when you close Groove Music))

Current Workaround :

Restarting the app updates the sessions (won't update again we have to restart again to update).

Expected behaviour :

The app updates itself whenever the GSMTC sessions are updated.

Proposed method :

If can't provide any programmatic fix, at-least provide an update button to refresh them manually. Instead of forcing users to restart the app and making things complex.

Media control widget suggestions

HI. I just built new version from sources and it looks great! But you made a single media control widget with switches. Should we expect an option to switch between old and new variation in future versions? IMO the old one was quite handy when you have a lot of screen space

Also, it might be reasonable to hide a three dots button when additional player options are not available.

Migration to .NET 5.0

We are currently targeting .NET Framework 4.6.2 and .NET Core 3.1

It would be simpler and faster to just use one framework/runtime, i.e. .NET 5. It seems to be a better solution.

What do you think? @ShankarBUS

Feature request: Remember flyout position from previous run

I changed the flyout position for it to be more close to the border, but every time I close and open the app again it returns to the default position. So it would be great to have a feature to remember our preferred position.

Feature: Support for other languages

I want help to translate

Making the scroll arrow button scroll a full card

Hello, would you be able to make the scroll arrow buttons scroll exactly 1 player card? Right now they scroll like 1/5th of the card and it's not of much use other than visual help.
I know you can scroll with the mouse but because the UI is there sometimes it's just instinct to click the arrow.

Thank you, really loving this app.