Rectangular Tab border instead of circular

[iseeghosts]

Rectangular border like Microsoft Edge Legacy

Remove the curved border of tabs in Terminal and the weird colored border around the entire title bar.
The current one looks ugly, and resembles chromium (but bad), The first tab shouldn't have any space left to it's left.
and The tile bar is little thick when not maximized.

Current Look

What should it look like

[zadjii-msft]

Thanks for the suggestion! This is something that's already being discussed in #5772, but I'll tag this up as a sub-task of #3327. Thanks!

[zadjii-msft]

Notes:

• Overriding the tab corner radius ON THE TOP seems fairly trivial. Just set the OverlayCornerRadius resource to whatever.
• Changing the bottom seems Hard. Seems like there's no easy way to hide (Left|Right)RadiusRenderArc.Visibility on the TabViewItem itself. So you end up with this weird square on top, rounded into the terminal bottom that looks awful.
• How would we express "I want the bottom tab corners to round inwards, so they look like buttons?
  • I'm thinking we'd want the bottom corners to accept a positive number as the current outwards radius, and a negative number to be the inwards radius.
  • We'd need a TabViewItemCornerRadiusConverter to convert the negative radius to something sensible
  • We'd need TabViewItemCornerArcVisibilityConverter that collapses the bottom arcs when the corner radius set by the user is negative

[zadjii-msft]

From discussion with WinUI folks:

I think you would have to retemplate the TabViewItem component.

I would try the following: Apply a custom Style to TabViewItem without the LeftRadiusRenderArc, RightRadiusRenderArc and SelectedBackgroundPath elements. You get this which is not enough:

You need to extend the vertical lines down. Maybe TabViewItemSeparatorMargin affects that - I'm not sure.

You may have to replace the SelectedBackgroundPath with your own element, because unfortunately its shape is hardcoded in TabViewItem::UpdateTabGeometry(). This is pretty bad I know.

The key problem is this hardcoded line in \dev\TabView\TabViewItem.cpp

auto data = L"<Geometry xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>F1 M0,%f a 4,4 0 0 0 4,-4 L 4,%f a %f,%f 0 0 1 %f,-%f l %f,0 a %f,%f 0 0 1 %f,%f l 0,%f a 4,4 0 0 0 4,4 Z</Geometry>";

I think you'd have to write the same kind of code without the 2 bottom curves. Then call your own version of UpdateTabGeometry when the size changes like we do in TabViewItem::OnSizeChanged.

We'd need to make a specific request on WinUI to allow this to be changed in the tab view.

[ghost]

If you are willing to give up the two corner overlays, then customizing the entire tab can be easily done through TabContainer, without having to update the path through code.

Otherwise, I'd suggest using a single positive corner radius and another property for the tab attaching to the bottom or not.
This is for the eventuality that TabView will support different orientations in the future (+ negative radius doesn't make sense for the other two corners).
For the current design, it would look like this:

<TabViewItem CornerRadius="8,8,4,4" IsAttached="True">

[zadjii-msft]

That seems like a pretty sensible approach to me - we should make sure to capture that in the feature request on the WinUI team (whenever we get around to filing it)

[zadjii-msft]

Maybe I've been overcomplicating by trying to dedupe this with #3327 (comment). There's basically two sides to this spectrum

• I want the tabs to be rectangular, without curved corners
• I want the tabs to be buttons / pills. That should both include pills (floating "tabs", aka buttons), but also just like, rectangular buttons (like this)

[zadjii-msft]

WinUI thread: microsoft/microsoft-ui-xaml#7032

[riotrah]

Hi just to be clear - the work referenced being done in this issue is to allow end-users to make such OS/1st party UI-disruptive changes at their own peril, right? Or at a maximum, perhaps check if they're on win10 vs 11 or something?

Most certainly a linguistic/tonal/inference thing on my part, but if anyone is actually demanding regressing back to right angles again in 2022 as "the" WT design, on the basis of an obviously subjective and almost certainly minority-held premise of "rounded ugly" then I'll eat my shoe 🙄

[zadjii-msft]

Yes, to be totally clear - this would be a setting as a part of Themes. This would absolutely not be something we roll out by default to all users. It'd instead be a knob users could set if they so choose.

[Shomnipotence]