[Settings] Mica & modern titlebar (#25936)

* Adding Mica

* Working Mica

* Fluent titlebar

* Modern titlebar

* Fixing OOBE

* Fix build issue

* Add missing entry to NOTICE.md

* Update App.xaml.cs
This commit is contained in:
Niels Laute
2023-06-11 17:54:01 +02:00
committed by GitHub
parent 56cdd6dd40
commit 852778daa5
16 changed files with 272 additions and 74 deletions

View File

@@ -2,22 +2,73 @@
x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShellPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animations="using:CommunityToolkit.WinUI.UI.Animations"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="using:CommunityToolkit.WinUI.UI"
HighContrastAdjustment="None"
Loaded="ShellPage_Loaded"
mc:Ignorable="d">
<!--
todo(Stefan):
BackdropMaterial.ApplyToRootOrPageBackground="True"
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutVisualStates">
<VisualState x:Name="WideLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="SmallLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="navigationView.PaneDisplayMode" Value="LeftMinimal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button
x:Name="PaneToggleBtn"
Width="48"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Click="PaneToggleBtn_Click"
Style="{StaticResource PaneToggleButtonStyle}" />
<Grid
x:Name="AppTitleBar"
Height="{Binding ElementName=navigationView, Path=CompactPaneLength}"
Margin="48,0,0,0"
VerticalAlignment="Top"
IsHitTestVisible="True">
<animations:Implicit.Animations>
<animations:OffsetAnimation Duration="0:0:0.3" />
</animations:Implicit.Animations>
<StackPanel Orientation="Horizontal">
<Image
Width="16"
Height="16"
HorizontalAlignment="Left"
Source="/icon.ico" />
<TextBlock
x:Name="AppTitleBarText"
x:Uid="OobeWindow_TitleTxt"
Margin="12,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
TextWrapping="NoWrap" />
</StackPanel>
</Grid>
<NavigationView
x:Name="NavigationView"
Grid.Row="1"
x:Name="navigationView"
IsBackButtonVisible="Collapsed"
IsPaneOpen="True"
DisplayModeChanged="NavigationView_DisplayModeChanged"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
OpenPaneLength="296"
@@ -116,31 +167,13 @@
<NavigationView.FooterMenuItems>
<NavigationViewItem
x:Uid="Shell_WhatsNew"
Icon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xF133;}"
Icon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
Glyph=&#xF133;}"
Tag="WhatsNew" />
</NavigationView.FooterMenuItems>
<NavigationView.Content>
<Frame x:Name="NavigationFrame" />
</NavigationView.Content>
</NavigationView>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutVisualStates">
<VisualState x:Name="WideLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="SmallLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationView.PaneDisplayMode" Value="LeftMinimal" />
<Setter Target="NavigationView.IsPaneToggleButtonVisible" Value="True" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>

View File

@@ -59,10 +59,9 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
InitializeComponent();
ExperimentationToggleSwitchEnabled = SettingsRepository<GeneralSettings>.GetInstance(settingsUtils).SettingsConfig.EnableExperimentation;
SetTitleBar();
DataContext = ViewModel;
OobeShellHandler = this;
UpdateUITheme();
Modules = new ObservableCollection<OobePowerToysModule>();
Modules.Insert((int)PowerToysModules.Overview, new OobePowerToysModule()
@@ -190,7 +189,7 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
public void OnClosing()
{
Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = this.NavigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = this.navigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
if (selectedItem != null)
{
Modules[(int)(PowerToysModules)Enum.Parse(typeof(PowerToysModules), (string)selectedItem.Tag, true)].LogClosingModuleEvent();
@@ -201,11 +200,11 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
{
if (selectedModule == PowerToysModules.WhatsNew)
{
NavigationView.SelectedItem = NavigationView.FooterMenuItems[0];
navigationView.SelectedItem = navigationView.FooterMenuItems[0];
}
else
{
NavigationView.SelectedItem = NavigationView.MenuItems[(int)selectedModule];
navigationView.SelectedItem = navigationView.MenuItems[(int)selectedModule];
}
}
@@ -264,20 +263,42 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
}
}
public void UpdateUITheme()
private void SetTitleBar()
{
switch (SettingsRepository<GeneralSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Theme.ToUpperInvariant())
var u = App.GetOobeWindow();
if (u != null)
{
case "LIGHT":
this.RequestedTheme = ElementTheme.Light;
break;
case "DARK":
this.RequestedTheme = ElementTheme.Dark;
break;
case "SYSTEM":
this.RequestedTheme = ElementTheme.Default;
break;
// A custom title bar is required for full window theme and Mica support.
// https://docs.microsoft.com/windows/apps/develop/title-bar?tabs=winui3#full-customization
u.ExtendsContentIntoTitleBar = true;
u.SetTitleBar(AppTitleBar);
}
}
private void ShellPage_Loaded(object sender, RoutedEventArgs e)
{
SetTitleBar();
}
private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
{
if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
{
PaneToggleBtn.Visibility = Visibility.Visible;
AppTitleBar.Margin = new Thickness(48, 0, 0, 0);
AppTitleBarText.Margin = new Thickness(12, 0, 0, 0);
}
else
{
PaneToggleBtn.Visibility = Visibility.Collapsed;
AppTitleBar.Margin = new Thickness(16, 0, 0, 0);
AppTitleBarText.Margin = new Thickness(16, 0, 0, 0);
}
}
private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
{
navigationView.IsPaneOpen = !navigationView.IsPaneOpen;
}
}
}