More tweaks

microsoft · Sep 17, 2024 · 3c44be0 · 3c44be0
1 parent a5b8612
commit 3c44be0
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 53 deletions.
diff --git a/src/modules/cmdpal/WindowsCommandPalette/Converters/ReverseBoolToVisibilityConverter.cs b/src/modules/cmdpal/WindowsCommandPalette/Converters/ReverseBoolToVisibilityConverter.cs
@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+
+namespace WindowsCommandPalette.Converters;
+
+public sealed partial class ReverseBoolToVisibilityConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        return ((bool)value) ? Visibility.Collapsed : Visibility.Visible;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/...ringNotEmptyToVisibilityConverter.xaml.cs → ...ringNotEmptyToVisibilityConverter.xaml.cs b/...ringNotEmptyToVisibilityConverter.xaml.cs → ...ringNotEmptyToVisibilityConverter.xaml.cs
@@ -5,7 +5,7 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Data;
 
-namespace WindowsCommandPalette.Views;
+namespace WindowsCommandPalette.Converters;
 
 public sealed partial class StringNotEmptyToVisibilityConverter : IValueConverter
 {

diff --git a/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml b/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml
@@ -8,11 +8,6 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Closed="MainWindow_Closed"
     mc:Ignorable="d">
-
-    <Window.SystemBackdrop>
-        <DesktopAcrylicBackdrop />
-    </Window.SystemBackdrop>
-
     <Grid x:Name="RootGrid">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />

diff --git a/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml.cs b/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml.cs
@@ -7,6 +7,9 @@
 using Microsoft.CmdPal.Common.Contracts;
 using Microsoft.CmdPal.Common.Extensions;
 using Microsoft.CmdPal.Common.Services;
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Input;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
@@ -19,13 +22,16 @@
 using Windows.Win32.Foundation;
 using Windows.Win32.UI.WindowsAndMessaging;
 using WindowsCommandPalette.Views;
+using WinRT;
 
 namespace WindowsCommandPalette;
 
 /// <summary>
 /// An empty window that can be used on its own or navigated to within a Frame.
 /// </summary>
+#pragma warning disable CA1001 // Types that own disposable fields should be disposable
 public sealed partial class MainWindow : Window
+#pragma warning restore CA1001 // Types that own disposable fields should be disposable
 {
     private readonly AppWindow _appWindow;
 
@@ -73,7 +79,9 @@ public void Summon()
         MainPage.ViewModel.Summon();
     }
 
+#pragma warning disable CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
     public MainWindow()
+#pragma warning restore CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
     {
         InitializeComponent();
         _mainViewModel = MainPage.ViewModel;
@@ -88,7 +96,7 @@ public MainWindow()
 
         Activated += MainWindow_Activated;
         AppTitleBar.SizeChanged += AppTitleBar_SizeChanged;
-
+        SetAcrylic();
         ExtendsContentIntoTitleBar = true;
 
         // Hide our titlebar. We'll make the sides draggable later
@@ -264,8 +272,9 @@ private void MainWindow_Activated(object sender, WindowActivatedEventArgs args)
     {
         if (args.WindowActivationState == WindowActivationState.Deactivated)
         {
-            AppTitleTextBlock.Foreground =
-                (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
+            AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
+
+            _configurationSource.IsInputActive = false;
 
             // If there's a debugger attached...
             if (System.Diagnostics.Debugger.IsAttached)
@@ -280,8 +289,8 @@ private void MainWindow_Activated(object sender, WindowActivatedEventArgs args)
         }
         else
         {
-            AppTitleTextBlock.Foreground =
-                (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            _configurationSource.IsInputActive = true;
         }
     }
 
@@ -391,5 +400,87 @@ private void MainWindow_Closed(object sender, WindowEventArgs args)
         // WinUI bug is causing a crash on shutdown when FailFastOnErrors is set to true (#51773592).
         // Workaround by turning it off before shutdown.
         App.Current.DebugSettings.FailFastOnErrors = false;
+        DisposeAcrylic();
+    }
+
+    private DesktopAcrylicController _acrylicController;
+    private SystemBackdropConfiguration _configurationSource;
+
+    // We want to use DesktopAcrylicKind.Thin and custom colors as this is the default material other Shell surfaces are using, this cannot be set in XAML however.
+    private void SetAcrylic()
+    {
+        if (DesktopAcrylicController.IsSupported())
+        {
+            // Hooking up the policy object.
+            _configurationSource = new SystemBackdropConfiguration();
+
+            ((FrameworkElement)this.Content).ActualThemeChanged += MainWindow_ActualThemeChanged;
+
+            // Initial configuration state.
+            _configurationSource.IsInputActive = true;
+            UpdateAcrylic();
+        }
+    }
+
+    private void UpdateAcrylic()
+    {
+        _acrylicController = GetAcrylicConfig();
+
+        // Enable the system backdrop.
+        // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
+        _acrylicController.AddSystemBackdropTarget(this.As<ICompositionSupportsSystemBackdrop>());
+        _acrylicController.SetSystemBackdropConfiguration(_configurationSource);
+    }
+
+    private DesktopAcrylicController GetAcrylicConfig()
+    {
+        if (((FrameworkElement)this.Content).ActualTheme == ElementTheme.Light)
+        {
+            return new DesktopAcrylicController()
+            {
+                Kind = DesktopAcrylicKind.Thin,
+                TintColor = Windows.UI.Color.FromArgb(255, 243, 243, 243),
+                LuminosityOpacity = 0.90f,
+                TintOpacity = 0.0f,
+                FallbackColor = Windows.UI.Color.FromArgb(255, 238, 238, 238),
+            };
+        }
+        else
+        {
+            return new DesktopAcrylicController()
+            {
+                Kind = DesktopAcrylicKind.Thin,
+                TintColor = Windows.UI.Color.FromArgb(255, 32, 32, 32),
+                LuminosityOpacity = 0.96f,
+                TintOpacity = 0.5f,
+                FallbackColor = Windows.UI.Color.FromArgb(255, 28, 28, 28),
+            };
+        }
+    }
+
+    private void MainWindow_ActualThemeChanged(FrameworkElement sender, object args)
+    {
+        SetConfigurationSourceTheme(sender.ActualTheme);
+        UpdateAcrylic();
+    }
+
+    private void SetConfigurationSourceTheme(ElementTheme theme)
+    {
+        switch (theme)
+        {
+            case ElementTheme.Dark: _configurationSource.Theme = SystemBackdropTheme.Dark; break;
+            case ElementTheme.Light: _configurationSource.Theme = SystemBackdropTheme.Light; break;
+            case ElementTheme.Default: _configurationSource.Theme = SystemBackdropTheme.Default; break;
+        }
+    }
+
+    private void DisposeAcrylic()
+    {
+        if (_acrylicController != null)
+        {
+            _acrylicController.Dispose();
+            _acrylicController = null!;
+            _configurationSource = null!;
+        }
     }
 }
diff --git a/src/modules/cmdpal/WindowsCommandPalette/Views/DetailsControl.xaml b/src/modules/cmdpal/WindowsCommandPalette/Views/DetailsControl.xaml
@@ -3,6 +3,7 @@
     x:Class="WindowsCommandPalette.Views.DetailsControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:WindowsCommandPalette.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -11,7 +12,7 @@
 
     <UserControl.Resources>
         <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
         </ResourceDictionary>
     </UserControl.Resources>
 

diff --git a/src/modules/cmdpal/WindowsCommandPalette/Views/ListPage.xaml b/src/modules/cmdpal/WindowsCommandPalette/Views/ListPage.xaml
@@ -3,6 +3,7 @@
     x:Class="WindowsCommandPalette.Views.ListPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:WindowsCommandPalette.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:devpal="using:WindowsCommandPalette"
     xmlns:local="using:WindowsCommandPalette.Views"
@@ -16,15 +17,14 @@
 
     <Page.Resources>
         <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
-
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:ReverseBoolToVisibilityConverter x:Key="ReverseBoolToVisibilityConverter" />
             <CollectionViewSource x:Name="ItemsCVS" IsSourceGrouped="True" />
             <StackLayout
                 x:Name="HorizontalStackLayout"
                 Orientation="Horizontal"
                 Spacing="8" />
 
-
             <DataTemplate x:Key="TagTemplate" x:DataType="devpal:TagViewModel">
                 <Border
                     Padding="4,2,4,2"
@@ -152,57 +152,66 @@
             <RowDefinition Height="56" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
-            <RowDefinition Height="56" />
+            <RowDefinition Height="Auto" MinHeight="36" />
         </Grid.RowDefinitions>
 
         <!--  Row 0: Back button and search box  -->
         <Grid Grid.Row="0" Margin="-2,0,0,0">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="48" />
+                <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
             <!--  Back button  -->
             <FontIcon
+                Margin="24,0,2,0"
                 HorizontalAlignment="Right"
                 AutomationProperties.AccessibilityView="Raw"
                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                Glyph="&#xE721;" />
+                Glyph="&#xE721;"
+                Visibility="{x:Bind ViewModel.Nested, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}" />
             <Button
                 x:Name="BackButton"
-                Width="24"
-                Height="24"
-                Padding="8"
+                Height="32"
+                Margin="16,4,4,4"
+                Padding="12,0,12,0"
                 HorizontalAlignment="Right"
                 VerticalAlignment="Center"
+                Background="{ThemeResource SubtleFillColorSecondaryBrush}"
+                BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
+                CornerRadius="16"
                 FontSize="16"
                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                 IsEnabled="{x:Bind ViewModel.Nested}"
-                Style="{StaticResource SubtleButtonStyle}"
                 Tapped="BackButton_Tapped"
                 ToolTipService.ToolTip="Back"
-                Visibility="{x:Bind ViewModel.Nested}" />
-            <StackPanel
-                Grid.Column="1"
-                Margin="4,4,20,4"
-                HorizontalAlignment="Left"
-                VerticalAlignment="Center"
-                Orientation="Horizontal"
                 Visibility="{x:Bind ViewModel.Nested}">
-                <!--<BitmapIcon Width="20" Margin="4, 0, 8, 0" ShowAsMonochrome="False" UseLayoutRounding="False" UriSource="{x:Bind ViewModel.Command.IconUri}" HorizontalAlignment="Left"/>-->
+                <StackPanel
+                    Grid.Column="1"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    Orientation="Horizontal"
+                    Spacing="8"
+                    Visibility="{x:Bind ViewModel.Nested}">
+                    <!--<BitmapIcon Width="20" Margin="4, 0, 8, 0" ShowAsMonochrome="False" UseLayoutRounding="False" UriSource="{x:Bind ViewModel.Command.IconUri}" HorizontalAlignment="Left"/>-->
 
-                <ContentControl
-                    Grid.Column="0"
-                    Width="20"
-                    Height="20"
-                    Margin="4,0,8,0"
-                    Content="{x:Bind ViewModel.Command.IcoElement}" />
-                <TextBlock
-                    FontSize="14"
-                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                    Text="{x:Bind ViewModel.Page.Name}" />
-            </StackPanel>
+                    <Viewbox Width="16" Height="16">
+                        <ContentControl VerticalAlignment="Center" Content="{x:Bind ViewModel.Command.IcoElement}" />
+                    </Viewbox>
+
+                    <TextBlock
+                        Margin="0,-2,0,0"
+                        VerticalAlignment="Center"
+                        FontSize="12"
+                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                        Text="{x:Bind ViewModel.Page.Name}" />
+                    <FontIcon
+                        Margin="4,2,0,0"
+                        FontSize="12"
+                        Glyph="&#xE894;" />
+                </StackPanel>
+            </Button>
 
             <!--  Search box  -->
             <TextBox
@@ -217,13 +226,6 @@
                 Style="{StaticResource SearchTextBoxStyle}"
                 TextChanged="FilterBox_TextChanged" />
         </Grid>
-
-        <!--  Extension name after clicking on a command  -->
-
-
-        <!--  List of commands  -->
-
-
         <Grid
             Grid.Row="2"
             Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
@@ -271,14 +273,15 @@
                 Grid.Column="1"
                 Margin="12"
                 Padding="8"
-                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-                CornerRadius="8"
+                BorderThickness="1"
+                CornerRadius="{ThemeResource OverlayCornerRadius}"
                 Visibility="Collapsed" />
         </Grid>
 
         <!--  Footer  -->
-        <Grid Grid.Row="3" Padding="8,0,12,0">
+        <Grid Grid.Row="3" Padding="8,0,8,0">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="*" />
@@ -287,7 +290,7 @@
 
             <StackPanel
                 Margin="12,0,0,0"
-                Padding="4,2,4,2"
+                Padding="6,2,4,3"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Center"
                 BorderBrush="{ThemeResource ControlStrokeColorSecondaryBrush}"
@@ -311,7 +314,10 @@
             <SplitButton
                 x:Name="MoreCommandsButton"
                 Grid.Column="2"
+                Margin="0,-2,0,0"
+                VerticalAlignment="Center"
                 Content="Actions"
+                FontSize="12"
                 Visibility="{x:Bind MoreCommandsAvailable, Mode=OneWay}">
                 <SplitButton.Flyout>
                     <Flyout Placement="TopEdgeAlignedRight">