I decided to create a WPF application and went all out with MVVM architecture (I have created GUI applications before, but not in WPF) and ran into an issue with grid container.

Basically, I have a UserControl named HomeUC which the user supposed to enter after selecting some files. In this user control, I created a 3x3 grid and occupy top row with menu / menu item(s), bottom with custom user control, and middle with another two user controls and a GridSplitter; first and last rows span across all of the columns.

What I noticed is that my middle column, which I initially set to 5px with surrounding columns being proportional (with star) becomes much larger than 5px in designer view (in Visual Studio 2026), like this:

So when I set it to 0px, it made me even more confused by remaining almost as large:

What's weird is that during runtime it looks fine until I resize my window, then I looks exactly like in debugger.

After removing stuff I noticed that when I remove my bottom UserControl the middle column becomes twice as small, and after removing menu it clearly becomes 5px:

I tried to reproduce the issue in new project with only menu with the same layout but it work as expected there.

Is there something I'm unintentionally setting in my bottom user control and during ColumnSpan changes my middle column? Because I have no other explanation why the column wouldn't remain 5px even with ColumnSpan.

Here's exact layout of my HomeUC:

And here is PlayerUC (since it's the only thing which I think could potentially break the grid - since after removing it column shrinks):

Here is my current project.