[Settings] Add visual preview of appearance settings for FZ (#14499)

* Adding visual preview

* UI tweaks

* Update FancyZonesPage.xaml

* Update FancyZonesPage.xaml

* Tweaked margins

* UI tweaks

* show desktop wallpaper

* fix spellcheck

Co-authored-by: Laute <Niels.Laute@philips.com>
Co-authored-by: Davide <davide.giacometti@outlook.it>
This commit is contained in:
Niels Laute 2021-11-18 20:35:07 +01:00 committed by GitHub
parent 04a72ed947
commit dfb5736ac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 226 additions and 31 deletions

View file

@ -699,6 +699,7 @@ gdi
gdiplus
GDISCALED
generatesqlfromuserquery
GETDESKWALLPAPER
GETDISPINFO
GETDLGCODE
GETDPISCALEDSIZE

View file

@ -27,7 +27,6 @@
</Style>
<Style TargetType="controls:CheckBoxWithDescriptionControl" BasedOn="{StaticResource DefaultCheckBoxStyle}" />
</ResourceDictionary>
</Application.Resources>
</xaml:XamlApplication>

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View file

@ -0,0 +1,50 @@
<UserControl
x:Class="Microsoft.PowerToys.Settings.UI.Controls.FancyZonesPreviewControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
RequestedTheme="Dark"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="White" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<SolidColorBrush x:Key="DefaultAccentBrush" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="DefaultBorderBrush" Color="{ThemeResource SystemAccentColor}"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid CornerRadius="4" BorderBrush="Black" Background="Black" BorderThickness="6" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Opacity="0.8" Grid.ColumnSpan="2" Grid.RowSpan="3" CornerRadius="2" >
<Image Source="{x:Bind WallpaperPath, Mode=OneWay}" Stretch="UniformToFill"/>
</Border>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}" Grid.Row="2" Grid.ColumnSpan="2"/>
<Border x:Name="Zone1" Margin="4,4,2,4" CornerRadius="2" Grid.RowSpan="2" BorderThickness="1"/>
<Border x:Name="Zone2" Margin="2,4,4,2" CornerRadius="2" Grid.Column="1" BorderThickness="1"/>
<Border x:Name="Zone3" Margin="2,2,4,4" CornerRadius="2" Grid.Row="1" Grid.Column="1" BorderThickness="1"/>
</Grid>
</UserControl>

View file

@ -0,0 +1,120 @@
// 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.ComponentModel;
using System.IO;
using System.Text;
using Microsoft.PowerToys.Settings.UI.Helpers;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
namespace Microsoft.PowerToys.Settings.UI.Controls
{
public sealed partial class FancyZonesPreviewControl : UserControl
{
public FancyZonesPreviewControl()
{
this.InitializeComponent();
try
{
var wallpaperPathBuilder = new StringBuilder(260);
NativeMethods.SystemParametersInfo(NativeMethods.SPI_GETDESKWALLPAPER, wallpaperPathBuilder.Capacity, wallpaperPathBuilder, 0);
var wallpaperPath = wallpaperPathBuilder.ToString();
if (File.Exists(wallpaperPath))
{
WallpaperPath = wallpaperPath;
}
}
catch (Win32Exception)
{
}
}
public bool IsSystemTheme
{
get { return (bool)GetValue(IsSystemThemeProperty); }
set { SetValue(IsSystemThemeProperty, value); }
}
public string WallpaperPath
{
get { return (string)GetValue(WallpaperPathProperty); }
set { SetValue(WallpaperPathProperty, value); }
}
public static readonly DependencyProperty IsSystemThemeProperty = DependencyProperty.Register("IsSystemTheme", typeof(bool), typeof(FancyZonesPreviewControl), new PropertyMetadata(default(bool), OnPropertyChanged));
public static readonly DependencyProperty WallpaperPathProperty = DependencyProperty.Register("WallpaperPath", typeof(string), typeof(FancyZonesPreviewControl), new PropertyMetadata("ms-appx:///Assets/wallpaper_placeholder.png"));
public Color CustomBorderColor
{
get { return (Color)GetValue(CustomBorderColorProperty); }
set { SetValue(CustomBorderColorProperty, value); }
}
public static readonly DependencyProperty CustomBorderColorProperty = DependencyProperty.Register("CustomBorderColor", typeof(Color), typeof(FancyZonesPreviewControl), new PropertyMetadata(null, OnPropertyChanged));
public Color CustomInActiveColor
{
get { return (Color)GetValue(CustomInActiveColorProperty); }
set { SetValue(CustomInActiveColorProperty, value); }
}
public static readonly DependencyProperty CustomInActiveColorProperty = DependencyProperty.Register("CustomInActiveColor", typeof(Color), typeof(FancyZonesPreviewControl), new PropertyMetadata(null, OnPropertyChanged));
public Color CustomHighlightColor
{
get { return (Color)GetValue(CustomHighlightColorProperty); }
set { SetValue(CustomHighlightColorProperty, value); }
}
public static readonly DependencyProperty CustomHighlightColorProperty = DependencyProperty.Register("CustomHighlightColor", typeof(Color), typeof(FancyZonesPreviewControl), new PropertyMetadata(null, OnPropertyChanged));
public double HighlightOpacity
{
get { return (double)GetValue(HighlightOpacityProperty); }
set { SetValue(HighlightOpacityProperty, value); }
}
public static readonly DependencyProperty HighlightOpacityProperty = DependencyProperty.Register("CustomHighlightColor", typeof(double), typeof(FancyZonesPreviewControl), new PropertyMetadata(1.0, OnPropertyChanged));
private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((FancyZonesPreviewControl)d).Update();
}
private SolidColorBrush highlightBrush;
private SolidColorBrush inActiveBrush;
private SolidColorBrush borderBrush;
private void Update()
{
if (!IsSystemTheme)
{
highlightBrush = new SolidColorBrush(CustomHighlightColor);
inActiveBrush = new SolidColorBrush(CustomInActiveColor);
borderBrush = new SolidColorBrush(CustomBorderColor);
}
else
{
highlightBrush = (SolidColorBrush)this.Resources["DefaultAccentBrush"];
inActiveBrush = (SolidColorBrush)this.Resources["SolidBackgroundBrush"];
borderBrush = (SolidColorBrush)this.Resources["DefaultBorderBrush"];
}
highlightBrush.Opacity = HighlightOpacity / 100;
inActiveBrush.Opacity = HighlightOpacity / 100;
Zone1.Background = highlightBrush;
Zone2.Background = inActiveBrush;
Zone3.Background = inActiveBrush;
Zone1.BorderBrush = borderBrush;
Zone2.BorderBrush = borderBrush;
Zone3.BorderBrush = borderBrush;
}
}
}

View file

@ -14,10 +14,12 @@
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<Button x:Name="EditButton"
Padding="0"
Background="Transparent"
BorderBrush="Transparent"
Click="OpenDialogButton_Click" >
<StackPanel Orientation="Horizontal"
Margin="6,0,6,0"
Spacing="16">
<ItemsControl x:Name="PreviewKeysControl"
IsEnabled="{Binding ElementName=EditButton, Path=IsEnabled}"
@ -40,8 +42,7 @@
</ItemsControl>
<FontIcon Glyph="&#xE104;"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="14"
Margin="0,0,4,0" />
FontSize="14"/>
</StackPanel>
</Button>
</StackPanel>

View file

@ -4,6 +4,7 @@
using System;
using System.Runtime.InteropServices;
using System.Text;
namespace Microsoft.PowerToys.Settings.UI.Helpers
{
@ -11,6 +12,7 @@ namespace Microsoft.PowerToys.Settings.UI.Helpers
{
private const int GWL_STYLE = -16;
private const int WS_POPUP = 1 << 31; // 0x80000000
internal const int SPI_GETDESKWALLPAPER = 0x0073;
[DllImport("user32.dll")]
internal static extern uint SendInput(uint nInputs, NativeKeyboardHelper.INPUT[] pInputs, int cbSize);
@ -38,6 +40,10 @@ namespace Microsoft.PowerToys.Settings.UI.Helpers
public static extern bool FreeLibrary(IntPtr hModule);
#pragma warning restore CA1401 // P/Invokes should not be visible
[DllImport("user32.dll", SetLastError = true, CharSet = CharSet.Unicode)]
[return: MarshalAs(UnmanagedType.Bool)]
internal static extern bool SystemParametersInfo(int uiAction, int uiParam, StringBuilder pvParam, int fWinIni);
public static void SetPopupStyle(IntPtr hwnd)
{
_ = SetWindowLong(hwnd, GWL_STYLE, GetWindowLong(hwnd, GWL_STYLE) | WS_POPUP);

View file

@ -99,6 +99,9 @@
<Compile Include="Controls\ColorPickerButton.xaml.cs">
<DependentUpon>ColorPickerButton.xaml</DependentUpon>
</Compile>
<Compile Include="Controls\FancyZonesPreviewControl.xaml.cs">
<DependentUpon>FancyZonesPreviewControl.xaml</DependentUpon>
</Compile>
<Compile Include="Controls\IsEnabledTextBlock\IsEnabledTextBlock.cs" />
<Compile Include="Controls\SettingsGroup\SettingsGroupAutomationPeer.cs" />
<Compile Include="Controls\ShortcutControl\ShortcutControl.xaml.cs">
@ -274,6 +277,7 @@
<Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
<Content Include="Assets\StoreLogo.png" />
<Content Include="Assets\StoreLogo.scale-100.png" />
<Content Include="Assets\wallpaper_placeholder.png" />
<Content Include="Assets\Wide310x150Logo.scale-200.png" />
<Content Include="Properties\Default.rd.xml" />
</ItemGroup>
@ -321,6 +325,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Controls\FancyZonesPreviewControl.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="Controls\IsEnabledTextBlock\IsEnabledTextBlock.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>

View file

@ -9,6 +9,7 @@
<StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
<SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FF34424d"/>
<Color x:Key="InfoBarInformationalSeverityIconBackground">#FF5fb2f2</Color>
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
<Thickness x:Key="CardBorderThickness">1</Thickness>
</ResourceDictionary>
@ -18,6 +19,7 @@
<StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
<SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FFd3e7f7"/>
<Color x:Key="InfoBarInformationalSeverityIconBackground">#FF0063b1</Color>
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="White" />
<Thickness x:Key="CardBorderThickness">1</Thickness>
</ResourceDictionary>
@ -26,6 +28,7 @@
<StaticResource x:Key="CardBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
<StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="SystemColorButtonTextColorBrush" />
<SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="#FF34424d"/>
<SolidColorBrush x:Key="SolidBackgroundBrush" Color="Black" />
<Color x:Key="InfoBarInformationalSeverityIconBackground">#FF5fb2f2</Color>
<Thickness x:Key="CardBorderThickness">2</Thickness>
</ResourceDictionary>

View file

@ -68,7 +68,6 @@
</controls:SettingExpander.Header>
<controls:SettingExpander.Content>
<StackPanel>
<CheckBox x:Uid="FancyZones_ShiftDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.ShiftDrag}" Margin="{StaticResource ExpanderSettingMargin}" />
<Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
<CheckBox x:Uid="FancyZones_MouseDragCheckBoxControl_Header" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.MouseSwitch}" Margin="{StaticResource ExpanderSettingMargin}" />
@ -94,7 +93,7 @@
</StackPanel>
</controls:SettingExpander.Content>
</controls:SettingExpander>
<controls:SettingExpander IsExpanded="True">
<controls:SettingExpander.Header>
@ -109,28 +108,16 @@
</controls:SettingExpander.Header>
<controls:SettingExpander.Content>
<StackPanel>
<StackPanel Visibility="{x:Bind Mode=OneWay, Path=ViewModel.SystemTheme, Converter={StaticResource FalseToVisibleConverter}}" >
<controls:Setting x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
<Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
<controls:Setting x:Uid="FancyZones_InActiveColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
<Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
<controls:Setting x:Uid="FancyZones_BorderColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
<Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
</StackPanel>
<controls:FancyZonesPreviewControl HighlightOpacity="{x:Bind Mode=OneWay, Path=ViewModel.HighlightOpacity}"
IsSystemTheme="{x:Bind Mode=OneWay, Path=ViewModel.SystemTheme}"
CustomHighlightColor="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=OneWay}"
CustomBorderColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=OneWay}"
CustomInActiveColor="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=OneWay}"
Margin="{StaticResource ExpanderSettingMargin}"
HorizontalAlignment="Left"
Width="170"
Grid.Column="1"
Height="86"/>
<controls:Setting x:Uid="FancyZones_HighlightOpacity" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<Slider Minimum="0"
@ -140,6 +127,26 @@
HorizontalAlignment="Right"/>
</controls:Setting.ActionContent>
</controls:Setting>
<StackPanel Visibility="{x:Bind Mode=OneWay, Path=ViewModel.SystemTheme, Converter={StaticResource FalseToVisibleConverter}}" >
<controls:Setting x:Uid="FancyZones_ZoneHighlightColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneHighlightColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
<controls:Setting x:Uid="FancyZones_InActiveColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton x:Name="InActiveColorButton" SelectedColor="{x:Bind Path=ViewModel.ZoneInActiveColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
<controls:Setting x:Uid="FancyZones_BorderColor" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.ZoneBorderColor, Mode=TwoWay}" />
</controls:Setting.ActionContent>
</controls:Setting>
</StackPanel>
</StackPanel>
</controls:SettingExpander.Content>
</controls:SettingExpander>
@ -171,7 +178,7 @@
<controls:SettingExpander IsExpanded="True">
<controls:SettingExpander.Header>
<controls:Setting x:Uid="FancyZones_WindowSwitching_GroupSettings" Icon="&#9112;" Style="{StaticResource ExpanderHeaderSettingStyle}">
<controls:Setting x:Uid="FancyZones_WindowSwitching_GroupSettings" Icon="&#xE140;" Style="{StaticResource ExpanderHeaderSettingStyle}">
<controls:Setting.ActionContent>
<ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.WindowSwitching}"/>
</controls:Setting.ActionContent>
@ -179,13 +186,13 @@
</controls:SettingExpander.Header>
<controls:SettingExpander.Content>
<StackPanel>
<controls:Setting x:Uid="FancyZones_HotkeyNextTabControl" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.WindowSwitchingCategoryEnabled}" Icon="&#9112;" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting x:Uid="FancyZones_HotkeyNextTabControl" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.WindowSwitchingCategoryEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ShortcutControl HotkeySettings="{x:Bind Path=ViewModel.NextTabHotkey, Mode=TwoWay}" MinWidth="{StaticResource SettingActionControlMinWidth}"/>
</controls:Setting.ActionContent>
</controls:Setting>
<Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
<controls:Setting x:Uid="FancyZones_HotkeyPrevTabControl" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.WindowSwitchingCategoryEnabled}" Icon="&#9111;" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting x:Uid="FancyZones_HotkeyPrevTabControl" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.WindowSwitchingCategoryEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
<controls:Setting.ActionContent>
<controls:ShortcutControl HotkeySettings="{x:Bind Path=ViewModel.PrevTabHotkey, Mode=TwoWay}" MinWidth="{StaticResource SettingActionControlMinWidth}"/>
</controls:Setting.ActionContent>