Fix for CmdPal settings page offset (#46568)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request

This is a weird bug in WinUI where a child panel gets a weird offset
when wrapped in a `ScrollViewer` and if it has a `MaxWidth`. The
solution is to wrap it with another panel 🤷

Top: with fix
Bottom: 0.98.1
<img width="1351" height="1259" alt="image"
src="https://github.com/user-attachments/assets/076ac947-58d1-4031-8be3-300a8511a636"
/>


<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #46238
<!-- - [ ] Closes: #yyy (add separate lines for additional resolved
issues) -->
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jiří Polášek <me@jiripolasek.com>
This commit is contained in:
Niels Laute
2026-04-01 07:46:06 +02:00
committed by GitHub
parent 7cc4a16aa7
commit ee70b3ceca

View File

@@ -13,208 +13,211 @@
mc:Ignorable="d"> mc:Ignorable="d">
<Grid> <Grid>
<ScrollViewer AutomationProperties.AutomationId="PageScrollViewer"> <ScrollViewer AutomationProperties.AutomationId="PageScrollViewer">
<Grid <!-- Wrapper Grid required to work around WinUI ScrollViewer + MaxWidth layout offset issue. Do not remove. -->
MaxWidth="1000" <Grid>
Padding="16,0,16,0"
VerticalAlignment="Top"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="16"
RowSpacing="8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<tkcontrols:OpacityMaskView
Margin="-16,0,-16,0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<tkcontrols:OpacityMaskView.OpacityMask>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0.50" Color="Black" />
<GradientStop Offset="0.75" Color="#80000000" />
<GradientStop Offset="0.95" Color="Transparent" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</tkcontrols:OpacityMaskView.OpacityMask>
<Grid MaxHeight="560">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<!-- Top-left: light cyan/blue -->
<GradientStop Offset="0.0" Color="#5FAFC9" />
<!-- Mid transition -->
<GradientStop Offset="0.45" Color="#3E7FB0" />
<!-- Bottom-right: deep blue -->
<GradientStop Offset="1.0" Color="#2C3E8F" />
</LinearGradientBrush>
</Grid.Background>
<TextBlock
x:Uid="CmdPal_HeroTitle"
Margin="0,24,0,12"
HorizontalAlignment="Center"
FontSize="36"
FontWeight="Bold">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0.0" Color="#FFB9EBFF" />
<GradientStop Offset="0.49" Color="#FF86CBFF" />
<GradientStop Offset="1.0" Color="#FFA1E7FF" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock
Grid.Row="1"
HorizontalAlignment="Center"
Foreground="White"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_Description" />
<Hyperlink NavigateUri="">
<Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
</Hyperlink>
</TextBlock>
<Image
Grid.Row="2"
Margin="0,16,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="/Assets/Settings/Modules/CmdPal.png"
Stretch="Uniform" />
</Grid>
</tkcontrols:OpacityMaskView>
<Grid <Grid
Grid.Row="1" MaxWidth="{StaticResource PageMaxWidth}"
Margin="0,-12,0,24" Padding="16,0,16,0"
ColumnSpacing="32" VerticalAlignment="Top"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="16"
RowSpacing="8"> RowSpacing="8">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <tkcontrols:OpacityMaskView
<ColumnDefinition Width="*" /> Margin="-16,0,-16,0"
<ColumnDefinition Width="*" /> HorizontalAlignment="Stretch"
<ColumnDefinition Width="*" /> HorizontalContentAlignment="Stretch">
</Grid.ColumnDefinitions> <tkcontrols:OpacityMaskView.OpacityMask>
<FontIcon <Rectangle>
HorizontalAlignment="Center" <Rectangle.Fill>
Foreground="{ThemeResource TextFillColorSecondaryBrush}" <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
Glyph="&#xEB3B;" /> <GradientStop Offset="0.50" Color="Black" />
<TextBlock <GradientStop Offset="0.75" Color="#80000000" />
Grid.Row="1" <GradientStop Offset="0.95" Color="Transparent" />
HorizontalAlignment="Center" </LinearGradientBrush>
TextAlignment="Center" </Rectangle.Fill>
TextWrapping="Wrap"> </Rectangle>
<Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak /> </tkcontrols:OpacityMaskView.OpacityMask>
<Run <Grid MaxHeight="560">
x:Uid="CmdPal_ExtensibleDescription" <Grid.RowDefinitions>
FontSize="12" <RowDefinition Height="Auto" />
Foreground="{ThemeResource TextFillColorSecondaryBrush}" /> <RowDefinition Height="Auto" />
</TextBlock> <RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<!-- Top-left: light cyan/blue -->
<GradientStop Offset="0.0" Color="#5FAFC9" />
<FontIcon <!-- Mid transition -->
Grid.Column="1" <GradientStop Offset="0.45" Color="#3E7FB0" />
HorizontalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Glyph="&#xE945;" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
<Run
x:Uid="CmdPal_FastDescription"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
</TextBlock>
<FontIcon <!-- Bottom-right: deep blue -->
Grid.Column="2" <GradientStop Offset="1.0" Color="#2C3E8F" />
HorizontalAlignment="Center" </LinearGradientBrush>
Foreground="{ThemeResource TextFillColorSecondaryBrush}" </Grid.Background>
Glyph="&#xE790;" /> <TextBlock
<TextBlock x:Uid="CmdPal_HeroTitle"
Margin="0,24,0,12"
HorizontalAlignment="Center"
FontSize="36"
FontWeight="Bold">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0.0" Color="#FFB9EBFF" />
<GradientStop Offset="0.49" Color="#FF86CBFF" />
<GradientStop Offset="1.0" Color="#FFA1E7FF" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<TextBlock
Grid.Row="1"
HorizontalAlignment="Center"
Foreground="White"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_Description" />
<Hyperlink NavigateUri="">
<Run x:Uid="LearnMore_CmdPal.Text" Foreground="White" />
</Hyperlink>
</TextBlock>
<Image
Grid.Row="2"
Margin="0,16,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="/Assets/Settings/Modules/CmdPal.png"
Stretch="Uniform" />
</Grid>
</tkcontrols:OpacityMaskView>
<Grid
Grid.Row="1" Grid.Row="1"
Grid.Column="2" Margin="0,-12,0,24"
HorizontalAlignment="Center" ColumnSpacing="32"
TextAlignment="Center" RowSpacing="8">
TextWrapping="Wrap"> <Grid.RowDefinitions>
<Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak /> <RowDefinition Height="Auto" />
<Run <RowDefinition Height="Auto" />
x:Uid="CmdPal_ModernDescription" </Grid.RowDefinitions>
FontSize="12" <Grid.ColumnDefinitions>
Foreground="{ThemeResource TextFillColorSecondaryBrush}" /> <ColumnDefinition Width="*" />
</TextBlock> <ColumnDefinition Width="*" />
</Grid> <ColumnDefinition Width="*" />
<StackPanel </Grid.ColumnDefinitions>
Grid.Row="2" <FontIcon
Margin="0,8,0,0" HorizontalAlignment="Center"
Orientation="Vertical" Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Spacing="{StaticResource SettingsCardSpacing}"> Glyph="&#xEB3B;" />
<controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}"> <TextBlock
Grid.Row="1"
HorizontalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_ExtensibleHeader" FontWeight="SemiBold" /> <LineBreak />
<Run
x:Uid="CmdPal_ExtensibleDescription"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
</TextBlock>
<FontIcon
Grid.Column="1"
HorizontalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Glyph="&#xE945;" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_FastHeader" FontWeight="SemiBold" /> <LineBreak />
<Run
x:Uid="CmdPal_FastDescription"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
</TextBlock>
<FontIcon
Grid.Column="2"
HorizontalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Glyph="&#xE790;" />
<TextBlock
Grid.Row="1"
Grid.Column="2"
HorizontalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap">
<Run x:Uid="CmdPal_ModernHeader" FontWeight="SemiBold" /> <LineBreak />
<Run
x:Uid="CmdPal_ModernDescription"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
</TextBlock>
</Grid>
<StackPanel
Grid.Row="2"
Margin="0,8,0,0"
Orientation="Vertical"
Spacing="{StaticResource SettingsCardSpacing}">
<controls:GPOInfoControl ShowWarning="{x:Bind ViewModel.IsEnabledGpoConfigured, Mode=OneWay}">
<tkcontrols:SettingsCard
Name="CmdPalEnableCmdPal"
x:Uid="CmdPal_Enable_CmdPal"
HorizontalAlignment="Stretch"
HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}">
<ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
</controls:GPOInfoControl>
<tkcontrols:SettingsCard <tkcontrols:SettingsCard
Name="CmdPalEnableCmdPal" x:Uid="CmdPal_Launch"
x:Uid="CmdPal_Enable_CmdPal" Grid.Row="3"
HorizontalAlignment="Stretch" ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
HeaderIcon="{ui:BitmapIcon Source=/Assets/Settings/Icons/CmdPal.png}"> Click="LaunchCard_Click"
<ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" /> HeaderIcon="{ui:FontIcon Glyph=&#xE945;}"
IsClickEnabled="True"
IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ptcontrols:KeyVisual
Padding="8,8,8,8"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
Style="{StaticResource AccentKeyVisualStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</tkcontrols:SettingsCard> </tkcontrols:SettingsCard>
</controls:GPOInfoControl> <tkcontrols:SettingsCard
<tkcontrols:SettingsCard x:Uid="CmdPal_Settings"
x:Uid="CmdPal_Launch" Grid.Row="4"
Grid.Row="3" ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}" Click="SettingsCard_Click"
Click="LaunchCard_Click" HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
HeaderIcon="{ui:FontIcon Glyph=&#xE945;}" IsClickEnabled="True"
IsClickEnabled="True" IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}"> </StackPanel>
<ItemsControl </Grid>
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind Path=ViewModel.Hotkey.GetKeysList(), Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ptcontrols:KeyVisual
Padding="8,8,8,8"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
Style="{StaticResource AccentKeyVisualStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard
x:Uid="CmdPal_Settings"
Grid.Row="4"
ActionIcon="{ui:FontIcon Glyph=&#xE8A7;}"
Click="SettingsCard_Click"
HeaderIcon="{ui:FontIcon Glyph=&#xE713;}"
IsClickEnabled="True"
IsEnabled="{x:Bind ViewModel.IsEnabled, Mode=OneWay}" />
</StackPanel>
</Grid> </Grid>
</ScrollViewer> </ScrollViewer>
</Grid> </Grid>