Devices - Added input identification

UI - Tweaked style and enabled Mica on Windows 11

src/Artemis.UI.Shared/ReactiveCoreWindow.cs

@@ -1,7 +1,12 @@
 using System;
+using System.Runtime.InteropServices;
 using Avalonia;
 using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Media.Immutable;
+using FluentAvalonia.Styling;
 using FluentAvalonia.UI.Controls;
+using FluentAvalonia.UI.Media;
 using ReactiveUI;
 
 namespace Artemis.UI.Shared
@@ -30,20 +35,6 @@ namespace Artemis.UI.Shared
             this.GetObservable(ViewModelProperty).Subscribe(OnViewModelChanged);
         }
 
-        private void OnDataContextChanged(object? value)
-        {
-            if (value is TViewModel viewModel)
-                ViewModel = viewModel;
-            else
-                ViewModel = null;
-        }
-
-        private void OnViewModelChanged(object? value)
-        {
-            if (value == null)
-                ClearValue(DataContextProperty);
-            else if (DataContext != value) DataContext = value;
-        }
 
         /// <summary>
         ///     The ViewModel.
@@ -59,5 +50,64 @@ namespace Artemis.UI.Shared
             get => ViewModel;
             set => ViewModel = (TViewModel?) value;
         }
+
+        /// <inheritdoc />
+        protected override void OnOpened(EventArgs e)
+        {
+            base.OnOpened(e);
+
+            // Enable Mica on Windows 11
+            FluentAvaloniaTheme? thm = AvaloniaLocator.Current.GetService<FluentAvaloniaTheme>();
+            if (thm != null && RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
+            {
+                // TODO: add Windows version to CoreWindow
+                if (IsWindows11 && thm.RequestedTheme != FluentAvaloniaTheme.HighContrastModeString)
+                {
+                    TransparencyBackgroundFallback = Brushes.Transparent;
+                    TransparencyLevelHint = WindowTransparencyLevel.Mica;
+                
+                    TryEnableMicaEffect(thm);
+                }
+            }
+        }
+
+        private void OnDataContextChanged(object? value)
+        {
+            if (value is TViewModel viewModel)
+                ViewModel = viewModel;
+            else
+                ViewModel = null;
+        }
+
+        private void OnViewModelChanged(object? value)
+        {
+            if (value == null)
+                ClearValue(DataContextProperty);
+            else if (DataContext != value) DataContext = value;
+        }
+
+        private void TryEnableMicaEffect(FluentAvaloniaTheme thm)
+        {
+            // The background colors for the Mica brush are still based around SolidBackgroundFillColorBase resource
+            // BUT since we can't control the actual Mica brush color, we have to use the window background to create
+            // the same effect. However, we can't use SolidBackgroundFillColorBase directly since its opaque, and if
+            // we set the opacity the color become lighter than we want. So we take the normal color, darken it and 
+            // apply the opacity until we get the roughly the correct color
+            // NOTE that the effect still doesn't look right, but it suffices. Ideally we need access to the Mica
+            // CompositionBrush to properly change the color but I don't know if we can do that or not
+            if (thm.RequestedTheme == FluentAvaloniaTheme.DarkModeString)
+            {
+                Color2 color = this.TryFindResource("SolidBackgroundFillColorBase", out object? value) ? (Color) value : new Color2(32, 32, 32);
+                color = color.LightenPercent(-0.8f);
+                Background = new ImmutableSolidColorBrush(color, 0.78);
+            }
+            else if (thm.RequestedTheme == FluentAvaloniaTheme.LightModeString)
+            {
+                // Similar effect here
+                Color2 color = this.TryFindResource("SolidBackgroundFillColorBase", out object? value) ? (Color) value : new Color2(243, 243, 243);
+                color = color.LightenPercent(0.5f);
+                Background = new ImmutableSolidColorBrush(color, 0.9);
+            }
+        }
     }
 }

src/Artemis.UI.Shared/Styles/Artemis.axaml

@@ -32,14 +32,14 @@
     <StyleInclude Source="/Styles/NumberBox.axaml" />
     <StyleInclude Source="/Styles/TreeView.axaml" />
 
-    <Style Selector="Window:windows:windows10 /template/ Border#RootBorder">
-        <!-- This will show if custom accent color setting is used in Settings page-->
-        <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />
-        <Setter Property="BorderThickness" Value="0 1 0 0" />
-    </Style>
-
-    <Style Selector="Window[IsActive=False]:windows:windows10 /template/ Border#RootBorder">
-        <Setter Property="BorderBrush" Value="#3d3d3d" />
-        <Setter Property="BorderThickness" Value="0 1 0 0" />
-    </Style>
+    <!-- <Style Selector="Window:windows:windows10 /template/ Border#RootBorder"> -->
+    <!--     ~1~ This will show if custom accent color setting is used in Settings page@1@ -->
+    <!--     <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" /> -->
+    <!--     <Setter Property="BorderThickness" Value="0 1 0 0" /> -->
+    <!-- </Style> -->
+    <!-- -->
+    <!-- <Style Selector="Window[IsActive=False]:windows:windows10 /template/ Border#RootBorder"> -->
+    <!--     <Setter Property="BorderBrush" Value="#3d3d3d" /> -->
+    <!--     <Setter Property="BorderThickness" Value="0 1 0 0" /> -->
+    <!-- </Style> -->
 </Styles>

src/Artemis.UI.Shared/Styles/Border.axaml

@@ -21,7 +21,7 @@
 
     <!-- Add Styles Here -->
     <Style Selector="Border.router-container">
-        <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorTertiary}" />
+        <Setter Property="Background" Value="{DynamicResource ControlFillColorDefaultBrush}" />
         <Setter Property="BorderBrush" Value="{DynamicResource CardStrokeColorDefaultBrush}" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="CornerRadius" Value="8 0 0 0" />