Use Segoe Fluent Icons on Windows 11

Author: krlvm

MediaFlyout/Extensions/OperatingSystemExtensions.cs

@@ -27,5 +27,10 @@ public static bool IsLessThan(this OperatingSystem os, OSVersions version)
         {
             return os.Version.Build < (int)version;
         }
+
+        public static bool IsWindows11(this OperatingSystem os)
+        {
+            return Environment.OSVersion.IsAtLeast(OSVersions.VER_11_21H2);
+        }
     }
 }

MediaFlyout/Flyout/FlyoutWindow.cs

@@ -44,12 +44,17 @@ public FlyoutWindow()
             Closing += Window_Closing;
             PreviewKeyDown += Window_PreviewKeyDown;
 
-            if (Environment.OSVersion.IsAtLeast(OSVersions.VER_11_21H2))
+            if (Environment.OSVersion.IsWindows11())
             {
                 FontFamily = new FontFamily("Segoe UI Variable Text");
+                Resources["IconFont"] = new FontFamily("Segoe Fluent Icons");
                 Resources["FluentButtonRadius"] = 4;
                 Resources["FluentCornerRadius"] = new CornerRadius(4);
             }
+            else
+            {
+                Resources["IconFont"] = new FontFamily("Segoe MDL2 Assets");
+            }
 
             ThemeHelper.Instance.OnThemeChanged += Theme_ThemeChanged;
             Theme_Update();
@@ -150,7 +155,7 @@ public void Theme_Apply()
             }
 
             User32.AccentFlags flags = User32.AccentFlags.DrawAllBorders;
-            if (Environment.OSVersion.IsLessThan(OSVersions.VER_11_21H2))
+            if (!Environment.OSVersion.IsWindows11())
             {
                 switch (WindowsTaskbar.Current.Side)
                 {

MediaFlyout/MediaFlyoutWindow.xaml.cs

@@ -6,6 +6,7 @@
 using Microsoft.Win32;
 using MediaFlyout.Views;
 using MediaFlyout.Flyout;
+using MediaFlyout.Extensions;
 
 namespace MediaFlyout
 {
@@ -28,6 +29,19 @@ public MediaFlyoutWindow()
             UpdateSessions();
             UpdateStatus();
 
+            if (Environment.OSVersion.IsWindows11())
+            {
+                Resources["ButtonPlaySize"] = 14.0;
+                Resources["ButtonPrev"] = "\uF8AC";
+                Resources["ButtonNext"] = "\uF8AD";
+            }
+            else
+            {
+                Resources["ButtonPlaySize"] = 18.0;
+                Resources["ButtonPrev"] = "\uE892";
+                Resources["ButtonNext"] = "\uE893";
+            }
+
             SystemEvents.PowerModeChanged += OnPowerModeChanged;
         }
 

MediaFlyout/Views/SessionItem.xaml

@@ -48,9 +48,9 @@
             </Grid>
 
             <StackPanel x:Name="ControlsContainer" Grid.Column="2" VerticalAlignment="Center" Height="40" Margin="4,0" HorizontalAlignment="Center" Orientation="Horizontal">
-                <Button x:Name="Previous" Content="&#xE892;" FontFamily="Segoe MDL2 Assets" FontSize="12" Width="40" IsEnabled="{Binding IsPreviousEnabled}" Click="Previous_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" Margin="0,0,2,0" />
-                <Button x:Name="PlayPause" Content="{Binding ToggleButton, FallbackValue=''}" FontFamily="Segoe MDL2 Assets" FontSize="18" Width="40" IsEnabled="{Binding IsPlayPauseEnabled}" Click="PlayPause_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" />
-                <Button x:Name="Next" Content="&#xE893;" FontFamily="Segoe MDL2 Assets" FontSize="12" Width="40" IsEnabled="{Binding IsNextEnabled}" Click="Next_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" Margin="2,0,0,0" />
+                <Button x:Name="Previous" Content="{DynamicResource ButtonPrev}" FontFamily="{DynamicResource IconFont}" FontSize="12" Width="40" IsEnabled="{Binding IsPreviousEnabled}" Click="Previous_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" Margin="0,0,2,0" />
+                <Button x:Name="PlayPause" Content="{Binding ToggleButton, FallbackValue=''}" FontFamily="{DynamicResource IconFont}" FontSize="{DynamicResource ButtonPlaySize}" Width="40" IsEnabled="{Binding IsPlayPauseEnabled}" Click="PlayPause_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" />
+                <Button x:Name="Next" Content="{DynamicResource ButtonNext}" FontFamily="{DynamicResource IconFont}" FontSize="12" Width="40" IsEnabled="{Binding IsNextEnabled}" Click="Next_Click" FocusVisualStyle="{StaticResource FluentFocusVisualStyle}" Margin="2,0,0,0" />
             </StackPanel>
         </Grid>
     </StackPanel>

MediaFlyout/Views/SessionItem.xaml.cs

@@ -1,6 +1,7 @@
 using MediaFlyout.AppInformation;
 using MediaFlyout.Utilities;
 using MediaFlyout.ViewModels;
+using MediaFlyout.Extensions;
 using System;
 using System.IO;
 using System.Windows;
@@ -18,6 +19,9 @@ public partial class SessionItem : UserControl
         private SessionItemViewModel model = new SessionItemViewModel();
         private SourceAppInfo sourceInfo;
 
+        private static readonly string GLYPH_PLAY  = Environment.OSVersion.IsWindows11() ? "\uF5B0" : "\uE768";
+        private static readonly string GLYPH_PAUSE = Environment.OSVersion.IsWindows11() ? "\uF8AE" : "\uE769";
+
         public SessionItem(MediaFlyoutWindow flyout, GlobalSystemMediaTransportControlsSession session)
         {
             InitializeComponent();
@@ -57,7 +61,7 @@ private void UpdateControls()
         {
             if (session == null) return;
             var playback = session.GetPlaybackInfo();
-            model.ToggleButton = IsPlaying(playback) ? "\uE769" : "\uE768";
+            model.ToggleButton = IsPlaying(playback) ? GLYPH_PAUSE : GLYPH_PLAY;
 
             if (playback == null) return;
             model.IsPreviousEnabled = playback.Controls.IsPreviousEnabled;