Skip to content

Commit 51e21dd

Browse files
[Windows 10] Fix layout in New Tab Menu page (#18424)
There's an existing WinUI bug where a nested Grid has it's star-sizing ignored on Windows 10. This resulted in the New Tab Menu page looking weird on Windows 10. This PR fixes the layout issue by applying a max width to the first column, which will be clipped as necessary to make space for the second column. Part of #18281 ## Validation Steps Performed Validated the page looks good on Windows 10 and Windows 11, even after resizing the window.
1 parent 3e969d5 commit 51e21dd

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,17 @@
3131
<ColumnDefinition Width="*" />
3232
<ColumnDefinition Width="Auto" />
3333
</Grid.ColumnDefinitions>
34+
<!--
35+
BODGY: We want two columns of content:
36+
1. the identifier (e.g. profile name), aligned left
37+
2. the buttons (e.g. reorder, delete), aligned right
38+
There's a bug in WinUI 2 for Windows 10 where these nested columns are treated as "auto" instead
39+
of *-sized. To work around this, we can set the width of the first column's content to
40+
StandardControlMaxWidth. The first column will be clipped as necessary to make space for the second column,
41+
resulting in the desired layout.
42+
-->
3443
<ContentPresenter Grid.Column="0"
44+
Width="{StaticResource StandardControlMaxWidth}"
3545
Content="{TemplateBinding Content}" />
3646
<StackPanel Grid.Column="1"
3747
Orientation="Horizontal"
@@ -127,7 +137,17 @@
127137
<ColumnDefinition Width="*" />
128138
<ColumnDefinition Width="Auto" />
129139
</Grid.ColumnDefinitions>
140+
<!--
141+
BODGY: We want two columns of content:
142+
1. the identifier (e.g. profile name), aligned left
143+
2. the buttons (e.g. reorder, delete), aligned right
144+
There's a bug in WinUI 2 for Windows 10 where these nested columns are treated as "auto" instead
145+
of *-sized. To work around this, we can set the width of the first column's content to
146+
StandardControlMaxWidth. The first column will be clipped as necessary to make space for the second column,
147+
resulting in the desired layout.
148+
-->
130149
<StackPanel Grid.Column="0"
150+
Width="{StaticResource StandardControlMaxWidth}"
131151
Orientation="Horizontal">
132152
<IconSourceElement Width="16"
133153
Height="16"

0 commit comments

Comments
 (0)