starred/terminal
1
0
Fork 0
mirror of https://github.com/microsoft/terminal.git synced 2026-02-03 21:25:34 +00:00
Code Issues 19.0k Packages Projects Releases 20 Wiki Activity

Rectangular Tab border instead of circular #10052

New Issue
Open
opened 2026-01-31 02:11:17 +00:00 by claunia · 10 comments
claunia commented 2026-01-31 02:11:17 +00:00
Owner
Copy Link

Originally created by @iseeghosts on GitHub (Aug 7, 2020).

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
image
What should it look like
image

Originally created by @iseeghosts on GitHub (Aug 7, 2020). <!-- 🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨 I ACKNOWLEDGE THE FOLLOWING BEFORE PROCEEDING: 1. If I delete this entire template and go my own path, the core team may close my issue without further explanation or engagement. 2. If I list multiple bugs/concerns in this one issue, the core team may close my issue without further explanation or engagement. 3. If I write an issue that has many duplicates, the core team may close my issue without further explanation or engagement (and without necessarily spending time to find the exact duplicate ID number). 4. If I leave the title incomplete when filing the issue, the core team may close my issue without further explanation or engagement. 5. If I file something completely blank in the body, the core team may close my issue without further explanation or engagement. All good? Then proceed! --> # 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 ![image](https://user-images.githubusercontent.com/34771316/89641440-470bb180-d8cf-11ea-84cb-ccd2c1085e2b.png) What should it look like ![image](https://user-images.githubusercontent.com/34771316/89641489-63a7e980-d8cf-11ea-8555-4ab942f7df7f.png)
claunia added the Area-SettingsIssue-TaskProduct-TerminalArea-Theming labels 2026-01-31 02:11:17 +00:00
claunia commented 2026-01-31 02:11:17 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Aug 7, 2020):

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 commented on GitHub (Aug 7, 2020): 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!
claunia commented 2026-01-31 02:11:18 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Jun 16, 2022):

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 commented on GitHub (Jun 16, 2022): Notes: * Overriding the tab corner radius ON THE TOP seems fairly trivial. Just set the `OverlayCornerRadius` resource to whatever. * Changing the bottom seems **H**ard. 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
claunia commented 2026-01-31 02:11:18 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Jun 16, 2022):

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:

image

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.

@zadjii-msft commented on GitHub (Jun 16, 2022): 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: > > ![image](https://user-images.githubusercontent.com/18356694/174143648-93727aa8-ae60-452b-b871-4a296af3ab5a.png) > > 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 > ```c++ > 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.
claunia commented 2026-01-31 02:11:18 +00:00
Author
Owner
Copy Link

@ghost commented on GitHub (Jul 5, 2022):

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">
@ghost commented on GitHub (Jul 5, 2022): 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: ```XAML <TabViewItem CornerRadius="8,8,4,4" IsAttached="True"> ```
claunia commented 2026-01-31 02:11:19 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Jul 5, 2022):

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 commented on GitHub (Jul 5, 2022): 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)
claunia commented 2026-01-31 02:11:19 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Sep 9, 2022):

Maybe I've been overcomplicating by trying to dedupe this with https://github.com/microsoft/terminal/issues/3327#issuecomment-765493313. 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 commented on GitHub (Sep 9, 2022): Maybe I've been overcomplicating by trying to dedupe this with https://github.com/microsoft/terminal/issues/3327#issuecomment-765493313. 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](https://media.gcflearnfree.org/ctassets/topics/14/wn_switchwindows.gif))
claunia commented 2026-01-31 02:11:19 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Nov 21, 2022):

WinUI thread: https://github.com/microsoft/microsoft-ui-xaml/issues/7032

@zadjii-msft commented on GitHub (Nov 21, 2022): WinUI thread: https://github.com/microsoft/microsoft-ui-xaml/issues/7032
claunia commented 2026-01-31 02:11:20 +00:00
Author
Owner
Copy Link

@riotrah commented on GitHub (Jan 1, 2023):

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 🙄

@riotrah commented on GitHub (Jan 1, 2023): 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 🙄
claunia commented 2026-01-31 02:11:20 +00:00
Author
Owner
Copy Link

@zadjii-msft commented on GitHub (Jan 3, 2023):

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.

@zadjii-msft commented on GitHub (Jan 3, 2023): 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_.
claunia commented 2026-01-31 02:11:21 +00:00
Author
Owner
Copy Link

@Shomnipotence commented on GitHub (Jul 20, 2023):

image

@Shomnipotence commented on GitHub (Jul 20, 2023): ![image](https://github.com/microsoft/terminal/assets/6630660/152b3001-d3b8-41cf-9a90-fa2bdca8f96a)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
⛺ Reserved
A11yCO
A11yMAS
A11ySev1
A11ySev2
A11ySev3
A11yTTValidated
A11yUsable
A11yVoiceAccess
A11yWCAG
Area-Accessibility
Area-AtlasEngine
Area-AzureShell
Area-Build
Area-Build
Area-Chat
Area-CmdPal
Area-CodeHealth
Area-Commandline
Area-CookedRead
Area-DefApp
Area-Extensibility
Area-Fonts
Area-GroupPolicy
Area-i18n
Area-Input
Area-Interaction
Area-Interop
Area-Localization
Area-Output
Area-Performance
Area-Portable
Area-Quality
Area-Remoting
Area-Rendering
Area-Schema
Area-Server
Area-Settings
Area-SettingsUI
Area-ShellExtension
Area-ShellExtension
Area-ShellExtension
Area-Suggestions
Area-Suggestions
Area-TerminalConnection
Area-TerminalControl
Area-Theming
Area-UserInterface
Area-VT
Area-Windowing
Area-WPFControl
AutoMerge
Blocking-Ingestion
Culprit-Centennial
Culprit-WinUI
Disability-All
Disability-Blind
Disability-LowVision
Disability-Mobility
External-Blocked-WinUI3
Fixed
Gathering-Data
good first issue
HCL-E+D
HCL-WindowsTerminal
Help Wanted
Impact-Compatibility
Impact-Compliance
Impact-Correctness
Impact-Visual
In-PR
InclusionBacklog
InclusionBacklog-Windows TerminalWin32
InclusionCommitted-202206
Issue-Bug
Issue-Docs
Issue-Feature
Issue-Feature
Issue-Question
Issue-Samples
Issue-Scenario
Issue-Task
Needs-Attention
Needs-Author-Feedback
Needs-Bisect
Needs-Discussion
Needs-Repro
Needs-Tag-Fix
Needs-Tag-Fix
Needs-Triage
No-Recent-Activity
Priority-0
Priority-1
Priority-2
Priority-3
Product-Cmd.exe
Product-Colortool
Product-Colortool
Product-Colortool
Product-Conhost
Product-Conpty
Product-Meta
Product-Powershell
Product-Terminal
Product-WSL
pull-request
Mirrored from GitHub Pull Request
 Resolution-Answered
Resolution-By-Design
Resolution-Duplicate
Resolution-External
Resolution-Fix-Available
Resolution-Fix-Committed
Resolution-No-Repro
Resolution-Won't-Fix
Severity-Blocking
Severity-Crash
Severity-DataLoss
spam
this-will-be-a-breaking-change
Tracking-External
WindowsTerminal_Win32
Work-Item
zAskModeBug
zInbox-Bug
No Label Area-Settings Area-Theming Issue-Task Product-Terminal
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#10052
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?