[Zach Teutsch (zateutsch)]

What and why

The DevTools Size & spacing panel gave the wrong explanation in two common cases. It also didn't update when the window was resized.

• Margin: a control with Margin="10" was told "It got MORE width than it asked for, so something is stretching it". The margin was being counted as part of the asked-for size but not the size it got.
• Fixed Width: a control with Width="400" in a 275-pixel slot, and no MaxWidth set, was told "Check MaxWidth". The real problem is that it's wider than its parent and gets clipped.
• Resize: the explanation was read only when you selected an element. Resizing the window left it out of date.

With this change:

• Margin counts the same way on both sides. The "asked for" row shows "with margin" when a margin is set. Negative margins, or a margin wider than the space available, no longer produce false clipping warnings or negative numbers.
• A fixed Width that is too large says: "Its Width (400) is larger than the 275 its parent offered, so it is clipped. Lower Width, or give the parent more room." With a margin, it says "offered inside its Margin".
• When the selected element's layout changes, or a property the explanation reads changes (for example Margin, MaxWidth or HorizontalAlignment, or the parent's Spacing), or you edit one in DevTools, only the Size & spacing section redraws. The rest of the properties pane, including keyboard focus, stays put.

Fixes #1146

Before / after

Explanation text for a Width="400" element inside a 275-pixel slot (from the native window tests):

Before

It got LESS width than it asked for. Check MaxWidth or the space the parent had to give.

After

Its Width (400) is larger than the 275 its parent offered, so it is clipped. Lower Width, or give the parent more room.

For an element with Margin="10" and no constraint, the panel no longer claims something is stretching it.

Not tested / risks

• I haven't opened DevTools against a real app and resized or animated an element. The live redraw is covered only by native window tests.

Checklist

• Tests added or updated
• Tested locally on Windows: .\src\winapp-devtools\build-devtools.ps1 -Arch arm64 passed, with 461 of 461 native dispatcher checks and 112 of 112 native window checks

Notes for reviewers

The cause: the panel compared DesiredSize with RenderSize. DesiredSize includes the margin and is capped at the space the parent offers. RenderSize leaves out the margin and keeps an explicit Width even when it overflows. The fix adds the margin to the size the element got before comparing, and floors the result at zero.

To keep the panel current, it subscribes to LayoutUpdated and checks again after 250 ms. It redraws only if the layout numbers changed, so animation doesn't redraw it every frame.

[Copilot]

🟡 Changes recommended

Pending property reads can leave explanations stale, and margin edge cases still produce incorrect clipping warnings or negative offered widths.

3 open issues

• Refresh clipping explanation after dependent property reads · New
• Clamp negative-margin width before clipping comparison · New
• Clamp usable width to zero after subtracting margins · New

What changed in this PR

This PR updates DevTools’ Size & spacing panel to account for margins, explain oversized fixed widths, and refresh when the selected element’s layout changes.

Changes:

• Compares desired and rendered widths with consistent margin handling.
• Explains when a fixed Width exceeds the available space.
• Adds throttled layout updates that replace only the Size & spacing section, plus regression checks.

File	Description
src/​winapp-devtools/​test/​window-runtime-tests.cpp	Adds margin, fixed-width, and layout-comparison checks.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsWindow.State.inc	Stores the layout snapshot used by the pane.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsWindow.PropsPane.inc	Captures that snapshot when displaying a selection.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsWindow.PropsLayout.inc	Revises margin labels and width explanations.
src/​winapp-devtools/​native/​WinApp.DevTools.Native/​DevToolsWindow.LiveProps.inc	Watches layout changes and refreshes the section selectively.

_{Review effort: Balanced}

[github-actions]

Build Metrics Report

Validation passed. All required build and validation jobs succeeded.

Binary Sizes

Artifact	Baseline	Current	Delta
CLI (ARM64)	65.10 MB	65.11 MB	📈 +8.5 KB (+0.01%)
CLI (x64)	65.02 MB	65.03 MB	📈 +8.5 KB (+0.01%)
MSIX (ARM64)	26.95 MB	26.95 MB	📈 +2.4 KB (+0.01%)
MSIX (x64)	28.57 MB	28.57 MB	📈 +3.1 KB (+0.01%)
NPM Package	56.15 MB	56.16 MB	📈 +10.3 KB (+0.02%)
NuGet Package	56.30 MB	56.31 MB	📈 +7.6 KB (+0.01%)

.NET Test Results (TRX reports)

Other suites are reflected in the overall validation status above.

✅ 10669 passed, 43 skipped out of 10712 tests in 1781.3s (+5.0s vs. baseline)

Test Coverage

✅ 87.4% line coverage, 81.5% branch coverage · ✅ no change vs. baseline

CLI Startup Time

55ms median (x64, winapp --version) · 📉 -26ms vs. baseline

Try This Build

Installs the MSIX for your architecture, replacing any previously installed build. Needs the GitHub CLI — the command offers to install it and sign you in if it is missing.

& ([scriptblock]::Create((irm https://raw.githubusercontent.com/microsoft/winappCli/main/scripts/winapp-pr.ps1))) 1171

Switching between builds often?

Put the tool on your PATH once:

& ([scriptblock]::Create((irm https://raw.githubusercontent.com/microsoft/winappCli/main/scripts/winapp-pr.ps1))) -AddToPath

Then this build is just:

winapp-pr 1171

Run winapp-pr with no arguments to pick from a list of open PRs.

---

Updated 2026-10-24 00:01:44 UTC · commit 759c9d1 · workflow run

[Chiara Mooney (chiaramooney)]

Agent came back with 2 points of feedback. I believe both existed before this PR so I can file as separate issues to tackle later or you can address here. Lmk which route you want to go with. Approving in the interim:

Size & spacing can show old padding after an edit

What is wrong: Changing Padding in DevTools can update the app control and its Padding property row without updating the Size & spacing diagram.

How to reproduce: Select a Border control with fixed Width 400, Height 100, and Padding 10. Open Size & spacing, then change Padding to 20 in the properties pane. The app and property row update, but the diagram can still show padding 10 and content size 380 × 80. It should show padding 20 and content size 360 × 60.

Why it happens: The edit updates the property row before the live refresh checks it. The refresh sees no difference, and the control’s unchanged outer size also prevents a diagram redraw.

Smallest fix: Refresh Size & spacing after a spacing-property edit, even when the property row already shows the new value.

Verification: The skipped-refresh code path was reproduced in an executable probe. The visible behavior has not yet been confirmed in a running app.

Changing parent spacing can leave old parent details displayed

• What is wrong: SameLayout ignores parent spacing and other fields that the section displays.

• Show me: Select the first fixed-size child in a fixed-size StackPanel with two children. Change the parent’s Spacing from 8 to 24. The selected child’s geometry stays unchanged, so SameLayout returns true and “its spacing” remains 8.

• Why it matters: Developers inspecting a layout change receive outdated information.

• Smallest fix: Compare the remaining displayed parent, grid, and actual-size fields. Add a regression case where only parent spacing changes.

• Location: [DevToolsWindow.LiveProps.inc:205–215](https://github.com/microsoft/winappCli/blob/de3659d50a37abe4b467a7c9a43c46438770e498/src/winapp-devtools/native/WinApp.DevTools.Native/DevToolsWindow.LiveProps.inc#L205-L215)

[Zach Teutsch (zateutsch)]

Chiara Mooney (@chiaramooney) Fixed both here in 48bc3f9, since they're in the live-refresh code this PR adds: editing Padding (or Margin, Width, etc.) now redraws Size & spacing right away, and changing only the parent's Spacing, Padding, orientation or Grid cell now redraws it too. Tests added for both.