UI tweaks in Settings

This commit is contained in:
Niels Laute
2025-08-19 16:40:41 +02:00
parent 1be5e5931a
commit abc7f3f3fb
7 changed files with 114 additions and 178 deletions

View File

@@ -1,23 +0,0 @@
// 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 System;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Data;
namespace Microsoft.PowerToys.Settings.UI.Converters
{
public sealed partial class DarkModeBoolToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return value is bool b && b ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}

View File

@@ -1,23 +0,0 @@
// 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 System;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Data;
namespace Microsoft.PowerToys.Settings.UI.Converters
{
public sealed partial class InvertBooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return value is bool b && !b ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
}

View File

@@ -1,26 +0,0 @@
// 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 System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.UI.Xaml.Data;
namespace Microsoft.PowerToys.Settings.UI.Converters
{
public sealed partial class DarkModeInvertBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return value is bool b ? !b : value;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return value is bool b ? !b : value;
}
}
}

View File

@@ -1,121 +1,129 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8" ?>
<Page
x:Class="Microsoft.PowerToys.Settings.UI.Views.DarkModePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
xmlns:ui="using:CommunityToolkit.WinUI"
xmlns:ViewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
xmlns:ui="using:CommunityToolkit.WinUI"
d:DataContext="{d:DesignInstance Type=ViewModel:DarkModeViewModel}"
AutomationProperties.LandmarkType="Main"
mc:Ignorable="d">
<Page.Resources>
<converters:InvertBooleanToVisibilityConverter x:Key="InvertBoolToVisibilityConverter" />
<converters:DarkModeInvertBooleanConverter x:Key="InvertBooleanConverter" />
<converters:DarkModeBoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
</Page.Resources>
<Page.Resources>
<tkconverters:BoolToObjectConverter
x:Key="DarkModeLocationToSelectedIndexConverter"
FalseValue="0"
TrueValue="1" />
</Page.Resources>
<controls:SettingsPageControl
x:Uid="DarkMode"
IsTabStop="False"
ModuleImageSource="ms-appx:///Assets/Settings/Modules/Awake.png">
<controls:SettingsPageControl
x:Uid="DarkMode"
IsTabStop="False"
ModuleImageSource="ms-appx:///Assets/Settings/Modules/Awake.png">
<controls:SettingsPageControl.ModuleContent>
<StackPanel Orientation="Vertical">
<tkcontrols:SettingsCard
Header="Enable DarkMode"
HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Awake.png}"
IsEnabled="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
<ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<controls:SettingsPageControl.ModuleContent>
<StackPanel ChildrenTransitions="{StaticResource SettingsCardsAnimations}" Orientation="Vertical">
<InfoBar
x:Uid="GPO_SettingIsManaged"
IsClosable="False"
IsOpen="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
IsTabStop="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
Severity="Informational" />
<tkcontrols:SettingsCard
x:Uid="DarkMode_EnableSettingsCard"
HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/Awake.png}"
IsEnabled="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
<ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<controls:SettingsGroup x:Uid="DarkMode_BehaviorSettingsGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
<tkcontrols:SettingsExpander
Description="Use time-based or location-based rules to turn on dark mode"
Header="Schedule dark mode"
HeaderIcon="{ui:FontIcon Glyph=&#xE823;}"
IsExpanded="True">
<ComboBox SelectedIndex="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource DarkModeLocationToSelectedIndexConverter}}">
<ComboBoxItem Content="Set hours" />
<ComboBoxItem Content="Sunset to sunrise" />
</ComboBox>
<tkcontrols:SettingsExpander.Items>
<tkcontrols:SettingsCard Header="Turn on">
<StackPanel Orientation="Horizontal" Spacing="8">
<controls:IsEnabledTextBlock
VerticalAlignment="Center"
FontFamily="Segoe Fluent Icons"
FontSize="18"
Text="&#xED3A;"
ToolTipService.ToolTip="Sunset"
Visibility="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
<!-- Replace with appropriate time picker binding if needed -->
<TextBox IsEnabled="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" Text="{x:Bind ViewModel.LightTime, Mode=TwoWay}" />
</StackPanel>
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard Header="Turn off">
<StackPanel Orientation="Horizontal" Spacing="8">
<controls:IsEnabledTextBlock
VerticalAlignment="Center"
FontFamily="Segoe Fluent Icons"
FontSize="18"
Text="&#xED39;"
ToolTipService.ToolTip="Sunrise"
Visibility="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
<!-- Replace with appropriate time picker binding if needed -->
<TextBox IsEnabled="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" Text="{x:Bind ViewModel.DarkTime, Mode=TwoWay}" />
</StackPanel>
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard
Description="Use your location to calculate sunset and sunrise times"
Header="Location"
Visibility="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Horizontal" Spacing="8">
<controls:IsEnabledTextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="47.6456216°, -122.1321888°" />
<Button
HorizontalAlignment="Right"
Click="GetLocation_Click"
Content="Sync" />
</StackPanel>
</tkcontrols:SettingsCard>
</tkcontrols:SettingsExpander.Items>
</tkcontrols:SettingsExpander>
<tkcontrols:SettingsExpander
Description="Pick which parts of your PC should follow dark mode"
Header="Apply dark mode to"
HeaderIcon="{ui:FontIcon Glyph=&#xE790;}"
IsExpanded="True">
<tkcontrols:SettingsExpander.Items>
<tkcontrols:SettingsCard HorizontalContentAlignment="Stretch" ContentAlignment="Left">
<controls:CheckBoxWithDescriptionControl
Description="Taskbar, Start, and other system UI"
Header="System"
IsChecked="{x:Bind ViewModel.ChangeSystem, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard HorizontalContentAlignment="Stretch" ContentAlignment="Left">
<controls:CheckBoxWithDescriptionControl
Description="Supported applications"
Header="Apps"
IsChecked="{x:Bind ViewModel.ChangeApps, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
</tkcontrols:SettingsExpander.Items>
</tkcontrols:SettingsExpander>
<InfoBar
x:Uid="GPO_SettingIsManaged"
IsClosable="False"
IsOpen="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
IsTabStop="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"
Severity="Informational" />
<controls:SettingsGroup x:Uid="DarkMode_BehaviorSettingsGroup" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
<tkcontrols:SettingsCard x:Uid="DarkMode_ModeTargetCard"
Description="Decide whether to change the system theme, app theme, or both.">
<StackPanel Orientation="Horizontal" Spacing="20" Margin="0,10,0,0">
<CheckBox Content="Change system theme"
IsChecked="{x:Bind ViewModel.ChangeSystem, Mode=TwoWay}" />
<CheckBox Content="Change app theme"
IsChecked="{x:Bind ViewModel.ChangeApps, Mode=TwoWay}" />
</controls:SettingsGroup>
</StackPanel>
</tkcontrols:SettingsCard>
</controls:SettingsPageControl.ModuleContent>
<tkcontrols:SettingsCard x:Uid="DarkMode_PickModeCard"
Description="Choose how the theme should switch between light and dark modes.">
<StackPanel Orientation="Horizontal" Spacing="20" Margin="0,10,0,0">
<RadioButton x:Name="TimeModeRadio"
Content="Set Specific Times"
GroupName="ThemeSwitchMode"
x:Uid="DarkMode_TimeModeRadio"
IsChecked="{x:Bind ViewModel.UseLocation, Mode=TwoWay, Converter={StaticResource InvertBooleanConverter}}"
Checked="ModeRadio_Checked" />
<RadioButton x:Name="GeoModeRadio"
Content="Use Geolocation (Sunrise/Sunset)"
GroupName="ThemeSwitchMode"
x:Uid="DarkMode_LocationModeRadio"
IsChecked="{x:Bind ViewModel.UseLocation, Mode=TwoWay}"
Checked="ModeRadio_Checked" />
</StackPanel>
</tkcontrols:SettingsCard>
<!-- Time Settings Panel -->
<tkcontrols:SettingsCard Header="Set Specific Times"
Description="Set the times when the theme should switch."
Visibility="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource InvertBoolToVisibilityConverter}}" >
<StackPanel>
<TextBlock Text="Light Time" />
<!-- Replace with appropriate time picker binding if needed -->
<TextBox Text="{x:Bind ViewModel.LightTime, Mode=TwoWay}" />
<TextBlock Text="Dark Time" />
<TextBox Text="{x:Bind ViewModel.DarkTime, Mode=TwoWay}" />
</StackPanel>
</tkcontrols:SettingsCard>
<!-- Geolocation Panel -->
<tkcontrols:SettingsCard Header="Geolocation Settings"
Description="Use your location to switch theme at sunrise and sunset."
Visibility="{x:Bind ViewModel.IsUseLocationEnabled, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Vertical" Spacing="8">
<TextBlock Text="Location:" FontWeight="Bold"/>
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="Latitude:" />
<TextBlock Text="{x:Bind ViewModel.Latitude}" />
<TextBlock Text="Longitude:" />
<TextBlock Text="{x:Bind ViewModel.Longitude}" />
<Button Content="Get Location" Click="GetLocation_Click" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="Sunrise:" />
<TextBlock Text="0000" />
<TextBlock Text="Sunset:" />
<TextBlock Text="1800" />
</StackPanel>
</StackPanel>
</tkcontrols:SettingsCard>
</controls:SettingsGroup>
</StackPanel>
</controls:SettingsPageControl.ModuleContent>
<controls:SettingsPageControl.PrimaryLinks>
<controls:PageLink x:Uid="LearnMore_DarkMode" Link="https://aka.ms/PowerToysOverview_ZoomIt" />
</controls:SettingsPageControl.PrimaryLinks>
</controls:SettingsPageControl>
<controls:SettingsPageControl.PrimaryLinks>
<controls:PageLink x:Uid="LearnMore_DarkMode" Link="https://aka.ms/PowerToysOverview_ZoomIt" />
</controls:SettingsPageControl.PrimaryLinks>
</controls:SettingsPageControl>
</Page>

View File

@@ -73,7 +73,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
InitializeComponent();
}
private void ModeRadio_Checked(object sender, RoutedEventArgs e)
/* private void ModeRadio_Checked(object sender, RoutedEventArgs e)
{
if (TimeModeRadio.IsChecked == true)
{
@@ -88,7 +88,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
// Refresh the view so dependent fields update (if applicable)
ViewModel.NotifyPropertyChanged(nameof(ViewModel.IsUseLocationEnabled));
}
} */
private void GetLocation_Click(object sender, RoutedEventArgs e)
{

View File

@@ -38,15 +38,12 @@
Command="{x:Bind ViewModel.LaunchEventHandler}"
HeaderIcon="{ui:FontIcon Glyph=&#xEA37;}"
IsClickEnabled="True" />
<tkcontrols:SettingsCard x:Uid="RegistryPreview_DefaultRegApp" HeaderIcon="{ui:FontIcon Glyph=&#xE7AC;}">
<ToggleSwitch x:Uid="RegistryPreview_DefaultRegApp_ToggleSwitch" IsOn="{x:Bind ViewModel.IsRegistryPreviewDefaultRegApp, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
</controls:SettingsGroup>
</StackPanel>
</controls:SettingsPageControl.ModuleContent>
<controls:SettingsPageControl.PrimaryLinks>
<controls:PageLink x:Uid="LearnMore_RegistryPreview" Link="https://aka.ms/PowerToysOverview_RegistryPreview" />
</controls:SettingsPageControl.PrimaryLinks>

View File

@@ -5097,4 +5097,7 @@ To record a specific window, enter the hotkey with the Alt key in the opposite m
<data name="LearnMore_DarkMode.Text" xml:space="preserve">
<value>Learn more about DarkMode</value>
</data>
<data name="DarkMode_BehaviorSettingsGroup.Header" xml:space="preserve">
<value>Behavior</value>
</data>
</root>