Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Settings: XAML refactoring #29785

Closed
wants to merge 38 commits into from
Closed

Settings: XAML refactoring #29785

Show file tree
Hide file tree
Changes from 37 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
8cb7648
XAML brush up
Jay-o-Way Nov 9, 2023
2f4c654
XAML brush up
Jay-o-Way Nov 9, 2023
c55f7ee
adjust code for text
Jay-o-Way Nov 9, 2023
d64fff6
Controls
Jay-o-Way Nov 10, 2023
e77f046
OOBE
Jay-o-Way Nov 10, 2023
d1bd00d
Merge branch 'Settings-XAML-tweaks' of https://github.com/Jay-o-Way/P…
Jay-o-Way Nov 10, 2023
a8a1bee
forgot one
Jay-o-Way Nov 10, 2023
50f0d42
remove unneeded namespaces
Jay-o-Way Nov 10, 2023
456f71f
Remove and Sort Namespaces
Jay-o-Way Nov 10, 2023
433529e
trailing line endings
Jay-o-Way Nov 10, 2023
bedc436
re-write x:bind properties
Jay-o-Way Nov 10, 2023
36856bd
fix names
Jay-o-Way Nov 10, 2023
0be5031
Namespaces in Controls
Jay-o-Way Nov 10, 2023
6c27ff8
remove fixed height
Jay-o-Way Nov 10, 2023
2fd381e
fix padding
Jay-o-Way Nov 10, 2023
e1e817f
don't need that
Jay-o-Way Nov 11, 2023
99112f0
SubtitleTextBlockStyle
Jay-o-Way Nov 11, 2023
207ed6e
margins and paddings
Jay-o-Way Nov 11, 2023
28e01f2
Merge remote-tracking branch 'upstream/main' into Settings-XAML-tweaks
Jay-o-Way Nov 13, 2023
8c54dca
XAML STYLER
Jay-o-Way Nov 13, 2023
ac983e3
fix typo
Jay-o-Way Nov 13, 2023
90ad0cb
Merge branch 'microsoft:main' into Settings-XAML-tweaks
Jay-o-Way Nov 16, 2023
5699a44
use toolkit ns
Jay-o-Way Nov 16, 2023
a207c58
Merge remote-tracking branch 'upstream/main' into Settings-XAML-tweaks
Jay-o-Way Nov 21, 2023
bb25081
adress feedback
Jay-o-Way Nov 21, 2023
ba51454
Merge branch 'main' into Settings-XAML-tweaks
jaimecbernardo Nov 21, 2023
fae4db9
Feedback - margins/paddings
Jay-o-Way Nov 21, 2023
3363b97
remove background for Peek page
Jay-o-Way Nov 26, 2023
e11bbd3
undo changes to OobeSubtitleStyle and ColorFormatEditor
Jay-o-Way Nov 26, 2023
a083069
add VerticalAlignment to Image
Jay-o-Way Nov 26, 2023
68d7b99
fix format?
Jay-o-Way Nov 26, 2023
4010e44
Merge branch 'main' into Settings-XAML-tweaks
Jay-o-Way Dec 20, 2023
ebce33c
Update PowerLauncherPage.xaml
Jay-o-Way Dec 20, 2023
fd684f4
more "Binding" changes and removing of "path="
Jay-o-Way Dec 20, 2023
59e5e45
change to InfoBadge
Jay-o-Way Dec 21, 2023
d3ac12a
fix the cause of crashing at plugins
Jay-o-Way Dec 21, 2023
f7ca401
string.IsNullOrEmpty(pickedImage)
Jay-o-Way Dec 24, 2023
4848fd7
Merge branch 'main' into Settings-XAML-tweaks
Jay-o-Way Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/settings-ui/Settings.UI.Library/ImageSize.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ public int ExtraBoxOpacity
}
}

public bool EnableEtraBoxes
public bool EnableExtraBoxes
{
get
{
Expand Down Expand Up @@ -129,7 +129,7 @@ public int Fit
_fit = value;
OnPropertyChanged();
OnPropertyChanged(nameof(ExtraBoxOpacity));
OnPropertyChanged(nameof(EnableEtraBoxes));
OnPropertyChanged(nameof(EnableExtraBoxes));
}
}
}
Expand Down Expand Up @@ -207,7 +207,7 @@ public int Unit
_unit = value;
OnPropertyChanged();
OnPropertyChanged(nameof(ExtraBoxOpacity));
OnPropertyChanged(nameof(EnableEtraBoxes));
OnPropertyChanged(nameof(EnableExtraBoxes));
}
}
}
Expand Down
3 changes: 1 addition & 2 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/AlphaColorPickerButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
Expand All @@ -13,7 +12,7 @@
<!--TODO(stefan): ToDisplayName is no longer available in ColorHelper
<DropDownButton Padding="4,4,8,4" AutomationProperties.FullDescription="{x:Bind clr:ColorHelper.ToDisplayName(SelectedColor), Mode=OneWay }">
-->
<DropDownButton Padding="4,4,8,4">
<DropDownButton Padding="4,4,12,4">
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
<Border
x:Name="ColorPreviewBorder"
Width="48"
Expand Down
34 changes: 17 additions & 17 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorFormatEditor.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
x:Class="Microsoft.PowerToys.Settings.UI.Controls.ColorFormatEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CommunityToolkit="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
xmlns:custom="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkitcontrols="using:CommunityToolkit.WinUI.UI.Controls"
mc:Ignorable="d">
<UserControl.Resources>
<converters:ColorFormatConverter x:Key="ColorFormatConverter" />
<DataTemplate x:Key="FormatParameterTemplate" x:DataType="local:ColorFormatParameter">
<DataTemplate x:Key="FormatParameterTemplate" x:DataType="custom:ColorFormatParameter">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="34" />
<ColumnDefinition Width="32" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>

Expand All @@ -36,11 +36,11 @@
</Grid>
</DataTemplate>

<DataTemplate x:Key="ColorParameterTemplate" x:DataType="local:ColorFormatParameter">
<DataTemplate x:Key="ColorParameterTemplate" x:DataType="custom:ColorFormatParameter">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe increase the spacing between the sections a bit.. either by increasing the spacing (red) or decrease (blue) the bottom part of each section
image

Copy link
Collaborator Author

@Jay-o-Way Jay-o-Way Nov 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I knew you would mention this! 😄 My choice is based on:
image

Using Title, Subtitle and Body with 12epx spacing.

https://learn.microsoft.com/nl-nl/windows/apps/design/basics/content-basics#text--hierarchy

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the spacing is fine, but there is no hierarchy anymore. The title of a 'section' should provide more spacing so you know that the title/description belongs to the legend.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a Style would be better, then

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just adding an additional top-margin to the titles/descriptions should work!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, your suggestion contradicts the guidance of Microsoft. It's confusing me and I'm not sure what to do, but my preference would be to follow the guidance.

The information shown in this pop-up are sections, right? There needs to be more vertical spacing between sections vs. the title/label and content of a section. This helps to create a visual hierarchy. I don't believe the guidelines you mentioned describe the spacing between sections?

Here's an example from the Fluent Windows Visual Library in Figma, which should be considered as our redlines for things. See how the spacing between the different sections is slightly higher (red) than the spacing between the header of the textbox (blue)?
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the design library, the spacing between sections (red) is 24px and spacing between header/child (blue) is 12px. Might be slightly different in XAML with the rendering of the TextBlock

Copy link
Collaborator Author

@Jay-o-Way Jay-o-Way Nov 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, let's take one step back: Do we consider the legend as a control, or as text? That's a big difference. MS Learn actually says to use 8px between control and its header, but looks clear on the 12px between text.
Also: I don't know Figma and I don't understand why you keep bringing that up. I just want to use Content design basics for Windows apps. If anything on MS Learn is outdated, that info should be updated. Otherwise I'm sticking to that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs are outdated here and there (as you can see your article is from 2021) - I think for this topic specifically, they are still correct.

In Figma it's 12px, but could very well be it's 8px in epx. It's a detail, the point is that the current spacing between the headers of the sections does not provide the correct spacing.

For redlines and inspiration, the Windows Design team recommends to use the Fluent Windows Design Library - it's listed on the Toolkits and libraries page:
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made it 12 and 8.

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18" />
<ColumnDefinition Width="186" />
<ColumnDefinition Width="16" />
<ColumnDefinition Width="192" />
</Grid.ColumnDefinitions>

<TextBlock
Expand All @@ -60,14 +60,15 @@
</DataTemplate>

<ItemsPanelTemplate x:Key="ItemPanelTemplate">
<CommunityToolkit:WrapPanel
HorizontalSpacing="20"
<toolkitcontrols:WrapPanel
HorizontalSpacing="16"
Orientation="Horizontal"
VerticalSpacing="4" />
</ItemsPanelTemplate>
</UserControl.Resources>

<Grid>
<StackPanel Spacing="12">
<StackPanel Spacing="8">
<TextBox
x:Name="NewColorName"
x:Uid="NewColorName"
Expand All @@ -83,16 +84,14 @@
TextChanged="NewColorFormatTextBox_TextChanged" />

<TextBlock
Margin="12,0,0,0"
FontWeight="SemiBold"
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{Binding ElementName=NewColorFormatTextBox, Path=Text, Converter={StaticResource ColorFormatConverter}}" />

<TextBlock
x:Uid="ColorFormatEditorHelpline1"
Margin="0,12,0,0"
Style="{StaticResource CaptionTextBlockStyle}" />
Margin="0,4,0,0"
TextWrapping="Wrap" />

<ItemsControl
x:Name="ParametersItemsControl"
Expand All @@ -101,9 +100,9 @@

<TextBlock
Jay-o-Way marked this conversation as resolved.
Show resolved Hide resolved
x:Uid="ColorFormatEditorHelpline2"
Margin="0,12,0,0"
Margin="0,4,0,0"
VerticalAlignment="Bottom"
Style="{StaticResource CaptionTextBlockStyle}" />
TextWrapping="Wrap" />

<ItemsControl
x:Name="ColorParametersItemsControl"
Expand All @@ -112,8 +111,9 @@

<TextBlock
x:Uid="ColorFormatEditorHelpline3"
Margin="0,4,0,0"
VerticalAlignment="Bottom"
Style="{StaticResource CaptionTextBlockStyle}" />
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</UserControl>
3 changes: 1 addition & 2 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/ColorPickerButton.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
Expand All @@ -13,7 +12,7 @@
<!--TODO(stefan): ToDisplayName is no longer available in ColorHelper
<DropDownButton Padding="4,4,8,4" AutomationProperties.FullDescription="{x:Bind clr:ColorHelper.ToDisplayName(SelectedColor), Mode=OneWay }">
-->
<DropDownButton Padding="4,4,8,4">
<DropDownButton Padding="4,4,12,4">
<Border
x:Name="ColorPreviewBorder"
Width="48"
Expand Down
16 changes: 8 additions & 8 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/OOBEPageControl/OOBEPageControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,17 @@
<Image
x:Name="HeaderImage"
Height="{x:Bind HeroImageHeight}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{x:Bind HeroImage}"
Stretch="UniformToFill" />

<ScrollViewer
Grid.Row="1"
Padding="32,24,32,24"
VerticalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top" Orientation="Vertical">

<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel
Margin="36,12,36,24"
VerticalAlignment="Top"
Orientation="Vertical"
Spacing="12">
<TextBlock
x:Name="TitleTxt"
AutomationProperties.HeadingLevel="Level1"
Expand All @@ -34,14 +36,12 @@

<TextBlock
x:Name="DescriptionTxt"
Margin="0,8,0,0"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Text="{x:Bind Description}"
TextWrapping="Wrap" />

<ContentPresenter
x:Name="ModuleContentPresenter"
Margin="0,12,0,0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Content="{x:Bind PageContent}" />
Expand Down
3 changes: 1 addition & 2 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/SettingsGroup/SettingsGroup.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,14 @@
<TextBlock
x:Name="HeaderPresenter"
Grid.Row="0"
Margin="1,32,0,0"
Margin="0,32,0,0"
AutomationProperties.HeadingLevel="Level2"
Style="{ThemeResource BodyStrongTextBlockStyle}"
Text="{TemplateBinding Header}" />

<ContentPresenter
x:Name="DescriptionPresenter"
Grid.Row="1"
Margin="1,0,0,0"
Content="{TemplateBinding Description}"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
TextWrapping="WrapWholeWords">
Expand Down
22 changes: 13 additions & 9 deletions ...ettings-ui/Settings.UI/SettingsXAML/Controls/SettingsPageControl/SettingsPageControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@
TrueValue="Visible" />
</UserControl.Resources>

<Grid Padding="20,0,0,0" RowSpacing="24">
<Grid RowSpacing="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
x:Name="Header"
MaxWidth="{StaticResource PageMaxWidth}"
Padding="24,0"
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutomationProperties.HeadingLevel="1"
Expand All @@ -35,7 +36,8 @@

<ScrollViewer Grid.Row="1">
<Grid
Padding="0,0,20,48"
Name="ContentGrid"
Padding="24,0,24,24"
ChildrenTransitions="{StaticResource SettingsCardsAnimations}"
RowSpacing="24">
<Grid.RowDefinitions>
Expand All @@ -46,9 +48,9 @@

<!-- Top panel -->
<Grid
Name="TopGrid"
MaxWidth="{StaticResource PageMaxWidth}"
ColumnSpacing="16"
RowSpacing="16">
ColumnSpacing="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
Expand All @@ -69,7 +71,10 @@
</Image>
</Border>

<StackPanel x:Name="DescriptionPanel" Grid.Column="1">
<StackPanel
x:Name="DescriptionPanel"
Grid.Column="1"
Spacing="12">
<TextBlock
x:Name="AboutDescription"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Expand All @@ -78,7 +83,6 @@

<ItemsControl
x:Name="PrimaryLinksControl"
Margin="0,8,0,0"
IsTabStop="False"
ItemsSource="{x:Bind PrimaryLinks}">
<ItemsControl.ItemTemplate>
Expand All @@ -102,7 +106,6 @@
x:Name="ModuleContentPresenter"
Grid.Row="1"
MaxWidth="{StaticResource PageMaxWidth}"
Margin="0,12,0,0"
Content="{x:Bind ModuleContent}" />

<!-- Bottom panel -->
Expand All @@ -113,13 +116,11 @@
Orientation="Vertical"
Visibility="{x:Bind SecondaryLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}">
<TextBlock
Margin="2,8,0,0"
AutomationProperties.HeadingLevel="Level2"
Style="{ThemeResource BodyStrongTextBlockStyle}"
Text="{x:Bind SecondaryLinksHeader}" />
<ItemsControl
x:Name="SecondaryLinksItemControl"
Margin="2,0,0,0"
IsTabStop="False"
ItemsSource="{x:Bind SecondaryLinks}">
<ItemsControl.ItemTemplate>
Expand Down Expand Up @@ -153,6 +154,9 @@
<Setter Target="DescriptionPanel.(Grid.Row)" Value="1" />
<Setter Target="DescriptionPanel.(Grid.Column)" Value="0" />
<Setter Target="DescriptionPanel.(Grid.ColumnSpan)" Value="2" />
<Setter Target="Header.Padding" Value="16,0" />
<Setter Target="ContentGrid.Padding" Value="16,0,16,24" />
<Setter Target="TopGrid.RowSpacing" Value="12" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down
16 changes: 5 additions & 11 deletions src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
x:Class="Microsoft.PowerToys.Settings.UI.Controls.ShortcutControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:custom="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="LayoutRoot"
d:DesignHeight="300"
Expand All @@ -14,13 +14,10 @@
<StackPanel Orientation="Horizontal">
<Button
x:Name="EditButton"
Padding="0"
Padding="12,6"
Click="OpenDialogButton_Click"
CornerRadius="8">
<StackPanel
Margin="12,6,12,6"
Orientation="Horizontal"
Spacing="16">
<StackPanel Orientation="Horizontal" Spacing="16">
<ItemsControl
x:Name="PreviewKeysControl"
VerticalAlignment="Center"
Expand All @@ -33,7 +30,7 @@
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:KeyVisual
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
Expand All @@ -42,10 +39,7 @@
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<FontIcon
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="16"
Glyph="&#xE70F;" />
<FontIcon FontSize="16" Glyph="&#xE70F;" />
</StackPanel>
</Button>
</StackPanel>
Expand Down
Loading
Loading