mirror of
https://github.com/microsoft/PowerToys.git
synced 2026-04-08 12:18:50 +02:00
[Settings] Aligning XAML across all pages (#12212)
* Updating settings * OOBE button * Removed unused namespaces Co-authored-by: Niels Laute <niels9001@hotmail.com>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
|
||||
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
|
||||
xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
|
||||
mc:Ignorable="d"
|
||||
@@ -15,53 +15,25 @@
|
||||
<converters:StringFormatConverter x:Key="StringFormatConverter"/>
|
||||
</Page.Resources>
|
||||
|
||||
<Grid RowSpacing="{StaticResource DefaultRowSpacing}">
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="LayoutVisualStates">
|
||||
<VisualState x:Name="WideLayout">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
|
||||
</VisualState.StateTriggers>
|
||||
</VisualState>
|
||||
<VisualState x:Name="SmallLayout">
|
||||
<VisualState.StateTriggers>
|
||||
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
|
||||
<AdaptiveTrigger MinWindowWidth="0" />
|
||||
</VisualState.StateTriggers>
|
||||
<VisualState.Setters>
|
||||
<Setter Target="SidePanel.(Grid.Column)" Value="0"/>
|
||||
<Setter Target="SidePanel.Width" Value="Auto"/>
|
||||
<Setter Target="ShortcutGuideView.(Grid.Row)" Value="1" />
|
||||
<Setter Target="ShortcutGuideView.Margin" Value="0" />
|
||||
<Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
|
||||
<Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
|
||||
<Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
|
||||
<Setter Target="AboutTitle.Visibility" Value="Collapsed" />
|
||||
</VisualState.Setters>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<StackPanel Orientation="Vertical"
|
||||
<controls:SettingsPageControl x:Uid="About_ShortcutGuide"
|
||||
ModuleImageSource="ms-appx:///Assets/Modules/ShortcutGuide.png"
|
||||
ModuleImageLink="https://aka.ms/PowerToysOverview_ShortcutGuide">
|
||||
<controls:SettingsPageControl.ModuleContent>
|
||||
|
||||
|
||||
<StackPanel Orientation="Vertical"
|
||||
x:Name="ShortcutGuideView"
|
||||
HorizontalAlignment="Left"
|
||||
Margin="0,0,48,0"
|
||||
MaxWidth="{StaticResource MaxContentWidth}">
|
||||
<ToggleSwitch x:Uid="ShortcutGuide_Enable"
|
||||
<ToggleSwitch x:Uid="ShortcutGuide_Enable"
|
||||
IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
|
||||
|
||||
<TextBlock x:Uid="Shortcuts"
|
||||
<TextBlock x:Uid="Shortcuts"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
|
||||
<CustomControls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
|
||||
|
||||
<controls:HotkeySettingsControl x:Uid="ShortcutGuide_OpenShortcutGuide"
|
||||
HorizontalAlignment="Left"
|
||||
MinWidth="240"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
@@ -69,12 +41,12 @@
|
||||
Keys="Win, Ctrl, Alt, Shift"
|
||||
Enabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
|
||||
<TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
|
||||
<TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
|
||||
<Slider x:Uid="ShortcutGuide_OverlayOpacity"
|
||||
<StackPanel Orientation="Horizontal" Margin="{StaticResource MediumTopMargin}" Spacing="12">
|
||||
<Slider x:Uid="ShortcutGuide_OverlayOpacity"
|
||||
Minimum="0"
|
||||
Maximum="100"
|
||||
Width="240"
|
||||
@@ -83,39 +55,39 @@
|
||||
HorizontalAlignment="Left"
|
||||
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"/>
|
||||
|
||||
<TextBlock
|
||||
Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
FontWeight="SemiBold"
|
||||
Margin="0,16,0,0"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
</StackPanel>
|
||||
<TextBlock
|
||||
Text="{x:Bind Mode=OneWay, Path=ViewModel.OverlayOpacity, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}%' }"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="16"
|
||||
FontWeight="SemiBold"
|
||||
Margin="0,16,0,0"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
</StackPanel>
|
||||
|
||||
<!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
|
||||
<!-- We cannot navigate to all the radio buttons using the arrow keys because of an XYNavigation issue in the RadioButtons control.
|
||||
The screen reader does not read the heading when we tab into a radio button, even though the LabeledBy automation property is set.
|
||||
Link to the issue in the winui repository - https://github.com/microsoft/microsoft-ui-xaml/issues/3156 -->
|
||||
<TextBlock Name="ShortcutGuide_Theme"
|
||||
<TextBlock Name="ShortcutGuide_Theme"
|
||||
x:Uid="ColorModeHeader"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
<muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
<muxc:RadioButtons IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
SelectedIndex="{x:Bind Mode=TwoWay, Path=ViewModel.ThemeIndex}"
|
||||
AutomationProperties.LabeledBy="{Binding ElementName=ShortcutGuide_Theme}">
|
||||
<RadioButton x:Uid="Radio_Theme_Dark" />
|
||||
<RadioButton x:Uid="Radio_Theme_Light" />
|
||||
<RadioButton x:Uid="Radio_Theme_Default"/>
|
||||
</muxc:RadioButtons>
|
||||
<HyperlinkButton Click="OpenColorsSettings_Click"
|
||||
<RadioButton x:Uid="Radio_Theme_Dark" />
|
||||
<RadioButton x:Uid="Radio_Theme_Light" />
|
||||
<RadioButton x:Uid="Radio_Theme_Default"/>
|
||||
</muxc:RadioButtons>
|
||||
<HyperlinkButton Click="OpenColorsSettings_Click"
|
||||
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
|
||||
<TextBlock x:Uid="Windows_Color_Settings" />
|
||||
</HyperlinkButton>
|
||||
|
||||
<TextBlock x:Uid="ShortcutGuide_DisabledApps"
|
||||
<TextBlock x:Uid="Windows_Color_Settings" />
|
||||
</HyperlinkButton>
|
||||
|
||||
<TextBlock x:Uid="ShortcutGuide_DisabledApps"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
|
||||
|
||||
<TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
|
||||
|
||||
<TextBox x:Uid="ShortcutGuide_DisabledApps_TextBoxControl"
|
||||
Margin="{StaticResource SmallTopMargin}"
|
||||
Text="{x:Bind Mode=TwoWay, Path=ViewModel.DisabledApps}"
|
||||
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
|
||||
@@ -127,46 +99,11 @@
|
||||
HorizontalAlignment="Left"
|
||||
MinWidth="240"
|
||||
MinHeight="160" />
|
||||
</StackPanel>
|
||||
|
||||
<RelativePanel x:Name="SidePanel"
|
||||
HorizontalAlignment="Left"
|
||||
Width="{StaticResource SidePanelWidth}"
|
||||
Grid.Column="1">
|
||||
<StackPanel x:Name="DescriptionPanel">
|
||||
<TextBlock x:Uid="About_ShortcutGuide"
|
||||
x:Name="AboutTitle"
|
||||
Grid.ColumnSpan="2"
|
||||
Style="{StaticResource SettingsGroupTitleStyle}"
|
||||
Margin="{StaticResource XSmallBottomMargin}"/>
|
||||
<TextBlock x:Uid="ShortcutGuide_Description"
|
||||
TextWrapping="Wrap"
|
||||
Grid.Row="1" />
|
||||
</StackPanel>
|
||||
|
||||
<Border x:Name="AboutImage"
|
||||
CornerRadius="4"
|
||||
Grid.Row="2"
|
||||
MaxWidth="240"
|
||||
HorizontalAlignment="Left"
|
||||
Margin="{StaticResource SmallTopBottomMargin}"
|
||||
RelativePanel.Below="DescriptionPanel">
|
||||
<HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
|
||||
<Image x:Uid="Shortcut_Guide_Image" Source="ms-appx:///Assets/Modules/ShortcutGuide.png" />
|
||||
</HyperlinkButton>
|
||||
</Border>
|
||||
|
||||
<StackPanel x:Name="LinksPanel"
|
||||
Margin="0,1,0,0"
|
||||
RelativePanel.Below="AboutImage"
|
||||
Orientation="Vertical" >
|
||||
<HyperlinkButton x:Uid="ShortcutGuide_ImageHyperlinkToDocs">
|
||||
<TextBlock x:Uid="Module_overview" />
|
||||
</HyperlinkButton>
|
||||
<HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
|
||||
<TextBlock x:Uid="Give_Feedback" />
|
||||
</HyperlinkButton>
|
||||
</StackPanel>
|
||||
</RelativePanel>
|
||||
</Grid>
|
||||
</controls:SettingsPageControl.ModuleContent>
|
||||
<controls:SettingsPageControl.ModuleLinks>
|
||||
<controls:SidePanelLink x:Uid="Learn_More" Link="https://aka.ms/PowerToysOverview_ShortcutGuide"/>
|
||||
<controls:SidePanelLink x:Uid="Give_Feedback" Link="https://aka.ms/powerToysGiveFeedback"/>
|
||||
</controls:SettingsPageControl.ModuleLinks>
|
||||
</controls:SettingsPageControl>
|
||||
</Page>
|
||||
Reference in New Issue
Block a user