Skip to content

Commit a9a41ca

Browse files
davidegiacomettiniels9001
davidegiacometti
and
niels9001
authored
[CmdPal] Settings UI polishing (#38094)
<!-- Enter a brief description/summary of your PR here. What does it fix/what does it change/how was it tested (even manually, if necessary)? --> ## Summary of the Pull Request Settings window UI polishing: - Make the navigation view toggle button move in the title bar when navigation view mode is compact or minimal - Center settings card in the window - Properly set windows icon in order to make it visible in task manager and task view _main branch_ ![image](https://github.com/user-attachments/assets/792f0779-016a-4056-81b0-04244d903909) ![image](https://github.com/user-attachments/assets/81ac2761-2a9c-4fe7-a122-2f69f900e656) _PR_ ![image](https://github.com/user-attachments/assets/029b95a0-9629-4732-9f0c-bf586954e887) ![image](https://github.com/user-attachments/assets/81bb2beb-9a07-42cf-8594-16ba5a9cda1b) <!-- Please review the items on the PR checklist before submitting--> ## PR Checklist - [ ] **Closes:**: zadjii-msft#581 --------- Co-authored-by: Niels Laute <[email protected]>
1 parent 4e7bd34 commit a9a41ca

File tree

8 files changed

+85
-33
lines changed

8 files changed

+85
-33
lines changed

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/WindowExtensions.cs

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Copyright (c) Microsoft Corporation
2+
// The Microsoft Corporation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using Microsoft.UI;
6+
using Microsoft.UI.Windowing;
7+
using Microsoft.UI.Xaml;
8+
9+
namespace Microsoft.CmdPal.UI.Helpers;
10+
11+
public static class WindowExtensions
12+
{
13+
public static void SetIcon(this Window window)
14+
{
15+
var hWnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
16+
WindowId windowId = Win32Interop.GetWindowIdFromWindow(hWnd);
17+
AppWindow appWindow = AppWindow.GetFromWindowId(windowId);
18+
appWindow.SetIcon(@"Assets\icon.ico");
19+
}
20+
}

‎src/modules/cmdpal/Microsoft.CmdPal.UI/MainWindow.xaml.cs

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
using Microsoft.CmdPal.Common.Messages;
99
using Microsoft.CmdPal.Common.Services;
1010
using Microsoft.CmdPal.UI.Events;
11+
using Microsoft.CmdPal.UI.Helpers;
1112
using Microsoft.CmdPal.UI.ViewModels;
1213
using Microsoft.CmdPal.UI.ViewModels.Messages;
1314
using Microsoft.Extensions.DependencyInjection;
@@ -71,6 +72,7 @@ public MainWindow()
7172
// notification area icon back
7273
WM_TASKBAR_RESTART = PInvoke.RegisterWindowMessage("TaskbarCreated");
7374

75+
this.SetIcon();
7476
AppWindow.Title = RS_.GetString("AppName");
7577
AppWindow.Resize(new SizeInt32 { Width = 1000, Height = 620 });
7678
PositionCentered();

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/ExtensionPage.xaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
<RowDefinition Height="Auto" />
4242
<RowDefinition Height="*" />
4343
</Grid.RowDefinitions>
44-
<ScrollViewer Grid.Row="1" Padding="0,0,8,0">
45-
<Grid Padding="8,-8,8,8">
44+
<ScrollViewer Grid.Row="1">
45+
<Grid Padding="16">
4646
<StackPanel
4747
MaxWidth="1000"
4848
HorizontalAlignment="Stretch"

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/ExtensionsPage.xaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
<RowDefinition Height="Auto" />
2020
<RowDefinition Height="*" />
2121
</Grid.RowDefinitions>
22-
<ScrollViewer Grid.Row="1" Padding="0,0,8,0">
23-
<Grid Padding="8,16,8,8">
22+
<ScrollViewer Grid.Row="1">
23+
<Grid Padding="16">
2424
<StackPanel
2525
MaxWidth="1000"
2626
HorizontalAlignment="Stretch"

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/GeneralPage.xaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<RowDefinition Height="Auto" />
1818
<RowDefinition Height="*" />
1919
</Grid.RowDefinitions>
20-
<ScrollViewer Grid.Row="1" Padding="0,0,8,0">
21-
<Grid Padding="8,16,8,8">
20+
<ScrollViewer Grid.Row="1">
21+
<Grid Padding="16">
2222
<StackPanel
2323
MaxWidth="1000"
2424
HorizontalAlignment="Stretch"

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/SettingsWindow.xaml

+32-21
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,21 @@
2020
<RowDefinition Height="*" />
2121
</Grid.RowDefinitions>
2222
<!-- TO DO: Replace this with WinUI TitleBar once that ships. -->
23-
<StackPanel Height="48" Orientation="Horizontal">
23+
<Button
24+
x:Name="PaneToggleBtn"
25+
Width="48"
26+
HorizontalAlignment="Left"
27+
VerticalAlignment="Center"
28+
Click="PaneToggleBtn_Click"
29+
Style="{StaticResource PaneToggleButtonStyle}" />
30+
<StackPanel
31+
x:Name="AppTitleBar"
32+
Grid.Row="0"
33+
Height="48"
34+
Orientation="Horizontal">
2435
<Image
2536
Width="16"
2637
Height="16"
27-
Margin="16,0,0,0"
2838
Source="ms-appx:///Assets/StoreLogo.png" />
2939
<TextBlock
3040
Margin="12,0,0,0"
@@ -35,6 +45,7 @@
3545
<NavigationView
3646
x:Name="NavView"
3747
Grid.Row="1"
48+
DisplayModeChanged="NavView_DisplayModeChanged"
3849
IsBackButtonVisible="Collapsed"
3950
IsSettingsVisible="False"
4051
ItemInvoked="NavView_ItemInvoked"
@@ -46,10 +57,28 @@
4657
<Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness>
4758
</NavigationView.Resources>
4859

49-
<NavigationView.Header>
60+
<NavigationView.MenuItems>
61+
<NavigationViewItem
62+
x:Uid="Settings_GeneralPage_NavigationViewItem_General"
63+
Icon="{ui:FontIcon Glyph=&#xE80F;}"
64+
Tag="General" />
65+
<NavigationViewItem
66+
x:Uid="Settings_GeneralPage_NavigationViewItem_Extensions"
67+
Icon="{ui:FontIcon Glyph=&#xEA86;}"
68+
Tag="Extensions" />
69+
</NavigationView.MenuItems>
70+
71+
<Grid>
72+
<Grid.RowDefinitions>
73+
<RowDefinition Height="Auto" />
74+
<RowDefinition Height="*" />
75+
</Grid.RowDefinitions>
76+
5077
<BreadcrumbBar
5178
x:Name="NavigationBreadcrumbBar"
79+
Grid.Row="0"
5280
MaxWidth="1000"
81+
Margin="16,0,0,0"
5382
ItemClicked="NavigationBreadcrumbBar_ItemClicked"
5483
ItemsSource="{x:Bind BreadCrumbs, Mode=OneWay}">
5584
<BreadcrumbBar.ItemTemplate>
@@ -67,24 +96,6 @@
6796
</BreadcrumbBar.Resources>
6897
</BreadcrumbBar>
6998

70-
</NavigationView.Header>
71-
<NavigationView.MenuItems>
72-
<NavigationViewItem
73-
x:Uid="Settings_GeneralPage_NavigationViewItem_General"
74-
Icon="{ui:FontIcon Glyph=&#xE80F;}"
75-
Tag="General" />
76-
<NavigationViewItem
77-
x:Uid="Settings_GeneralPage_NavigationViewItem_Extensions"
78-
Icon="{ui:FontIcon Glyph=&#xEA86;}"
79-
Tag="Extensions" />
80-
</NavigationView.MenuItems>
81-
82-
<Grid>
83-
<Grid.RowDefinitions>
84-
<RowDefinition Height="Auto" />
85-
<RowDefinition Height="*" />
86-
</Grid.RowDefinitions>
87-
8899
<Frame x:Name="NavFrame" Grid.Row="1" />
89100
</Grid>
90101
</NavigationView>

‎src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/SettingsWindow.xaml.cs

+23-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
using System.Collections.ObjectModel;
66
using CommunityToolkit.Mvvm.Messaging;
7+
using Microsoft.CmdPal.UI.Helpers;
78
using Microsoft.CmdPal.UI.ViewModels;
89
using Microsoft.CmdPal.UI.ViewModels.Messages;
910
using Microsoft.UI.Windowing;
@@ -24,7 +25,7 @@ public SettingsWindow()
2425
{
2526
this.InitializeComponent();
2627
this.ExtendsContentIntoTitleBar = true;
27-
this.AppWindow.SetIcon("ms-appx:///Assets/Icons/StoreLogo.png");
28+
this.SetIcon();
2829
this.AppWindow.Title = RS_.GetString("SettingsWindowTitle");
2930
this.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
3031
PositionCentered();
@@ -110,6 +111,27 @@ private void Window_Closed(object sender, WindowEventArgs args)
110111
WeakReferenceMessenger.Default.Send<SettingsWindowClosedMessage>();
111112
}
112113

114+
private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
115+
{
116+
NavView.IsPaneOpen = !NavView.IsPaneOpen;
117+
}
118+
119+
private void NavView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
120+
{
121+
if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
122+
{
123+
PaneToggleBtn.Visibility = Visibility.Visible;
124+
NavView.IsPaneToggleButtonVisible = false;
125+
AppTitleBar.Margin = new Thickness(48, 0, 0, 0);
126+
}
127+
else
128+
{
129+
PaneToggleBtn.Visibility = Visibility.Collapsed;
130+
NavView.IsPaneToggleButtonVisible = true;
131+
AppTitleBar.Margin = new Thickness(16, 0, 0, 0);
132+
}
133+
}
134+
113135
public void Receive(QuitMessage message)
114136
{
115137
// This might come in on a background thread

‎src/modules/cmdpal/Microsoft.CmdPal.UI/ToastWindow.xaml.cs

+2-5
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,16 @@
44

55
using CommunityToolkit.Mvvm.Messaging;
66
using CommunityToolkit.WinUI;
7+
using Microsoft.CmdPal.UI.Helpers;
78
using Microsoft.CmdPal.UI.ViewModels;
89
using Microsoft.CmdPal.UI.ViewModels.Messages;
9-
using Microsoft.UI.Composition;
10-
using Microsoft.UI.Composition.SystemBackdrops;
1110
using Microsoft.UI.Dispatching;
1211
using Microsoft.UI.Windowing;
1312
using Microsoft.UI.Xaml;
1413
using Windows.Graphics;
15-
using Windows.UI;
1614
using Windows.Win32;
1715
using Windows.Win32.Foundation;
1816
using Windows.Win32.UI.WindowsAndMessaging;
19-
using WinRT;
2017
using RS_ = Microsoft.CmdPal.UI.Helpers.ResourceLoaderInstance;
2118

2219
namespace Microsoft.CmdPal.UI;
@@ -37,7 +34,7 @@ public ToastWindow()
3734
AppWindow.IsShownInSwitchers = false;
3835
ExtendsContentIntoTitleBar = true;
3936
AppWindow.SetPresenter(AppWindowPresenterKind.CompactOverlay);
40-
AppWindow.SetIcon("ms-appx:///Assets/Icons/StoreLogo.png");
37+
this.SetIcon();
4138
AppWindow.Title = RS_.GetString("ToastWindowTitle");
4239
AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Collapsed;
4340

0 commit comments

Comments
 (0)