More tweaks

2026-01-11 14:56:48 +01:00 · 2024-09-17 16:56:15 +02:00
parent a5b861280f
commit 3c44be0648
7 changed files with 169 additions and 53 deletions
--- 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();
+    }
+}
--- a/src/modules/cmdpal/WindowsCommandPalette/Converters/StringNotEmptyToVisibilityConverter.xaml.cs
+++ b/src/modules/cmdpal/WindowsCommandPalette/Converters/StringNotEmptyToVisibilityConverter.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
 {
--- 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" />
--- a/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml.cs
+++ b/src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml.cs
@@ -7,6 +7,9 @@ using System.Text.RegularExpressions;
 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.System;
 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 sealed partial class MainWindow : Window
        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 sealed partial class MainWindow : Window

        Activated += MainWindow_Activated;
        AppTitleBar.SizeChanged += AppTitleBar_SizeChanged;
-
+        SetAcrylic();
        ExtendsContentIntoTitleBar = true;

        // Hide our titlebar. We'll make the sides draggable later
@@ -264,8 +272,9 @@ public sealed partial class MainWindow : Window
    {
        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 @@ public sealed partial class MainWindow : Window
        }
        else
        {
-            AppTitleTextBlock.Foreground =
-                (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            _configurationSource.IsInputActive = true;
        }
    }

@@ -391,5 +400,87 @@ public sealed partial class MainWindow : Window
        // 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!;
+        }
    }
 }
--- 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>

--- 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">
--- a/src/modules/cmdpal/WindowsCommandPalette/Views/MarkdownPage.xaml
+++ b/src/modules/cmdpal/WindowsCommandPalette/Views/MarkdownPage.xaml
@@ -3,6 +3,7 @@
    x:Class="WindowsCommandPalette.Views.MarkdownPage"
    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"
@@ -15,7 +16,7 @@

    <Page.Resources>
        <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />

            <!--  Template for actions in the mode actions dropdown button  -->
            <DataTemplate x:Key="ContextMenuViewModelTemplate" x:DataType="devpal:ContextItemViewModel">
@@ -82,6 +83,7 @@
            <TextBlock
                Margin="0,-2,0,0"
                VerticalAlignment="Center"
+                x:Name="TitleBlock"
                Style="{StaticResource BodyStrongTextBlockStyle}"
                Text="{x:Bind ViewModel.Page.Name}" />
        </StackPanel>