feat(volume): add option to sync volume flyout with media flyout

Adds a volume setting to show and hide the volume flyout together with the
media flyout when it is opened from the tray icon or the taskbar widget.

Co-authored-by: Codex <codex@openai.com>

Author: lgc2333

FluentFlyoutWPF/Controls/TaskbarWidgetControl.xaml.cs

@@ -251,7 +251,7 @@ private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
         if (_mainWindow == null) return;
 
         // toggle main flyout when clicked
-        _mainWindow.ShowMediaFlyout(toggleMode: true, forceShow: true);
+        _mainWindow.ShowMediaFlyoutWithVolume(toggleMode: true, forceShow: true);
     }
 
     private void MainBorder_MouseWheel(object sender, MouseWheelEventArgs e)

FluentFlyoutWPF/MainWindow.xaml.cs

@@ -994,6 +994,29 @@ private void ShowVolumeFlyout()
         volumeMixerWindow?.ShowFlyout();
     }
 
+    /// <summary>
+    /// Shows the media flyout, optionally together with the volume flyout when
+    /// "sync with media flyout" is enabled. Used by manual triggers (tray icon, taskbar widget)
+    /// so both flyouts open and close as one.
+    /// </summary>
+    public void ShowMediaFlyoutWithVolume(bool toggleMode = false, bool forceShow = false)
+    {
+        bool shouldShowVolumeFlyoutWithMedia = GetActiveMediaSession() != null
+            && (forceShow || SettingsManager.Current.MediaFlyoutEnabled)
+            && !FullscreenDetector.IsFullscreenApplicationRunning()
+            && SettingsManager.Current.VolumeControlEnabled
+            && SettingsManager.Current.VolumeControlSyncWithMediaFlyout;
+        bool isToggleClose = toggleMode && Visibility == Visibility.Visible && !_isHiding;
+
+        if (shouldShowVolumeFlyoutWithMedia && isToggleClose)
+            volumeMixerWindow?.HideFlyout();
+
+        ShowMediaFlyout(toggleMode, forceShow);
+
+        if (shouldShowVolumeFlyoutWithMedia && !isToggleClose)
+            ShowVolumeFlyout();
+    }
+
     public async void ShowMediaFlyout(bool toggleMode = false, bool forceShow = false)
     {
         var activeSession = GetActiveMediaSession();
@@ -1977,7 +2000,7 @@ private void nIcon_LeftClick(Wpf.Ui.Tray.Controls.NotifyIcon sender, RoutedEvent
             //ThemeService themeService = new ThemeService();
             //themeService.ChangeTheme(MicaWPF.Core.Enums.WindowsTheme.Light);
         }
-        else if (SettingsManager.Current.NIconLeftClick == 1) ShowMediaFlyout();
+        else if (SettingsManager.Current.NIconLeftClick == 1) ShowMediaFlyoutWithVolume();
     }
 
     private Task PauseOtherSessions(MediaSession currentMediaSession)

FluentFlyoutWPF/Pages/VolumeMixerPage.xaml

@@ -71,6 +71,16 @@
                 <ui:ToggleSwitch IsChecked="{Binding VolumeControlAboveMediaFlyout, Mode=TwoWay}" />
             </ui:CardControl>
 
+            <ui:CardControl x:Name="VolumeSyncWithMediaFlyoutTitleCard" Tag="Indexable" Icon="{ui:SymbolIcon ArrowSync24}" Margin="0,0,0,3">
+                <ui:CardControl.Header>
+                    <StackPanel Orientation="Vertical">
+                        <TextBlock Text="{DynamicResource VolumeSyncWithMediaFlyoutTitle}" FontSize="14" FontWeight="Regular" VerticalAlignment="Center" />
+                        <TextBlock Text="{DynamicResource VolumeSyncWithMediaFlyoutDescription}" FontSize="12" Opacity="0.5" />
+                    </StackPanel>
+                </ui:CardControl.Header>
+                <ui:ToggleSwitch IsChecked="{Binding VolumeControlSyncWithMediaFlyout, Mode=TwoWay}" />
+            </ui:CardControl>
+
             <ui:CardControl x:Name="VolumeFlyoutStayDurationTitleCard" Tag="Indexable" Grid.Row="3" Icon="{ui:SymbolIcon Timer24}" Margin="0,0,0,12">
                 <ui:CardControl.Header>
                     <StackPanel Orientation="Vertical">

FluentFlyoutWPF/Resources/Localization/Dictionary-en-US.xaml

@@ -293,4 +293,6 @@ You can help contribute translations on</System:String>
     <System:String x:Key="VolumeMixerHighlightDescription">See which apps are currently outputting audio</System:String>
     <System:String x:Key="MasterVolumeText">Master volume</System:String>
     <System:String x:Key="OpenMediaPlayerText">Open media player</System:String>
+    <System:String x:Key="VolumeSyncWithMediaFlyoutTitle">Always show and hide with Media Flyout</System:String>
+    <System:String x:Key="VolumeSyncWithMediaFlyoutDescription">Show or hide the volume flyout together with the media flyout when opened from the tray icon or taskbar widget.</System:String>
 </ResourceDictionary>

FluentFlyoutWPF/Resources/Localization/Dictionary-zh-CN.xaml

@@ -296,4 +296,7 @@
     <system:String x:Key="OnboardingTitle">快速入门</system:String>
     <system:String x:Key="SupporterTitle">赞助者</system:String>
     <system:String x:Key="SupporterDescription">谢谢你！</system:String>
+    <system:String x:Key="VolumeSyncWithMediaFlyoutTitle">随媒体浮窗显示</system:String>
+    <system:String x:Key="VolumeSyncWithMediaFlyoutDescription" xml:space="preserve">从任务栏小组件唤起或收起媒体浮窗时一同显隐音量浮窗
+如“单击托盘图标时行为”设为“显示媒体浮窗”，触发时音量浮窗也将一同显示</system:String>
 </ResourceDictionary>

FluentFlyoutWPF/ViewModels/UserSettings.cs

@@ -597,6 +597,9 @@ public string TaskbarWidgetScrollingTextSpeedText
     [ObservableProperty]
     public partial bool VolumeControlAboveMediaFlyout { get; set; }
 
+    [ObservableProperty]
+    public partial bool VolumeControlSyncWithMediaFlyout { get; set; }
+
     [ObservableProperty]
     [NotifyPropertyChangedFor(nameof(VolumeControlDurationText))]
     public partial int VolumeControlDuration { get; set; }
@@ -777,6 +780,7 @@ public UserSettings()
         TaskbarVisualizerBaselineAutoHide = false;
         VolumeControlEnabled = false;
         VolumeControlAboveMediaFlyout = false;
+        VolumeControlSyncWithMediaFlyout = false;
         VolumeControlDuration = 3000;
         VolumeMixerEnabled = false;
         VolumeMixerHighlightActiveApps = false;

FluentFlyoutWPF/Windows/VolumeMixerWindow.xaml.cs

@@ -172,6 +172,29 @@ public async void ShowFlyout(bool startExpanded = false)
         }
     }
 
+    /// <summary>
+    /// Hides the flyout immediately, without waiting for the stay duration.
+    /// Used when the volume flyout is synced with the media flyout.
+    /// </summary>
+    public async void HideFlyout()
+    {
+        if (_isHiding)
+            return;
+
+        _cts.Cancel();
+        _mainWindow.CloseAnimation(this);
+        _isHiding = true;
+        _lastFlyoutTime = 0;
+        await Task.Delay(MainWindow.getDuration());
+
+        if (!_isHiding)
+            return;
+
+        WindowHelper.SetVisibility(this, false);
+        ViewModel.IsExpanded = false;
+        _ = Task.Run(() => ShowVolumeOsd());
+    }
+
     private void OnViewModelPropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
     {
         if (e.PropertyName == nameof(VolumeMixerViewModel.IsExpanded))